How to Iterate over Set in Javascript

Set, a Javascript data structure, is a collection of unique values, providing a powerful tool for scenarios where distinct elements matter. But how do you iterate on a Javascript Set? In this blogpost, you will explore code samples to iterate set in Javascript, common errors, and a fun coding problem to polish your skills.

Iteration Methods

Method 1: Using forEach() to iterate JS set

The forEach() method executes a provided function once for each element in the Set.

• Pro: Concise
• Con: Cannot break out of the loop, in between.

const mySet = new Set([1, 2, 3, 4]);
  
mySet.forEach(element => {
  console.log(element);
});

Method 2: Using for...of Loop

Classic for loop over Set elements:

const mySet = new Set(['apple', 'orange', 'banana']);
  
for (const element of mySet) {
  console.log(element);
}

Method 3: Using Spread Operator

The spread operator allows you to convert a Set to an array, enabling array methods for iteration.

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

setArray.forEach(element => {
  console.log(element);
});

Method 4: Using Array.from()

The Array.from() method creates a new, shallow-copied array from an iterable object like a Set.

const mySet = new Set([10, 20, 30]);
const setArray = Array.from(mySet);

setArray.forEach(element => {
  console.log(element);
});

Method 5: Iterating with Set Entries

The entries() method returns an iterable of Set entries, allowing you to destructure key-value pairs.

const mySet = new Set(['red', 'green', 'blue']);
  
for (const [index, color] of mySet.entries()) {
  console.log(`Color at index ${index}: ${color}`);
}

Common Errors:

Undefined Set

If the Set is not initialized (undefined), using forEach() will result in an error. Ensure proper initialization.

let mySet; // Set not initialized
  
try {
  mySet.forEach(element => {
      console.log(element);
  });
} catch (error) {
  console.error("Error:", error.message);
}

Function Constraints

Unlike other loops, the break statement is not available in functions passed to Set.forEach(). Be cautious with control flow statements.

const mySet = new Set([10, 20, 30]);
  
// Error: The 'break' statement is not available in the function passed to Set.forEach()
mySet.forEach(element => {
  if (element === 20) {
      break;
      // ⚠ SyntaxError: Illegal break statement
  }
  console.log(element);
});

🧪Practice Coding Problem: Set Explorer

In the spirit of Test Driven Development ( 😁), lets test our understanding by solving a problem.

Write a function setExplorer(set) that takes a Set and returns an array containing the square of each element in the Set.

Problem (JavaScript)

/**
* Explore the elements of a Set and return an array with the square of each element.
*
* @param {Set} set - The Set to explore.
* @returns {Array} - An array containing the square of each element.
*/
function setExplorer(set) {
  // > > > 👉 Write code here 👈 < < <
}

// Driver code
const myNumberSet = new Set([2, 4, 6, 8]);
console.log(setExplorer(myNumberSet));
// Expected Output: [4, 16, 36, 64]

Please attempt before seeing the Answer:

function setExplorer(set) {
  // Using Array.from() to create an array
  // and map to square each element
  return Array.from(set, element => element * element);
}

May your Sets are always iterable now! 🚀