title: Is there something like "implicit undefined" and "explicit undefined" thing or just a magic in JavaScript?
body: <p>I'm super interested in what the heck is going on the below code:</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>// 1.
  
  let arr = [];
  console.log(arr);
  // []
  // Totally ok and normal
  
  // 2.
  
  arr[5] = 404;
  console.log(arr);
  // (6) [empty * 5, 404]
  // Absolutely nothing. it just works I know
  
  // 3.
  
  console.log(arr[0]);
  // undefined
  // No problem till here
  
  // 4.
  
  for (let idx in arr) {
    console.log(idx);
  }
  // 5
  
  
  // 5.
  
  arr[0] = undefined
  
  for (let idx in arr) {
    console.log(idx);
  }
  
  // 0
  // 5
  // Wait, what?</code></pre>
  </div>
  </div>
  </p>
  <p>Upon the step 3, arr[0] logged <code>undefined</code> and when I explicitly give a <code>undefined</code> to arr[0], it counted as an index in arr.</p>
  <p>Can someone please explain this magic?</p>