How to Remove Duplicates Using JavaScript Array?

Duplicate data can be a common issue when working with large datasets. In JavaScript, it is important to remove duplicates to ensure that you are working with accurate and clean data. There are several ways to remove duplicates using JavaScript arrays, and in this blog, we will explore five different methods to achieve this. These methods include using the filter(), set(), forEach(), reduce(), and indexOf() methods.

Before we dive into the specific methods, let’s first discuss what an array is in JavaScript. An array is a special object that can hold multiple values in a single variable. Arrays are represented by square brackets [], and commas separate the values within the brackets. For example, the following code creates an array of numbers:

let numbers = [1, 2, 3, 4, 5];Code language: JavaScript (javascript)

Now that we have a basic understanding of arrays let’s move on to the methods we can use to remove duplicates from them.

Remove Duplicates with the help of JavaScript array methods:

There are several ways to remove duplicates from an array using JavaScript methods. Some of these methods include:

Using the filter() method
Using the set() method
Using the forEach() method
Using the reduce() method
Using the indexOf() method

In the following sections, we will go over each of these methods in detail and see how they can remove duplicates from an array.

With the Use of filter() Method

The filter() Method is a higher-order function that takes in a callback function and returns a new array with elements that pass the test implemented by the callback function. In the case of removing duplicates, we can use the filter() Method to create a new array with unique values.

Here is the syntax for the filter() Method:

let newArray = oldArray.filter(function(value, index, array) {
  // return true if value should be included in newArray
  // return false if value should be excluded from newArray
});Code language: JavaScript (javascript)

The callback function will be called for each element in the array, and the element will be included in the new array if the callback function returns true for that element.

Here is an example of using the filter() Method to remove duplicates from an array:

let numbers = [1, 2, 3, 3, 4, 5, 5];

let uniqueNumbers = numbers.filter(function(value, index, array) {
  return array.indexOf(value) === index;
});

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]Code language: JavaScript (javascript)

In this example, we have an array of numbers with some duplicates. We use the filter() Method to create a new array called “uniqueNumbers” that only includes unique values. The callback function uses the indexOf() Method to check if the current value is the first occurrence in the array. If it is, the value is included in the new array; otherwise, it is excluded.

As a result, the “uniqueNumbers” array only contains the unique values from the original array.

With the Use of Set() Method

Another method for removing duplicates from an array is to use the Set object. A Set is a collection of unique values that do not allow for duplicates. We can use this to our advantage by converting the array to a Set and then back to an array.

Here is the syntax for converting an array to a Set:

let set = new Set(array);Code language: JavaScript (javascript)

And here is the syntax for converting a Set back to an array:

let array = [...set];Code language: JavaScript (javascript)

Here is an example of using the Set object to remove duplicates from an array:

let numbers = [1, 2, 3, 3, 4, 5, 5];

let uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]Code language: JavaScript (javascript)

In this example, we first convert the “numbers” array to a Set object using the new Set() constructor. Then we use the spread operator (…) to convert the Set back to an array. This new array will only contain unique values because the Set object does not allow for duplicates.

As a result, the “uniqueNumbers” array only contains the unique values from the original array.

With the Use of forEach() Method

The forEach() Method is a higher-order function that executes a provided function once for each array element. We can use the forEach() method in conjunction with an object or Set to remove duplicates from an array.

Here is the syntax for the forEach() Method:

array.forEach(function(value, index, array) {
  // code to be executed for each element
});Code language: JavaScript (javascript)

Here is an example of using the forEach() Method to remove duplicates from an array:

let numbers = [1, 2, 3, 3, 4, 5, 5];

let uniqueNumbers = [];
let objects = {};

numbers.forEach(function(value) {
  if (!objects[value]) {
    uniqueNumbers.push(value);
    objects[value] = true;
  }
});

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]Code language: JavaScript (javascript)

In this example, we create an empty array called “uniqueNumbers” and an empty object called “objects”. We use the forEach() Method to iterate over the “numbers” array, and we check if it exists in the “objects” object for each value. If it does not, we add it to the “uniqueNumbers” array and set its value to true in the “objects” object.

This way, we can ensure that we only include unique values in the “uniqueNumbers” array.

As a result, the “uniqueNumbers” array only contains the unique values from the original array.

With the Use of reduce() Method

The reduce() Method is a higher-order function that executes a provided function for each array value (from left to right) and reduces the array to a single value. We can use the reduce() Method in conjunction with an object or Set to remove duplicates from an array.

Here is the syntax for the reduce() Method:

let total = array.reduce(function(previousValue, currentValue, currentIndex, array) {
  // code to be executed for each element
  // returns the accumulated value
}, initialValue);Code language: JavaScript (javascript)

Here is an example of using the reduce() Method to remove duplicates from an array:

let numbers = [1, 2, 3, 3, 4, 5, 5];

let uniqueNumbers = numbers.reduce(function(acc, currentValue) {
  if (acc.indexOf(currentValue) === -1) {
    acc.push(currentValue);
  }
  return acc;
}, []);

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]Code language: JavaScript (javascript)

In this example, we use the reduce() Method to iterate over the “numbers” array and create a new array called “uniqueNumbers” that only includes unique values. The callback function uses the indexOf() Method to check if the current value exists in the accumulator (which starts as an empty array). If it does not, the value is added to the accumulator.

As a result, the “uniqueNumbers” array only contains the unique values from the original array.

With the Use of indexOf() Method

The indexOf() Method is a method that returns the first index at which a given element can be found in an array or -1 if it is not present. We can use the indexOf() method with an if statement to remove duplicates from an array.

Here is the syntax for the indexOf() Method:

let index = array.indexOf(element);Code language: JavaScript (javascript)

Here is an example of using the indexOf() Method to remove duplicates from an array:

let numbers = [1, 2, 3, 3, 4, 5, 5];

let uniqueNumbers = [];

numbers.forEach(function(value) {
  if (uniqueNumbers.indexOf(value) === -1) {
    uniqueNumbers.push(value);
  }
});

console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]Code language: JavaScript (javascript)

In this example, we create an empty array called “uniqueNumbers”. We use the forEach() Method to iterate over the “numbers” array, and for each value, we check if it exists in the “uniqueNumbers” array using the indexOf() method. We add it to the “uniqueNumbers” array if it does not.

This way, we can ensure that we only include unique values in the “uniqueNumbers” array.

As a result, the “uniqueNumbers” array only contains the unique values from the original array.

Conclusion

In this blog, we learned about five different methods for removing duplicates from an array in JavaScript: filter(), set(), forEach(), reduce(), and indexOf(). Each Method has its pros and cons, and the best method for your use case will depend on the specific requirements of your project.

It is important to remember that these methods only work to remove duplicates from a simple array of values. If you have an array of objects or an array of arrays, you will need to use a different approach to remove duplicates.

Keeping your data clean and free of duplicates is important to ensure that you work with accurate and reliable information. Using one method discussed in this blog, you can easily remove duplicates from your arrays and work with clean data.

Frequently Asked Questions (FAQs)

How can I remove duplicate items from an array?

To remove duplicate items from an array, you can use one of the methods discussed in this blog, such as the filter(), set(), forEach(), reduce(), or indexOf() methods.

How to remove duplicates from an array in JavaScript using a for loop?

To remove duplicates from an array using a for loop, you can iterate over the array and check if each element is unique. If it is, you can add it to a new array. If it is not, you can skip it.

How can I remove duplicates from a JS array in the best way?

The best way to remove duplicates from a JS array depends on your specific use case and requirements. Some popular methods include using the Set() method, which creates a collection of unique values, or using the filter() method with the indexOf() Method to check for the first occurrence of an element.

How will you remove duplicates from an array of arrays?

To remove duplicates from an array of arrays, you can use JSON.stringify() Method to convert the inner arrays to strings, and then use the methods mentioned above to remove duplicates from the resulting array of strings.

What is the best way to remove duplicates from a JS array?

As mentioned above, the best way to remove duplicates from a JS array depends on your specific use case and requirements. Some popular methods include using the Set() Method or the filter() method with the indexOf() Method. When choosing the best option for your project, it is important to consider the method’s performance, simplicity, and readability.