I'm working on an Angular application and want to loop over all the keys in a JavaScript map. A map is a key value pair data type, like an object, but geared for dynamic properties. In the ColdFusion world we called this a structure, and in ActionScript we called it a dictionary, but the concept is the same.

I can create a map and add items to it, like this:

view plain print about
1let myMap = new Map();
2myMap.set('foo', 'bar');
3myMap.set('bar', 'Barbar');
4myMap.set('foobar', 'BarbarFooFoo');

You can look at the map like this:

Once it has a set of keys, I can get the keys using this:

view plain print about

This is an object, or more specifically an iterator. But, I want the keys as an array.

One trick is to convert the iterator to an array using Array.from():

view plain print about
1Array.from( hydratedImageMap.keys() );

A more 'ES6' technique would be to use the spread operator:

view plain print about
1[ ...hydratedImageMap.keys() ]

You'll see similar output:

Not all that hard! Get the code here or play with it here.