for of loop and destructuring

Question

could someone explain to me how exactly map.entries() and destructuring work?

  var numbers = new Map()
      numbers.set(1,'one')
      numbers.set(2,'two')
      numbers.set(3,'three') 
      numbers.set(4,'four')
  var [key,value] = numbers.entries() // returns key as [1,'one'] and value as [2,'two']

   //but when using for..of loop 

  for(let [key,value] of numbers.entries()){
   console.log(key,value)
 } // it works and console logs keys and values

why does this work in a for..loop? and how does the .entries() method work exactly?i've been looking all over the web and couldn't really understand it.

Lighthearted

Your first [key, value] assignment is misleading. You're not getting a key and a value there. It would be better named [firstKeyValuePair, secondKeyValuePair], but I doubt this is even what you want. – Spirillum

Did you read the documentation on mdn? It has a quite clear example as well... Click through to read about iterators. – Spirillum

note that you don't even need .entries() in the for .. of loop because the map is directly iterable. – Fracture

This doesn't directly have to do with Maps and their entries, rather, you seem to fundamentally misunderstand the difference between assignment (=copy the whole thing) and iteration (=copy each part of the thing). – Licence

@Licence to be fair, some people might be surprised to find that a destructuring assignment like that actually takes values from the iterator rather than copying the iterator. – Fracture

@Licence that was exactly the problem,i didn't know what an iterator was,i thought that the entries method would return an object and that's why i was confused,i've ust read about how the iterator works and i understand everything now! – Lighthearted

@badiechakibe: I'm afraid, you're still misunderstanding where your mistake is. Even if entries did return an array, you'd be getting the same result. – Licence

@Licence i do understand,in the destructuring example,the entries method returns an array with all the entries as a key,value pair array,so the first element is gonna be both key and value pair that's gonna be stored in the first variable key and then the second key,value will be stored in value,as trincot said, i have to do it this way [[key,value]] = numbers.entries(),that way it's the first element that .entries() return will be assigned to that array, – Lighthearted

as for the for..of loop : if i understood it correctly,it's going to take the first element of that .entries() which is an array and then assign the [key,value],it works in a for...loop because the for loop takes the first element of .entries() and process it and then moves to the next element,unlike destructuring – Lighthearted

Answer 1

The entries method returns an iterator. Each value that the iterator yields is a key/value pair (array with 2 elements).

One way to get a grip on this, is to see what happens if you consume the iterator into a new array:

var numbers = new Map().set(1,'one').set(2,'two').set(3,'three').set(4,'four');

// Get everything from the iterator into a new array:                           
var arr = Array.from(numbers.entries());

console.log(arr);

Note that you get a series of key/value pairs into a new array:

[ [1, "one"], [2, "two"], [3, "three"], [4, "four"] ]

Now to your code. The first assignment to key and value is misleading, because you are not getting one key and one value. Instead you're grabbing the first two pairs that are yielded by the entries() iterator.

If you really want to get the first key with the corresponding value in 2 variables, you need to write:

var [[key, value]] = numbers.entries();

Spirillum

i think i understand now! the course i was watching missed out on a very important thing which was the iterator part,that's why i was confused, i thought the .entries() method would return an object with all the entries,but it was an iterator and that is different,thanks for the help! – Lighthearted

nevermind! i didn't have anything to do with that it was an iterator,but i understand it now,the thing was that i was getting series of key value pairs like you said and both of them were assigned to the first variable which was key and then the second key value pair was assigned to value,i get it now! – Lighthearted

Answer 2

you first assignment is more understandable in this way:

var [set1, set2, set3, set4] = numbers.entries();

above code piece destructures Key,Value pair (set).

On the other hand, your for loop enumerates over map and get every set item one by one. when you put let [key, value] you are actually destructuring set itself.

As a result, your for loop iterates over set item then for every set item, it uses destructuring to assign key and value

Chapland

Answer 3

In your first case, numbers.entries() stands for an array which holds every entry in your Map.

var [key,value] = numbers.entries();

key is the element at first index (0) in numbers.entries() array, value is the second and if you would have the third destructured property, e.g. elem, it would stand for [3, 'three'] and so on.

In your second case, you are looping over numbers.entries() array, so in every cycle you are getting just a single element in that array.

for (let [key, value] of numbers.entries())

Let's simplify it:

for (let singleElement of numbers.entries())

So with every cycle, singleElement stands for every nested array inside numbers.entries().

So the first cycle will be [1, 'one'], which after destructuring will evaluate into key as 1 and value as one and so on.

let [key, value] = singleElement; // [1, 'one']

If you want to read more about Map, consider looking at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Loralyn