Arrays are an important part of the JavaScript ecosystem. They are an important data type which is used to store data. There are a number of operations that can be performed on arrays. One of the most common operations is getting all the unique elements of an array. In this article, we take a look at how to get all unique elements from an array in JavaScript. So, let’s get started.
The Set() object
The Set() object in JavaScript is used to store unique elements as its entries. In order to get all the unique elements of an array, we need to pass that array as the argument to Set() constructor. Consider the following code –
|
1 2 3 4 5 6 7 8 |
const names = ["John", "Michael", "Jeff", "John", "Phil", "Greg", "Michael", "Jason"]; const uniqueNames = new Set(names); console.log(uniqueNames); // Output in console: // Set(6) [ "John", "Michael", "Jeff", "Phil", "Greg", "Jason" ] |
Note that it is a Set() object, not an actual array. In order to convert it into an array, while there are many approaches, the most common ones are using Array.from method and spread operator. Let’s take a brief look at both of them –
Using Array.from() method
In our code from above, add the following line –
|
1 2 3 4 5 6 7 |
const uniqueNameArr = Array.from(uniqueNames); console.log(uniqueNamesArr); // Result in console: // Array(6) [ "John", "Michael", "Jeff", "Phil", "Greg", "Jason" ] |
Here, we are simply passing uniqueNames to Array.from() method. The result is an array with all the elements of the Set() object.
Using the spread operator
Spread operator is one of the newer features in JavaScript introduced in ES6. In order to convert a Set() object into an array, add the following lines to our previous code –
|
1 2 3 4 5 6 7 8 |
const uniqueNamesArr = [...uniqueNames]; console.log(uniqueNamesArr); // Output in console: // Array(6) [ "John", "Michael", "Jeff", "Phil", "Greg", "Jason" ] |
In the above code, we use the spread operator to get a new array containing the values of the original Set() object. Note that while the above example involved primitive values, it’s different for objects. Consider the following code –
|
1 2 3 4 5 6 7 8 9 |
const names = [{a:2}, {b:1}, {a:2}, {c:3}, {d:4}]; const uniqueNames = new Set(names); console.log(uniqueNames); // Result in console: // Set(5) [ {…}, {…}, {…}, {…}, {…} ] |
Here, despite the first and third items in the names array being essentially the same, the set contains 5 entries instead of the expected 4. This is because object and array data types are passed by reference.
The filter() method
Another way we can get all unique elements from an array in JavaScript is the filter() method. Filter method does exactly what its name suggests – iterates through the array and filters the array based on a certain logic defined in the provided function. Consider the following code –
|
1 2 3 4 5 6 7 8 |
const names = ["John", "Michael", "Jeff", "John", "Phil", "Greg", "Michael", "Jason"]; const uniqueNames = names.filter((item, index, names) => names.indexOf(item) === index); console.log(uniqueNames); // Result in console: // Array(6) [ "John", "Michael", "Jeff", "Phil", "Greg", "Jason" ] |
In the code above, we use the same array. Using the filter() method, we use the Array. indexOf() method to get the index of the current value and compare it with the current index. If both the values are equal, this means it’s the first iteration of the value and the condition is “true” and value is retained. otherwise, the condition is “false” and the value is rejected.
The forEach() method
Apart from the above methods, we can also use forEach() method in JavaScript to get all unique elements of an array in JavaScript. For this method to work, we need to initialize an empty array and then fill it up with unique elements from the original array. Consider the following code –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const names = ["John", "Michael", "Jeff", "John", "Phil", "Greg", "Michael", "Jason"]; const uniqueNames = []; names.forEach(item => { if (!uniqueNames.includes(item)) { uniqueNames.push(item); } }); console.log(uniqueNames); // Result in console: // Array(6) [ "John", "Michael", "Jeff", "Phil", "Greg", "Jason" ] |
The code is pretty self-explanatory. Here, we define an empty array uniqueNames and loop through the original array names to check whether the item has already been added to uniqueNames or not using the includes() method. Note that we use the push() method here. We can also use the spread operator as well like so –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const names = ["John", "Michael", "Jeff", "John", "Phil", "Greg", "Michael", "Jason"]; let uniqueNames = []; names.forEach(item => { if (!uniqueNames.includes(item)) { uniqueNames = [...uniqueNames, item]; } }); console.log(uniqueNames); // Result in console: // Array(6) [ "John", "Michael", "Jeff", "Phil", "Greg", "Jason" ] |
There are certain minor differences here. Note that we define uniqueNames using the let keyword instead of const since we are going to reassign its value during the loop.
Also, we can use the map() method interchangeably with the filter() method in this case. Note that map() and filter() methods have some differences among them but for our case, either can be used to loop through the names array.
Conclusion
So, that was it! In this article, we saw how we can get all the unique elements from an array in JavaScript. As always, this list is not exhaustive and there are more tools out there through which we can sort an array to get all its unique elements. But these are some of the most direct and efficient ways applicable to most use-cases.
Hope you were able to learn something new in this article. Do take a look at our blog if you would like to learn more about WordPress and Web Development. See you in the next article!
