remove duplicates from array javascript

How to Remove Duplicates from Array in JavaScript? 5 Ways

by

How to remove duplicates from an array in JavaScript? Read on to discover the solutions.

We cannot deny the fact that sometimes, we accidentally put the same value twice from an array in JavaScript, but how do we remove it?

Don’t worry because there are special tools in JavaScript that can help us fix this problem and get the result we want.

Well, say goodbye to duplicates as this article shows you the different methods or ways JavaScript removes duplicates from an array.

What is Arrays in JavaScript?

Arrays in JavaScript are ordered collections of values, indexed by numbers.

They are incredibly versatile and can store various data types, including numbers, strings, objects, and even other arrays.

Here’s an of how arrays work in JavaScript:

const subjects = ['Math', 'English', 'Science', 'Programming', 'Sogtware Engineering'];

console.log(subjects[3]); 
console.log(subjects.length);

Arrays are zero-indexed, meaning the first element is at index 0, the second at 1, and so on.

In our given example, we have an array called subjects containing five elements.

Here’s the output:

Programming
5

Now that we’ve got the basics of arrays down, let’s take a closer look at different ways to remove duplicates from array in JavaScript.

Different Ways on How to Remove Duplicates from Array in JavaScript?

Here are some common solutions to remove duplicates from an array in JS:

Solution 1: Use the Set object and the spread operator

One way to remove duplicates from an array in JS is to use the Set object and the spread operator ….

For example:

const subjects = ['Math', 'English', 'Math', 'Programming', 'Software Engineering','English'];
let newArray = [...new Set(subjects)]; ✅
console.log(newArray);

Output:

[ 'Math', 'English', 'Programming', 'Software Engineering' ]

Solution 2: Use the filter method

Another way to remove duplicates from an array in JS is to use the filter method.

For example:

const subjects = ['Programming', 'English', 'Math', 'Programming', 'Software Engineering','Math'];
let newArray = subjects.filter((item, index) => subjects.indexOf(item) === index); ✅
console.log(newArray);

Output:

[ 'Programming', 'English', 'Math', 'Software Engineering' ]

Solution 3: Use the reduce method

You can also use the reduce method to remove duplicates from an array.

const subjects = ['Software Engineering', 'Programming', 'Math', 'Programming', 'Software Engineering','Math'];
let newArray = subjects.reduce((accumulator, currentValue) => { ✅
    if (accumulator.indexOf(currentValue) === -1) {
        accumulator.push(currentValue);
    }
    return accumulator;
}, []);

console.log(newArray);

Output:

[ 'Software Engineering', 'Programming', 'Math' ]

Solution 4: Use the map and filter method

You can also use map and filter methods together to remove duplicates from an array.

For example:


let grades = [81 ,85 ,90 ,85 ,81 ,90 ,95];
let map = new Map();
grades.map((i) => { ✅
    if(!map.has(i)) map.set(i,true);
});
let newArray = [...map.keys()];
console.log(newArray);

Output:

[ 81, 85, 90, 95 ]

Solution 5: forEach loop and a Set

Aside from the four (4) solutions we mentioned above, you can also use a forEach loop and a Set object to keep track of the unique values in the original array.

For example:


let grades = [90 ,87 ,95 ,87 ,90 ,90 ,95];

let set = new Set();
grades.forEach((i) => { ✅
    set.add(i);
});
let newArray = [...set];

console.log(newArray);

Output:

[ 90, 87, 95 ]

What is the most efficient way to remove duplicates from an array in JavaScript?

One of the most efficient ways to remove duplicates from an array in JavaScript is to use the Set object.

A Set is a collection of unique values, so any duplicates are automatically removed when you create a new Set from an array.

For example:

let samplearray = [10, 20, 30, 30, 40, 40, 50];
let newArray = [...new Set(samplearray)]; ✅
console.log(newArray);

As what you have noticed in our given example, we create a new Set object from the original array and then use the spread operator … to convert the Set back into an array.

This method is both easy to use and efficient for removing duplicates from an array in JavaScript.

Here’s the output:

[ 10, 20, 30, 40, 50 ]

Conclusion

In conclusion, this article discusses the several ways to remove duplicates from an array in JavaScript.

And some of the common solutions include using the Set object and the spread operator, the filter method, the reduce method, the map and filter method, and the forEach loop and a Set.

Each of these methods has its own advantages and can be used depending on the specific needs of your code.

One of the most efficient ways to remove duplicates from an array in JavaScript is to use the Set object.

We hope this article has provided you with enough information to help you understand on how to remove duplicates from array JavaScript

If you want to dive into more JavaScript topics, check out the following articles:

Thank you for reading Itsourcecoders 😊.

Leave a Comment