How to Get the First Element of a Map in JavaScript (Easy Ways)
In this article, we'll be exploring some ways to quickly get the first element of a Map
object in JavaScript.
1. Call next() on Map entries()
To get the first element of a Map
, we can call the entries()
on the Map
to get an iterable object, then call the next()
method on this iterable. For example:
const map = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3'],
]);
const firstElement = map.entries().next().value;
console.log(firstElement); // [ 'key1', 'value1' ]
The Map
entries()
method returns an iterable of key-value pairs for all elements of the Map
. The next()
method returns the next element in the iterable sequence. Since it's the first time we're calling it on the iterable, it returns the first element in the sequence. We use the value
property of the element to get the key-value pair representing the first element of the Map
.
2. Array.from()
We can also use the Array.from()
method to get the first element of the Map
:
const map = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3'],
]);
const firstElement = Array.from(map)[0];
console.log(firstElement); // [ 'key1', 'value1' ]
Note
On a Map
with many elements, this method is significantly slower than the first, as it creates a new array from all the Map
elements. We conducted a performance comparison between the two methods on a Map
with 1 million elements, and these were the results on average:
Iterable next(): 0.015ms
Array from() 251.093ms
See also
- How to Create a Video Element in JavaScript (Easy Way)
- How to Get the Length of a Map in JavaScript
- 5 Ways to Get the First Character of a String in JavaScript
- How to Get the Window's Width on Resize in React
- How to get the difference between two arrays in JavaScript
- How to get the difference between two sets in JavaScript