How to Get the First Element of a Set in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 1, 2024
3 min

banner

# Table of Contents

  1. Get the First Element of a Set in JavaScript
  2. Get the first element of a Set using spread syntax (...)
  3. Get the First Element of a Set using Set.values()
  4. Get the first element of a Set using for...of

# Get the First Element of a Set in JavaScript

Use destructuring assignment to get the first element of a Set, e.g. const [first] = set.

The destructuring assignment sets the variable to the first element of the Set.

index.js
const set = new Set([1, 2, 3]); const [first] = set; console.log(first); // ๐Ÿ‘‰๏ธ 1

get first element of set

The code for this article is available on GitHub

We used destructuring assignment to get the first element of the Set and then we assigned it to a variable.

An easy way to think about it is that we're assigning the Set element at position 1 to the variable named first.

# Getting the second element of a Set

We can get the second element of the Set in a similar way.

index.js
const set = new Set([1, 2, 3]); const [, second] = set; console.log(second); // ๐Ÿ‘‰๏ธ 2

get second element of set

We skipped the first element by adding a comma , to denote the place of the first element in the destructuring assignment.

# Get the first element of a Set using spread syntax (...)

We can also get the first element of a set using the spread syntax.

The spread syntax converts an array-like object to an array.

index.js
const set = new Set([1, 2, 3]); const first = [...set][0]; console.log(first); // ๐Ÿ‘‰๏ธ 1

get first element of set using spread syntax

The code for this article is available on GitHub

We can iterate over a Set, so we can also convert one to an array to use the index to access the element at position 0.

Converting the set to an array would be very inefficient and slow if you have thousands of elements in the Set.

A more long-winded way is to use the methods on the Set instance.

# Get the First Element of a Set using Set.values()

This is a three-step process:

  1. Use the Set.values() method to get an iterable of the values in the Set.
  2. Use the next() method to get an object containing the first value of the iterable.
  3. Assign the value to a variable.
index.js
const set = new Set([1, 2, 3]); const values = set.values(); // ๐Ÿ‘‰๏ธ iterator const obj = values.next() // ๐Ÿ‘‰๏ธ {value: 1, done: false} const first = obj.value; console.log(first); // ๐Ÿ‘‰๏ธ 1

get first element of set using set values

We called the values() method on the Set to get an iterable of the values in the Set.

We then called the next() method on the iterable to get an object containing the value of the first iteration.

Finally, we accessed the value property on the object to get the value of the first element in the Set.

The first 2 approaches are definitely more readable and intuitive. It's best to not leak the implementation details of Set objects in your code.

# Get the first element of a Set using for...of

You can also use a for...of loop to get the first element of a Set.

index.js
const set = new Set(['bobby', 'hadz', 'com']); let first; for (const element of set) { first = element; break; } console.log(first); // ๐Ÿ‘‰๏ธ bobby

get first element of set using for of

The code for this article is available on GitHub

We declared the first variable using the let keyword.

This is important because variables declared using const cannot be reassigned.

We used a for...of loop to iterate over the Set for a single iteration.

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

Once we assign the first value of the Set to a variable, we exit the for...of loop.

The break statement terminates the current loop or switch statement.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev