How to Get the First Element of a Map in JavaScript

Get the First Element of a Map in JavaScript #

To get the first element of a Map, use destructuring assignment, e.g. const [firstKey] = map.keys() and const [firstValue] = map.values(). The keys() and values() methods return an iterator object that contains the Map's keys and values.

Copied!
const map = new Map();

map.set('a', 1);
map.set('b', 2);

const [firstKey] = map.keys();
console.log(firstKey); // 👉️ a

const [firstValue] = map.values();
console.log(firstValue); // 👉️ 1

We called the keys() method on the Map to get an iterator that contains the keys of each element in the Map.

We used destructuring assignment to get the first key and assigned it to a variable.

Another way to get the first element of a Map is to convert the Map into an array and access the element at index 0.

Copied!
const map = new Map();

map.set('a', 1);
map.set('b', 2);

const first = [...map][0];

console.log(first); // 👉️ ['a', 1]

We used the spread syntax to convert the Map into an array and accessed the element at index 0.

This returns an array containing the key and value of the first element in the Map.

We can also get the first element of a Map by using some of the methods on the Map instance.

Copied!
const map = new Map();

map.set('a', 1);
map.set('b', 2);

const iterator = map.entries();

const firstIteration = iterator.next(); // {value: ['a', 1], done: false}

const first = firstIteration.value;

console.log(first); // 👉️ ['a', 1]

We got an iterator containing the elements of the Map and used the next() method to get an object containing the value of the first iteration.

Lastly, we accessed the value property on the object to get an array of the key and value of the first Map element.

Further Reading #

• How to get the Length of a Map in JavaScript
• How to Initialize a Map with Values in JavaScript
• How to convert Map Keys to an Array in JavaScript
• How to convert Map Values to an Array in JavaScript
• Check if Object is of type Map in JavaScript
• Check if a Key exists in a Map using JavaScript
• Check if a Value exists in a Map using JavaScript
• Convert a Map to an Array of Objects in JavaScript
• How to check if a Map is Empty in JavaScript
• How to create a shallow Copy of a Map in JavaScript