4 Ways to Get the First Element of a Set in JavaScript

Sets in JavaScript provide a unique collection of values with no duplicates.

When working with Sets in JavaScript, efficiently accessing the first element is crucial. Let’s explore the various methods to do so.

Using Destructuring Assignment

Destructuring assignment allows for a concise method of obtaining the first element of a Set. By employing a simple syntax like const [first] = set, we can quickly access and utilize the initial element.

const set = new Set([1, 2, 3]);
const [first] = set;
console.log(first); // Output: 1

This method ensures a clean and readable way of retrieving the first Set element.

Bonus: Getting the Second Element of a Set

Extending this approach, we can adapt the destructuring assignment to access subsequent elements by introducing a comma , to denote positions.

const set = new Set([1, 2, 3]);
const [, second] = set;
console.log(second); // Output: 2

Using Spread Syntax

Spread syntax provides an alternative by converting the Set to an array and extracting the first element.

const set = new Set([1, 2, 3]);
const first = [...set][0];
console.log(first); // Output: 1

Insights:

• While effective, this method might be less efficient for larger Sets due to the array conversion process. O(n) task, where n is length of Set.

Using Set.values()

For a more structured approach, the Set.values() method proves useful. This involves a three-step process:

1. Use Set.values() to get an iterable of Set values.
2. Utilize next() to obtain an object with the first value.
3. Assign the value to a variable.

const set = new Set([1, 2, 3]);
const values = set.values();
const obj = values.next();
const first = obj.value;
console.log(first); // Output: 1

Insights:

• This method introduces more steps, impacting readability.

Using for…of Loop

A for…of loop offers a straightforward means of extracting the first element of a Set. This loop iterates over the Set, assigning the first value to a variable.

const set = new Set(['apple', 'banana', 'orange']);
let first;

for (const element of set) {
  first = element;
  break;
}

console.log(first); // Output: apple

Insights:

• While simple, this method lacks the directness of other approaches and involves explicit looping.

Practice Problem

Now, let’s solidify your understanding with a practice coding question.

You are given an array of student names. Create a JavaScript function named getFirstStudent that takes this array and returns the first student’s name.

function getFirstStudent(studentNames) {
  // > > > 👉 Write code here 👈 < < <
}

// Example Usage:
const students = ['Alice', 'Bob', 'Charlie', 'David'];
const firstStudent = getFirstStudent(students);
console.log(firstStudent);
// Expected Output: 👇
// Alice

// Solution uses simple array indexing to directly access the first element.
// For efficiency and clarity.

function getFirstStudent(studentNames) {
  let firstStudent;

  for (const student of studentNames) {
    firstStudent = student;
    break;
  }

  return firstStudent;
}

Conclusion:

So, you found multiple ways of retrieving first element of Set in Javascript? But remember, coding is not just about finding a solution; it’s about finding the right solution for the task at hand. Happy coding! 🚀