Get all unique values in a javascript array (remove duplicates)

ByAnas Kiani

To get all unique values in a javascript array (remove duplicates) here are some ways as follows:

  • Set Object
  • Array.filter()
  • Array.reduce()
  • For loop

1) Set Object:

The set object is the short and most straightforward way to remove duplicate values. The code example to get all unique values in a javascript array (remove duplicates) is as follows:

const a = [1, 2, 3, 8, 2, 3, 10];
const b = [ ...new set(a)];
console.log(b); // [1, 2, 3, 8, 10]
Code Explanation

In the first step, I declared a const variable “a” that contains numbers with some duplicate values in an array. In the second step, a new const variable “b” is declared in which a set object method is applied to the constant variable “a”. This method will get all unique values in a javascript array (remove duplicates) that is assigned to constant variable “b”. In the last step, the const variable “b” that contains unique values is displayed in the console.

2) Array.filter():

Array.filter() method can be used to get all unique values in a javascript array (remove duplicates). It creates a new array for those elements that pass the applied condition in the callback function. The code example for removing duplicate values is given below:

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((value, index, self) => {
return self.indexOf(value) === index;
});
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]
Code Explanation

First of all, I declared the constant variable “array” which contains numbers and a few duplicates. In the second step, I declared another constant variable “uniqueArray” in which the array.filter method is applied. Inside the array.filter method a callback function is applied in which three parameters are passed first is value second is index & third is self.

Value is the current element that exists in it from the array, an index is the index of the current element & self is the array on which the filter method is applied. In the next step, the indexOf() method is used to check the first occurrence of the current value in the self array & then the condition is applied if an index of the current value is equal to the index parameter of the callback function. In this case, the condition returns true and the element is added to the unique array.

In the last step, the unique array is displayed in the console.

3) Array.reduce():

The array.reduce() method has a callback function that iterates through each element of an array and then creates a new array of unique elements. The code example for this method is as follows:

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]
Code Explanation

First of all, I declared a constant variable “array” which contains the numbers and some duplicates. In the second step, another constant variable is declared in which the array.reduce approach is used to remove duplicate values from an array. Inside arrray.reduce() a callback function is used in which two parameters are passed one is an accumulator and the second is currentValue.

The accumulator stores the unique value from each iteration & the currentValue is the current element existing in it from the array. In the next step, a condition is applied in which includes() method is used that checks whether the value is already present in the accumulator or not. If the current value is not present in the accumulator the condition evaluates true and in the next step, the current value is pushed into the accumulator. After that accumulator is returned in which the unique values are stored.

In the last step, the unique array is displayed in the console.

4) For loop:

We can get all unique values in a javascript array (remove duplicates) by using for loop method. The code example for this method is given below:

Let arr = [1, 2, 5, 2, 1, 8];
let x = [];
let len = arr.length; // Length of array will not be recomputed on every iteration of for loop
for (let i = 0; i < len; i++) {
if(x.indexOf(arr[i]) === -1){
x.push(arr[i]);
}
}
console.log(x);
Code Explanation

In the first step, I declared an array of numbers with some duplicates. After that, I declared a variable “x” which is an empty array. In the next step, I declared a variable “len” which is equal to the length of an array “arr” Then for loop is applied in which i is equal to zero and i is less than len, and the value of i is incremented on every iteration.

In the next step If statement is used in which the condition is applied that checks if an element is not present in the x array using the indexOf() method then the value is pushed to the “x” array. In the last step “x” array is displayed in the console.

Conclusion

We can get all unique values in a javascript array (remove duplicates) by different methods as explained above however the most straightforward method is the set object method. Everyone has his preferences you can use the method that suit you and fulfill your requirement.

Similar Posts