How to Get the First Element of a Map in JavaScript

# Get the First Element of a Map in JavaScript

Use destructuring assignment to get the first element of a Map, 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('site', 'bobbyhadz.com');
map.set('id', 1);

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

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

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

Copied!
const map = new Map();

map.set('site', 'bobbyhadz.com');
map.set('id', 1);

// 👇️ [Map Iterator] { 'site', 'id' }
console.log(map.keys());

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

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

You can use the Map.values() method to get an iterator of the Map's values.

Copied!
const map = new Map();

map.set('site', 'bobbyhadz.com');
map.set('id', 1);

// 👇️ [Map Iterator] { 'bobbyhadz.com', 1 }
console.log(map.values());

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

The last step is to use the destructuring assignment to assign the first Map value to a variable.

An alternative approach is to convert the Map to an array.

# Get the First Element of a Map using spread syntax (...)

This is a two-step process:

1. Use the spread syntax (...) to convert the Map object to an array.
2. Access the array at index 0 to get the first element of the Map.

Copied!
const map = new Map();

map.set('site', 'bobbyhadz.com');
map.set('id', 1);

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

console.log(first); // 👉️ [ 'site', 'bobbyhadz.com' ]

We used the spread syntax (...) to convert the Map to an array and then we accessed the array element at index 0.

Copied!
const map = new Map();

map.set('site', 'bobbyhadz.com');
map.set('id', 1);

// 👇️ [ [ 'site', 'bobbyhadz.com' ], [ 'id', 1 ] ]
console.log([...map]);

// 👇️ [ 'site', 'bobbyhadz.com' ]
console.log([...map][0]);

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

Alternatively, we can use some of the methods on the Map object.

# Get the First Element of a Map using Map.entries()

This is a three-step process:

1. Use the Map.entries() method to get an iterable of the Map's key-value pairs.
2. Use the next() method to get the first element of the iterable.
3. Assign the value to a variable.

Copied!
const map = new Map();

map.set('site', 'bobbyhadz.com');
map.set('id', 1);

const first = map.entries().next().value;

// 👇️ [ 'site', 'bobbyhadz.com' ]
console.log(first);

console.log(first[0]); // 👉️ site

console.log(first[1]); // 👉️ bobbyhadz

We used the Map.entries() method to get an iterable of the Map's key-value pairs.

Copied!
const map = new Map();

map.set('site', 'bobbyhadz.com');
map.set('id', 1);

const iterable = map.entries();

// 👇️ [Map Entries] { [ 'site', 'bobbyhadz.com' ], [ 'id', 1 ] }
console.log(iterable);

// 👇️ { value: [ 'site', 'bobbyhadz.com' ], done: false }
const firstIteration = iterable.next();
console.log(firstIteration);

const first = firstIteration.value;
console.log(first); // 👉️ [ 'site', 'bobbyhadz.com' ]

We 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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to Get the First Element of a Set in JavaScript
• Get first letter of each Word in a String in JavaScript
• Get the first N characters of a String in JavaScript
• Get the first N elements of an Array in JavaScript
• Get the First Word of a String in JavaScript