Skip to main content

How to Get the First Element of a Set in JavaScript

Unlike arrays, JavaScript Set objects do not have an index-based access method like mySet[0]. This can be confusing when you need to retrieve the first element from a Set. However, because Sets are ordered iterables, you can easily and reliably get the first element using modern JavaScript syntax.

This guide will teach you the two best practices for this task: the concise destructuring assignment and the flexible spread syntax.

The Core Concept: Sets are Ordered Iterables​

The most important thing to understand is that a Set maintains the insertion order of its elements. The "first" element is always the one that was added to the Set first. Because Sets are also iterable, we can use syntax designed for iterables (like arrays) to extract this first element.

This is the most concise, readable, and idiomatic way to get the first element from a Set.

The logic: destructuring assignment is a syntax that allows you to "unpack" values from arrays or properties from objects into distinct variables. Since a Set is an iterable, we can use array destructuring to pull out its first element.

For example, we have a Set and we want to get the first value that was added to it.

// Problem: How to get the number 1 from this Set?
const mySet = new Set([1, 2, 3]);

Solution:

const mySet = new Set([1, 2, 3]);

// Use array destructuring to get the first element.
const [firstElement] = mySet;

console.log(firstElement); // Output: 1

This is the recommended best practice for its simplicity and clarity. You can also get subsequent elements:

const [, secondElement] = mySet;
console.log(secondElement); // Output: 2

An Alternative Method: Spread Syntax or Array.from()​

Another excellent and highly readable approach is to first convert the Set into an array, and then access the element at index 0.

The logic:

  1. Convert to Array: Use either the spread syntax ([...mySet]) or Array.from(mySet) to create a new array from the Set's elements.
  2. Access by Index: Get the first element of the new array using standard bracket notation ([0]).

Solution:

const mySet = new Set(['a', 'b', 'c']);

// Convert the Set to an array and get the first element.
const firstElement = [...mySet][0];

console.log(firstElement);      // Output: "a"

// The Array.from() method works identically:
const firstElementFrom = Array.from(mySet)[0];
console.log(firstElementFrom);  // Output: "a"
note

This method is slightly more explicit about the array conversion step and is also a very common and valid pattern.

A Note on Verbose Alternatives​

You might see older or more "manual" methods for this task, such as using the iterator protocol directly (mySet.values().next().value) or using a for...of loop with a break.

// ⛔️ Overly verbose for this task
let firstElement;
for (const element of mySet) {
  firstElement = element;
  break; // Stop after the first iteration
}
note

While these methods work and are good for understanding how iterators function, they are unnecessarily verbose for the simple task of getting the first element. The destructuring and spread syntax approaches are superior for this specific use case.

Conclusion​

Getting the first element of a Set is a simple task with clear, modern solutions.

  • The most concise and recommended method is destructuring assignment: const [first] = mySet;
  • An excellent and equally readable alternative is to convert the Set to an array and take the first element: const first = [...mySet][0];

By leveraging the iterable nature of Sets, you can easily access their elements in a predictable order.

Table of Contents