Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert Array to Set in JavaScript?
This tutorial will teach you how to eliminate duplicate values from an array by converting it to a Set in JavaScript.
Sets are collections that store only unique values. When you need to remove duplicates from an array or leverage the unique properties of Sets, converting an array to a Set is the most efficient approach.
Using the Set Constructor (Recommended)
The Set constructor accepts any iterable object, including arrays, and automatically removes duplicate values.
<html>
<head>
<title>Convert Array to Set - Using Set Constructor</title>
</head>
<body>
<script>
const array = [1, 2, 3, 3, 4, 5, 1];
const set = new Set(array);
console.log("Original array:", array);
console.log("Converted set:", set);
console.log("Set size:", set.size);
</script>
</body>
</html>
Original array: [1, 2, 3, 3, 4, 5, 1]
Converted set: Set(5) {1, 2, 3, 4, 5}
Set size: 5
Using the Spread Operator
The spread operator (...) can expand array elements, which are then passed to the Set constructor. This method is functionally identical to the direct approach but uses different syntax.
<html>
<head>
<title>Convert Array to Set - Using Spread Operator</title>
</head>
<body>
<script>
const array = ["apple", "banana", "apple", "orange", "banana"];
const set = new Set([...array]);
console.log("Original array:", array);
console.log("Converted set:", set);
</script>
</body>
</html>
Original array: ["apple", "banana", "apple", "orange", "banana"]
Converted set: Set(3) {"apple", "banana", "orange"}
Using Array.from()
While Array.from() creates a new array from an existing one, it's unnecessary when converting to a Set since the Set constructor already handles arrays directly.
<html>
<head>
<title>Convert Array to Set - Using Array.from()</title>
</head>
<body>
<script>
const array = [true, false, true, 1, 0, 1];
const set = new Set(Array.from(array));
console.log("Original array:", array);
console.log("Converted set:", set);
</script>
</body>
</html>
Original array: [true, false, true, 1, 0, 1]
Converted set: Set(4) {true, false, 1, 0}
Converting Back to Array
You can convert a Set back to an array using the spread operator or Array.from():
<html>
<head>
<title>Set Back to Array</title>
</head>
<body>
<script>
const array = [1, 2, 2, 3, 3, 3];
const set = new Set(array);
// Convert back to array
const uniqueArray = [...set];
console.log("Original:", array);
console.log("Unique array:", uniqueArray);
</script>
</body>
</html>
Original: [1, 2, 2, 3, 3, 3] Unique array: [1, 2, 3]
Comparison
| Method | Syntax | Performance | Readability |
|---|---|---|---|
| Set Constructor | new Set(array) |
Best | Excellent |
| Spread Operator | new Set([...array]) |
Good | Good |
| Array.from() | new Set(Array.from(array)) |
Slower | Less clear |
Conclusion
Use new Set(array) as the standard method to convert arrays to Sets. This approach is the most efficient and readable way to eliminate duplicates from arrays in JavaScript.
879 Views
