First item from a Map on JavaScript ES2015

JavascriptDictionaryEcmascript 6

Javascript Problem Overview


I have a Map like this:

const m = new Map();
m.set('key1', {})
.
m.set('keyN' {})

the Mapcan have 1 or many items. Can I get the first item by index, without m.get('key1') and without a iterator loop?

like: m.get()[0]

Javascript Solutions


Solution 1 - Javascript

Use the Map.prototype.entries function, like this

const m = new Map();
m.set('key1', {})
m.set('keyN', {})

console.log(m.entries().next().value); // [ 'key1', {} ]


If you want to get the first key, then use Map.prototype.keys, like this

console.log(m.keys().next().value); // key1

Similarly if you want to get the first value, then you can use Map.prototype.values, like this

console.log(m.values().next().value); // {}

The reason why we have to call next() on the returned values is that, all those functions return iterators. Read more about the iteration protocol here.

Solution 2 - Javascript

For the specific example you are wondering about, destructuring would be perfect.

let m = new Map();
m.set('key1', {});
m.set('key2', {});

let [[, obj]] = m;

e.g.

let [pair] = m;
let [key, obj] = pair;

is one option to destructure and then grab the value, but the easier option would be

let [obj] = m.values();

Solution 3 - Javascript

It could also be done using the spread feature at ES6 and the next versions. Let's declare a new Map variable, then add two values. After that, we will use ... to convert the map into array or you can use Array.from then to get the first element just use [0] on the gotten array.

const m = new Map();
m.set('key1', 1);
m.set('key2', 2);

console.log([...m][0]);    // ['key1', 1] 👍🏼

Or quickly by using distruct feature for javascript array, so that [k, v] array refers to first item at the map.

const [[k, v]] = m;
console.log(k, v); // 'key1', 1

Solution 4 - Javascript

Also, that is correct for both Set and Map: you can convert anything to Array and then get any element by its index. Something like this:

const m = new Map();
m.set('key1', {});
m.set('key2', {});

console.log(Array.from(m)[0]); // ['key1', {}]

Solution 5 - Javascript

For all iterable objects you can use the iterator object[Symbol.iterator]().

In our case this will point to the entries() method as explained in the above MDN page :

> The map iterator function, which is the entries() function by default.

const m = new Map();
m.set('key1', {})
m.set('keyN', {})

console.log(m[Symbol.iterator]().next().value); // [ 'key1', {} ]

And here is a benchmark of all solutions : https://jsbench.me/9fkpm6q9y0/1

The entries() version wins but it is very tight to the iterator version. This is logical since [Symbol.iterator]() calls entries().

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPhilip LogerView Question on Stackoverflow
Solution 1 - JavascriptthefourtheyeView Answer on Stackoverflow
Solution 2 - JavascriptloganfsmythView Answer on Stackoverflow
Solution 3 - JavascriptZuhair TahaView Answer on Stackoverflow
Solution 4 - JavascriptKidThePugView Answer on Stackoverflow
Solution 5 - JavascriptthomasView Answer on Stackoverflow