Skip to main content

How to Get the First Element of a Map in JavaScript

Unlike plain objects before ES2015, JavaScript Map objects preserve insertion order. This means that the concept of a "first" element is well-defined and reliable: it is the first key-value pair that was inserted into the Map.

This guide will teach you the modern and most efficient methods for getting the first key, the first value, or the first [key, value] pair from a Map. You will learn how to use iterators and destructuring, and understand why these methods are superior to converting the entire Map to an array.

The Core Concept: Map Order and Iterators​

The methods for accessing a Map's contents (.keys(), .values(), .entries()) do not return an array. They return an iterator. An iterator is an object that lets you step through a collection one element at a time. The key advantage of this is that you can get the first element without ever needing to process or create an array of all the other elements, making it highly performant.

How to Get the First [Key, Value] Pair (The Entry)​

Use Case: When you need both the key and the value of the first item in the Map.

The most direct and efficient way to do this is to get the entries iterator and ask for its first value.

The logic:

  1. Call map.entries() to get an iterator over the [key, value] pairs.
  2. Call .next() on the iterator. This returns an object with the shape { value: [key, value], done: false }.
  3. Access the .value property of this object to get the [key, value] pair.

Solution:

const myMap = new Map([
  ['name', 'Alice'],
  ['age', 30],
]);

// Get the first [key, value] pair
const firstEntry = myMap.entries().next().value;

console.log(firstEntry); // Output: ['name', 'Alice']

// You can then destructure it
const [firstKey, firstValue] = firstEntry;
console.log(firstKey);   // Output: name
console.log(firstValue); // Output: Alice

Output:

(2) ['name', 'Alice']
name
Alice

How to Get the First Key or Value Individually​

Use Case: When you only need the first key or the first value, but not both.

The most concise and readable way to do this is with destructuring assignment, which can pull the first value directly from an iterator.

This is the recommended best practice for getting a single first key or value.

const myMap = new Map([
  ['name', 'Alice'],
  ['age', 30],
]);

// Destructuring assignment on the keys() iterator
const [firstKey] = myMap.keys();
console.log(firstKey);   // Output: name

// Destructuring assignment on the values() iterator
const [firstValue] = myMap.values();
console.log(firstValue); // Output: Alice

Output:

name
Alice
note

This is highly efficient because destructuring only requests the first item from the iterator and does not process the rest of the Map.

Why You Should Avoid Converting the Whole Map to an Array​

A common but inefficient approach is to convert the entire Map to an array first.

The Inefficient Method:

const myMap = new Map([
  ['name', 'Alice'],
  ['age', 30],
]);

// ⛔️ This is inefficient for large Maps
const firstEntry = [...myMap][0];
console.log(firstEntry); // Output: ['name', 'Alice']
note

This method is not recommended because:

  • Performance: It creates a brand new array containing all the elements of the Map in memory. This is a waste of CPU and memory if you only need the first element, especially for very large Maps.
  • Verbosity: The iterator-based methods (.next() and destructuring) are often just as concise and more directly express your intent.

Conclusion​

For getting the first element of a Map, you should leverage the power of its built-in iterators for the most performant and idiomatic solution.

  • To get the first [key, value] pair, the most direct method is myMap.entries().next().value.
  • To get the first key, the best practice is const [firstKey] = myMap.keys();.
  • To get the first value, the best practice is const [firstValue] = myMap.values();.
  • Avoid converting the entire Map to an array ([...myMap]) just to access the first element, as this is inefficient.

Table of Contents