title: Javascript Destructing issue within a traditional for loop and a for of loop differences
body: <p>Let say I have an array of points = [[1,3],[-2,2] which represent x, y coordinates.</p>
  <p>I want to access these values (distances of two points) at the points [x,y]. I just can't get my mind wrapped on how these two approaches are different.</p>
  <p>Why do I have access to one hash maps value, and the next I received undefined?</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 getDistances1(points) {
    const lookup = new Map(); 
    // Destructing with a for of
    for (const [x, y] of points) {
      let distance = Math.sqrt((x**2) + (y**2))
      lookup.set([x,y], distance)
    }
  
    // I won't have access to the value of the array when I try to retrieve the value from the hash map
    return lookup; 
  }
  
  function getDistances2(points) {
    const lookup = new Map(); 
    // Destructing with a traditional for loop
    for (let i = 0; i &lt; points.length; i++) {
      // Destruct this way 
      const [x, y] = [...points[i]]
      let distance = Math.sqrt((x**2) + (y**2))
      lookup.set(points[i], distance)
    }
    // I have access to this points value 
    return lookup; // 
  }
  const coordinates = [[1,3],[-2,2]]
  const distance1 = getDistances1(coordinates); 
  const distance2 = getDistances2(coordinates);
  
  console.log(distance2.get(coordinates[0])) //-&gt; 3.1622776601683795  ; 
  console.log(distance1.get(coordinates[0])) // undefined</code></pre>
  </div>
  </div>
  </p>