Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Convert Array to Set in JavaScript
This tutorial will teach you how to eliminate duplicate values from an array of items in Javascript by converting an array to a set.
When storing distinct values from a collection of data in javascript, we can utilise the Set data structure to get rid of duplicate values. When we wish to eliminate duplicates from our data or take advantage of the special features offered by Sets data structure, converting an array to a Set can be helpful.
Let's look at some of the examples and methods to understand the concept better ?
Example 1 - Using the Set Constructor
A collection of distinct values are obtained from an iterable object, or an object that can be looped over, such as an array, via the Set constructor.
In this example we will ?
create an array called an array with some duplicate values
create a new Set object named set by passing the array as an argument to the Set constructor
the Set automatically removes duplicate values leaving only the unique elements
Filename - index.html
<html>
<head>
<title>Convert Array to Set - Using Set Constructor</title>
<script>
const array = [1, 2, 3, 3, 4, 5];
const set = new Set(array);
console.log(set); // Output: Set {1, 2, 3, 4, 5}
</script>
</head>
<body>
<h1>Convert Array to Set - Using Set Constructor</h1>
</body>
</html>
Output
The result will like the image below.
Example 2 - Using the Spread Operator
To get rid of duplicates we may also utilise the spread operator (...) and the Set constructor. An iterable object or one that can be looped over such as an array can be expanded into individual elements using the spread operator and these elements can then be passed to the set constructor.
In this example we will ?
use the spread operator ... to spread the elements of the array into individual values.
We will then pass these values as arguments to the Set constructor, creating a new Set object set.
Filename - index.html
<html>
<head>
<title>Convert Array to Set - Using Spread Operator</title>
<script>
const array = [1, 2, 3, 3, 4, 5];
const set = new Set([...array]);
console.log(set); // Output: Set {1, 2, 3, 4, 5}
</script>
</head>
<body>
<h1>Convert Array to Set - Using Spread Operator</h1>
</body>
</html>
Output
The result will like the image below.
Example 3 - Using Array.from()
We can generate a new instance of an array from an existing array using the Array.from() function, and we can then send these members to the Set constructor
In this example we will ?
use Array.from() to create a new array from the array and then pass the resulting array as an argument to the Set constructor creating a new Set object set
Filename - index.html
<html>
<head>
<title>Convert Array to Set - Using Array.from()</title>
<script>
const array = [1, 2, 3, 3, 4, 5];
const set = new Set(Array.from(array));
console.log(set); // Output: Set {1, 2, 3, 4, 5}
</script>
</head>
<body>
<h1>Convert Array to Set - Using Array.from()</h1>
</body>
</html>
Output
The result will like the image below.
Conclusion
In conclusion, you can create a Set from an array in JavaScript by using the Set constructor, the spread operator (...), or the Array.from() function. We can quickly transform an array into a Set using each method so that we may interact with individual elements. We studied various techniques for converting an array to a set in javascript and examined examples to further our understanding.
634 Views
