How to Remove Duplicates Elements from an Array in JavaScript?

In this tutorial, we will learn about removing duplicate elements from an array in JavaScript. Duplicate data poses a common issue, especially when handling large datasets in JavaScript. To ensure the accuracy and cleanliness of our data, it’s essential to remove duplicates. In this blog, we’ll explore five different methods to achieve this with JavaScript arrays.

Before delving into the methods, let’s understand what an array is in JavaScript. An array is a special object that can store multiple values in a single variable. It is represented using square brackets [] with values separated by commas within them. Now, let’s explore the methods for removing duplicates: filter(), set(), forEach(), reduce(), and indexOf().

In JavaScript, you can use various methods to remove duplicates from an array. One common approach involves using the Set object, which allows for storing only unique values. Converting the array to a Set and then back to an array automatically removes duplicates.

RELATED POST: How to Remove the First Character From String in JavaScript ?

Different Methods to Remove Duplicates Elements / Values from an Array in JavaScript

1. By using filter() Method
2. By using set() Method
3. By using forEach() Method
4. By using indexOf() Method
5. By using reduce() Method

1. By using filter() Method

To remove duplicates from an array in JavaScript using the filter() method, you filter out elements based on a condition that keeps only the first occurrence of each unique element, discarding duplicates.

The filter() method in JavaScript generates a new array containing elements that pass the specified filtering function.

Syntax:

const uniqueArray = originalArray.filter((element, index, arr) => {
  // Filtering condition goes here
});

• originalArray: The array from which duplicates need to be removed.
• element: The current element being processed during the filtering.
• index: The index of the current element within the array.
• arr: The original array being processed.

Example:

function removeDuplicates(arr) {
  return arr.filter((element, index, arr) => arr.indexOf(element) === index);
}

// Example usage:
const originalArray = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = removeDuplicates(originalArray);
console.log(uniqueArray); 

Output:

[1, 2, 3, 4, 5]

2. By using set() Method

Removing duplicates from an array means creating a new array that contains only unique elements, removing any duplicate occurrences present in the original array.

Syntax:

function removeDuplicates(arr) {
  const uniqueSet = new Set(arr);
  return [...uniqueSet];
}

Example:

const originalArray = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = removeDuplicates(originalArray);
console.log(uniqueArray);

Output:

[1, 2, 3, 4, 5]

3. By using forEach() Method

To remove duplicates from an array in JavaScript using the forEach() method, you can iterate through the array and create a new array containing only the unique elements.

Removing duplicates from an array in JavaScript means creating a new array that contains each unique element only once, eliminating any duplicate occurrences.

Syntax:

function removeDuplicates(arr) {
  const uniqueArray = [];
  arr.forEach((item) => {
    if (!uniqueArray.includes(item)) {
      uniqueArray.push(item);
    }
  });
  return uniqueArray;
}

• The removeDuplicates() function takes an array arr as its input parameter.
• We create an empty array called uniqueArray to store the unique elements.
• The forEach() method iterates through each element (item) in the input array arr.
• Inside the forEach() loop, we check if the uniqueArray does not already include the current item. If it’s not present, we add it to the uniqueArray using the push() method.
• This way, only the first occurrence of each element is added to the uniqueArray, and any duplicates are skipped.
• Finally, the uniqueArray is returned, containing only the unique elements from the original array.

Example:

const originalArray = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = removeDuplicates(originalArray);
console.log(uniqueArray);

Output:

[1, 2, 3, 4, 5]

4. By using indexOf() Method

To remove duplicates from an array in JavaScript using the indexOf() method, you can loop through the array and build a new array with only unique elements. The indexOf() method helps in checking if an element already exists in the new array before adding it.

Removing duplicates from an array in JavaScript involves creating a new array that contains only the unique elements from the original array.

Syntax:

function removeDuplicates(arr) {
  const uniqueArray = [];
  arr.forEach((item) => {
    if (uniqueArray.indexOf(item) === -1) {
      uniqueArray.push(item);
    }
  });
  return uniqueArray;
}

Example:

const originalArray = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = removeDuplicates(originalArray);
console.log(uniqueArray);

Output:

[1, 2, 3, 4, 5]

5. By using reduce() Method

The reduce() method is used to execute a reducer function on each element of the array, resulting in a single output value. By leveraging this method, we can create a new array containing only unique elements from the original array, effectively removing any duplicates.

Syntax:

function removeDuplicates(arr) {
  return arr.reduce((uniqueArray, currentElement) => {
    if (!uniqueArray.includes(currentElement)) {
      uniqueArray.push(currentElement);
    }
    return uniqueArray;
  }, []);
}

Example:

const originalArray = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = removeDuplicates(originalArray);
console.log(uniqueArray); 

Output:

[1, 2, 3, 4, 5]