How to Convert an Array to a Set in JavaScript

Convert an Array to a Set in JavaScript

Converting an array to a Set in JavaScript is a handy trick, especially when you want to remove duplicate values and work with unique data. A Set is a built-in object that stores unique values of any type—whether primitive or object references. This means if your array contains repeated elements like ["apple", "banana", "apple"], converting it to a Set will automatically remove the duplicates.

In this tutorial, we'll cover beginner-friendly ways to convert an array to a Set, explore how this impacts data, and see some real-world applications like deduplication or checking uniqueness.

Method 1: Using the Set Constructor

This is the most direct and modern way. JavaScript provides a built-in Set constructor that takes an iterable—like an array—as input. It filters out duplicate values automatically.

const fruits = ["apple", "banana", "apple", "cherry", "banana"];
const uniqueFruits = new Set(fruits);
console.log(uniqueFruits);

Set(3) {"apple", "banana", "cherry"}

Method 2: Convert Set Back to Array Using [...set] or Array.from()

While Set is great for uniqueness, sometimes you still want an array for easy looping or manipulation. You can convert a Set back to an array using either the spread operator [...set] or Array.from().

const items = ["apple", "banana", "apple", "cherry"];
const uniqueSet = new Set(items);

const uniqueArray1 = [...uniqueSet]; // using spread
const uniqueArray2 = Array.from(uniqueSet); // using Array.from()

console.log(uniqueArray1);
console.log(uniqueArray2);

["apple", "banana", "cherry"]
["apple", "banana", "cherry"]

Method 3: Convert and Remove Duplicates in One Step

Want to convert and remove duplicates in one go? You can wrap everything in a one-liner using the Set constructor and spread operator. This is great for inline transformations, especially in function calls or quick filtering tasks.

const colors = ["red", "blue", "red", "green"];
const uniqueColors = [...new Set(colors)];
console.log(uniqueColors);

["red", "blue", "green"]

Why Convert Arrays to Sets?

• Remove Duplicates: Sets are ideal for deduplication.
• Check Uniqueness: Quickly test if a list contains repeated values.
• Mathematical Operations: Sets support intersection, union, and difference logic easily.
• Improve Performance: Searching in a Set is faster than an array in large datasets.

Bonus Tip: Use Sets in Functions

Let’s say you want to write a function that takes an array and returns a list of unique values. Combining the Set and spread operator makes this elegant and readable:

function getUnique(arr) {
  return [...new Set(arr)];
}

const result = getUnique(["apple", "apple", "banana", "banana", "cherry"]);
console.log(result);

["apple", "banana", "cherry"]

Final Thoughts

Converting arrays to Sets is one of those simple tricks that can make your code cleaner, more readable, and more powerful. Whether you’re deduplicating user input, cleaning up a list of values, or simply ensuring uniqueness, using Set offers a modern and efficient solution.

And remember: when in doubt, wrap it in a function. It makes your logic reusable and your code more expressive. Whether you're building an app for recipes, playlists, or product listings, removing duplicates has never been easier.