JavaScript

How to get all unique values and remove repeating values in a JavaScript array

Gathering massive quantities of data requires the need of extensive amounts of storage as well. While collecting data, there are many occasions when people run into recurring values. These values can occupy a deceptively large amount of storage in the system. Hence it is important to have a system that can filter out the data, remove all the recurring values, and keep all the unique values.

In this article, a similar problem will be tackled regarding the removal of recurring values from a JavaScript array.

How to remove recurring values from within an array?

There are numerous diverse methods in which a JavaScript array can be cleared of duplicates. In this section, we will shed some light on the many generally used methods to achieve this.

Using a function “indexOf()”

The “indexOf” is a function in JavaScript that makes use of two parameters and returns an integer. We will utilize the string as parameter number 1 that needs to be searched. Parameter number 2 is the substring that will be searched for inside parameter number 1. If the substring is found, the index number of where it was found is returned. Let’s have a look at how this concept is applied:

var array = ["repeat", "new1", "repeat1", "new2", "repeat", "repeat1"];
var newArray = [];


for(i=0; i < array.length; i++){
if(newArray.indexOf(array[i]) === -1) {
        newArray.push(array[i]);
    }
}

console.log(newArray);

In the code above, two arrays are declared. One contains all the data(array), and the other is an empty array(newArray). The array is looped through using a “for loop”. The “indexOf” function is used with the empty array as the first parameter and the data as the second parameter. This way the function will take a value from the data and try to find it among the(initially empty) array. If the value is not found, the data will be put into the empty array using the “push” keyword. This will happen for each of the data values inside the array. Once the loop terminates, the “newArray” will contain all the unique values of the original array. A sample is shown below:

Using Sets

Making use of sets is the easiest method to obtain the unique values from an array. A set is similar to an array except it only includes special different values. To get these unique values, the array needs to be converted into a set and then back into an array. Refer to the code shown below:

var array = ["repeat", "new1", "repeat1", "new2", "repeat", "repeat1"];

var uniqueArray = [...new Set(array)];

console.log(uniqueArray);

In the code above, an array is declared with various recurring values. The “new Set” function is used to remove duplicates and create a set using the array. This set is then stored into a variable “uniqueArray”. Since this variable is declared inside the “[ ]” brackets, it is converted back into an array. The execution of this code is shown below:

Using these methods, any JavaScript array can be sorted to clear duplicate values from it and leave behind an array with only the unique values.

Conclusion

An array can be cleaned of recurring values using two common methods. In method 1 we will change the array and make it a Set and afterward change it back into an array. The other is to utilize the indexOf function. This function will assist in comparing these 2 strings. This article has demonstrated and explained the working of both these methods in detail.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.