title: Why is the function not returning any values? It's returning [object object] or undefined instead
body: <p>I am learning JQuery and I'm trying to figure out why the following functions are not returning anything.</p>
  
  <p>Here is the script:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Person(name,country){
      this.name = name;
      this.country = country;
  }
  var addressBook = {
    contact: new Array(),
    totalContact: 0,
    newContact: "",
    addContact: function(newName, newCountry){
      this.totalContact += 1;
      this.newContact = new Person(newName, newCountry);
      this.contact[this.totalContact.length] = this.newContact;
    },
    getContactList1: function(){
      for(var key in this.contact){
        return key;
      }
    },
    getContactList2: function(){
      for(var key in this.contact){
          return this.contact[key];
      }
    },
    getContactList3: function(){
      for(var i = 0; i&lt; this.totalContact.length; i++){
    
        if(this.contact[i]==="undefined"){
          return "What's wrong here?";
        }else{
          return this.contact[i];
        };
   }
    }
  };
  addressBook.addContact("HarryPotter","Philippines");
  $('.addressBook').append("&lt;div class='test'&gt;Why is getContactList1 not returning the keys: &lt;br /&gt; "+addressBook.getContactList1()+"&lt;/div&gt;");
  addressBook.addContact("Melody","Philippines");
  $('.addressBook').append("&lt;div class='test'&gt; What is causing this in getContactList2:&lt;br /&gt; "+addressBook.getContactList2()+"&lt;/div&gt;");
  $('.addressBook').append("&lt;div class='test'&gt; What is causing this in getContactList3:&lt;br /&gt;"+addressBook.getContactList3()+"&lt;/div&gt;");</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.addressBook{
  }
  .test{
    margin-bottom: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="addressBook"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Instead it's giving feedbacks:</p>
  
  <pre><code>[object Object]
  </code></pre>
  
  <p>or</p>
  
  <pre><code>undefined
  </code></pre>
  
  <p>I will appreciate your help :)</p>