Remove Duplicate Values From Array In JavaScript

/ JavaScript / By
Remove Duplicate Values

We all know how important an array is to JavaScript. It helps in grouping similar or different types of data together. We can create an array of objects or store it as the value of an object. It is used to send data in JSON and even in APIs. Since it has so many uses, it is important to handle it well and if it has duplicate data it doesn’t perform well.

Suppose you are consuming an API of random jokes and you get an array with the same jokes two or three times, this makes a bad impression on you and you may stop using that API. The same things can happen with your application too, but don’t worry you can solve this problem easily.

This tutorial will cover the different methods to remove duplicates from an Array, including using a for loop.

Since JavaScript arrays are different from arrays in other programming languages, make sure to read our tutorial on JavaScript arrays to understand the difference between an ordinary array and a JavaScript array before getting started.

Methods to Remove Duplicate Values From Array

Below are several ways to remove duplicates from a JavaScript array.

1. indexOf() Method

In JS, 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 an array with unique values only. 

We can write code to create a new array and then use a for loop or forEach to iterate over all the elements in the original 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' ]

If you want to learn more about a for loop, click here, and for forEach(), we have a dedicated guide, Node.js forEach() method, which is exactly the same in JavaScript.

2. 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 can create a new empty array and then loop through the old array, if the value does not exist 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' ]

3. 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' ]

4. 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. We hope this tutorial helps you to remove duplicate values from an array in JavaScript.

References

Review Your Cart
0
Add Coupon Code
Subtotal
Checkout