Remove Duplicate Values From Array In JavaScript

An Array in JavaScript can contain multiple values. These values can occur multiple times and end up increasing unnecessary space.

This tutorial will cover the different methods to remove duplicate values from an Array in JavaScript.

Before going further, ensure that you understand an array in JavaScript because it differs from the array in other programming languages.

We have a separate tutorial JavaScript Array in which we have covered the Array in JavaScript and the difference between an ordinary Array and the JavaScript Array.

Method to Remove Duplicate Values From Array

Below are different methods to remove duplicate values from an array.

indexOf() Method

indexof() will give the index number of a value if it is present in an array and if not, then it returns -1. We can use this property to create a unique array.

We have to create a new empty array and then loop through the old array containing duplicated values and only if the indexof() of a value is -1 then push it to the new array otherwise move on to the next iteration.

Example 1: For loop with indexOf() Method

let arr = ['John', 'Paul', 'George', 'John', 'Ringo', 'George'];

let uniqueArr = [];

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

console.log(uniqueArr);

Output:

[ 'John', 'Paul', 'George', 'Ringo' ]

Example 2: forEach with indexOf() Method

let arr = ['John', 'Paul', 'George', 'John', 'Ringo', 'George'];

let uniqueArr = [];

arr.forEach(function (element) {
    if (uniqueArr.indexOf(element) === -1) {
        uniqueArr.push(element);
    }
});

console.log(uniqueArr);

Output:

[ 'John', 'Paul', 'George', 'Ringo' ]

includes() Method

This method checks whether a particular value exists in an array or not. If it exists it returns true, if not then it returns false.

We have to create a new empty array and then loop through the old array, if the value does not exists in the new array then push it, if it exists then move on to the next iteration. This will gradually make us get a new array with non-duplicate values.

Example 1: For loop with includes() Method

let arr = ['John', 'Paul', 'George', 'John', 'Ringo', 'George'];

let uniqueArr = [];

for (let i = 0; i < arr.length; i++) {
    if (uniqueArr.includes(arr[i]) === false) {
        uniqueArr.push(arr[i]);
    }
}

console.log(uniqueArr);

Output:

[ 'John', 'Paul', 'George', 'Ringo' ]

Example 2: forEach with includes() Method

let arr = ['John', 'Paul', 'George', 'John', 'Ringo', 'George'];

let uniqueArr = [];

arr.forEach(function (element) {
    if (uniqueArr.includes(element) === false) {
        uniqueArr.push(element);
    }
});

console.log(uniqueArr);

Output:

[ 'John', 'Paul', 'George', 'Ringo' ]

Set Class in Javascript

We can transfer an array into a set using the Set class. Transforming into a set will automatically remove all duplicated elements.

The array is passed as an argument to the instance of the Set class, which returns a set containing only unique elements. Then we can transform the set into an array to get the array with no duplicated values.

Example:

let arr = ['John', 'Paul', 'George', 'John', 'Ringo', 'George'];

const setArr = new Set(arr);

let uniqueArr = [...setArr];

console.log(uniqueArr);

Output:

[ 'John', 'Paul', 'George', 'Ringo' ]

filter() Method

This method is used to filter the array on some condition, as an argument to this method we can pass a callback that returns the values if its index value is the same as indexof().

Example:

let arr = ['John', 'Paul', 'George', 'John', 'Ringo', 'George'];

let uniqueArr = arr.filter((element, index) => {
    return arr.indexOf(element) === index;
});

console.log(uniqueArr);

Output:

[ 'John', 'Paul', 'George', 'Ringo' ]

Summary

An Array can contain multiple types of values together and sometimes these values present more than once which creates redundancy in the array. To remove this duplicated value we have many methods in JavaScript such as converting an array into a set or using the include() method, the indexof() method, or the filter() methods with different combinations of loops. Hope this tutorial helps you to remove duplicate values from an array in JavaScript.