title: What is the difference between ( for... in ) and ( for... of ) statements?
body: <p>I know what is a <code>for... in</code> loop (it iterates over the keys), but I have heard about <code>for... of</code> for the first time (it iterates over values).</p>
  <p>I am confused about <code>for... of</code> loop.</p>
  <pre class="lang-js prettyprint-override"><code>var arr = [3, 5, 7];
  arr.foo = &quot;hello&quot;;
      
  for (var i in arr) {
    console.log(i); // logs &quot;0&quot;, &quot;1&quot;, &quot;2&quot;, &quot;foo&quot;
  }
      
  for (var i of arr) {
    console.log(i); // logs &quot;3&quot;, &quot;5&quot;, &quot;7&quot;
    // it doesn't log &quot;3&quot;, &quot;5&quot;, &quot;7&quot;, &quot;hello&quot;
  }
  </code></pre>
  <p>I understand that <code>for... of</code> iterates over property values. Then why doesn't it log <code>&quot;3&quot;, &quot;5&quot;, &quot;7&quot;, &quot;hello&quot;</code> instead of <code>&quot;3&quot;, &quot;5&quot;, &quot;7&quot;</code>?</p>
  <p>Unlike <code>for... in</code> loop, which iterates over each key (<code>&quot;0&quot;, &quot;1&quot;, &quot;2&quot;, &quot;foo&quot;</code>) and also iterates over the <code>foo</code> key, the <code>for... of</code> <em>does not</em> iterate over the value of <code>foo</code> property, i.e., <code>&quot;hello&quot;</code>. Why it is like that?</p>
  <p>Here I console <code>for... of</code> loop. It should log <code>&quot;3&quot;, &quot;5&quot;, &quot;7&quot;,&quot;hello&quot;</code> but it logs <code>&quot;3&quot;, &quot;5&quot;, &quot;7&quot;</code>. Why?</p>
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement" rel="noreferrer">Example Link</a></p>