title: Why does this array-like object behave like this?
body: <p>By setting the prototypal methods of an object to Array methods, the object behaves like a hybrid between an object and an array. Below is a simple example:</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 Foo() {}
  Foo.prototype.push = Array.prototype.push;
  Foo.prototype.forEach = Array.prototype.forEach;
  
  var foo = new Foo();
  
  foo.push('abc');
  
  foo.length; // = 1 as expected. But wait, why isn't foo.length undefined? How/when did this property get attached to foo? 
  
  foo[1] = 'def';
  
  foo.length; // still = 1. But foo={0:'abc',1:'def'}, Why not =2?
  
  foo.forEach(function(item) {
    console.log(item)
  }); //shows only'abc' and not 'def'
  
  foo.push('ghi');
  
  foo.length; // = 2, and now foo = {0:'abc', 1:'ghi'}. So it overwrote the key=1, which means its accessing the same location, but the first approach did not change the length ( didn't become a part of the array ) why ?
  
  foo.forEach(function(item) {
    console.log(item)
  }); //now shows 'abc' and 'ghi'</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why is all this weird behavior happening, and why isn't it good to mimic Arrays like this?</p>