How to Initialize a Set with Values in JavaScript

The Set object in JavaScript is a collection of unique values. A common task is to create a Set that is pre-populated with initial values. The most direct and idiomatic way to do this is by passing an iterable (like an array or another Set) directly to the Set constructor.

This guide will teach you how to initialize a Set with values from an array, a string, or another Set, leveraging the power of the Set constructor.

The Core Method: The Set Constructor

The new Set(iterable) constructor is the definitive tool for this job. It takes an optional iterable object as an argument, and all of the iterable's elements are added to the new Set.

A key feature of Set is that it only stores unique values. If the iterable you provide contains duplicates, they will be automatically discarded during initialization.

Initializing a Set from an Array

This is the most common use case. You have an array of values and want to create a Set from them, often to easily find the unique values.

For example, you have an array with duplicate values and want to create a Set containing only the unique items.

// Problem: How to create a Set with the unique values from this array?
const numbers = [1, 2, 2, 3, 4, 3];

Solution:

const numbers = [1, 2, 2, 3, 4, 3];

// Pass the array directly to the Set constructor.
const uniqueNumbers = new Set(numbers);

console.log(uniqueNumbers); // Output: Set(4) { 1, 2, 3, 4 }

You can also combine multiple arrays using the spread syntax (...):

const arr1 = [1, 2];
const arr2 = [2, 3];
const combinedSet = new Set([...arr1, ...arr2]);

console.log(combinedSet); // Output: Set(3) { 1, 2, 3 }

Initializing a Set from a String

A string is also an iterable in JavaScript. When you pass a string to the Set constructor, it will be treated as a sequence of characters, and the Set will be populated with the unique characters from the string.

Solution:

const myString = 'hello';

const uniqueChars = new Set(myString);

console.log(uniqueChars); // Output: Set(4) { 'h', 'e', 'l', 'o' }

note

This is a quick way to find all the unique characters that make up a string.

Initializing a Set from Another Set (Creating a Copy)

You can create a shallow copy of a Set by passing the original Set to the constructor.

Solution:

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

// Create a new Set from the original
const copyOfSet = new Set(originalSet);

copyOfSet.add(4); // Modify the copy

console.log(originalSet.size); // Output: 3 (The original is not affected)
console.log(copyOfSet.size);   // Output: 4

Practical Example: Getting Unique Values from an Array of Objects

A very common task is to get a list of unique values from a property in an array of objects. You can achieve this by first using .map() to create an array of just those values, and then passing that array to the Set constructor.

For example, you have an array of user objects and need to get a Set of all unique roles.

const users = [
  { name: 'Alice', role: 'admin' },
  { name: 'Bob', role: 'editor' },
  { name: 'Charlie', role: 'admin' },
];

Solution:

const users = [
  { name: 'Alice', role: 'admin' },
  { name: 'Bob', role: 'editor' },
  { name: 'Charlie', role: 'admin' },
];

// 1. Use .map() to create an array of just the roles -> ['admin', 'editor', 'admin']
// 2. Pass this new array to the Set constructor to get the unique roles.
const uniqueRoles = new Set(users.map(user => user.role));

console.log(uniqueRoles); // Output: Set(2) { 'admin', 'editor' }

Conclusion

Initializing a Set with values is a simple and powerful operation in JavaScript.

• The recommended best practice is to pass an iterable (like an Array, String, or another Set) directly to the new Set() constructor.
• The Set will automatically handle the deduplication of any values provided in the iterable.
• This is a highly efficient and declarative way to create Sets and to find the unique values within other collections.