How to remove duplicate values from js array

In JavaScript, removing duplicate values from an array can be achieved through several different methods. Below are some common approaches, each with its own advantages.

1. Using the Set Object

Set is a new data structure introduced in ES6 that allows you to store unique values (duplicate elements are ignored). We can leverage this feature to remove duplicate values from the array.

javascript
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]

Using the Set object is the most concise method, with code that is easy to understand and performs well.

2. Using the filter Method

The Array.prototype.filter method iterates over an array and returns a new array containing all elements that pass a test function. We can utilize this method to filter out elements that appear for the first time, achieving deduplication.

javascript
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index, arr) => arr.indexOf(item) === index);
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]

This method does not require any external libraries or specific language features, making it suitable for older JavaScript environments.

3. Using the reduce Method

The Array.prototype.reduce method executes a provided reducer function on each element of the array, aggregating the results into a single return value. We can use it to build an array without duplicate values.

javascript
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, current) => {
  if (acc.indexOf(current) === -1) {
    acc.push(current);
  }
  return acc;
}, []);
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]

This method provides greater control but may be less efficient than using the Set object.

4. Using the forEach Method with a Helper Object

We can use forEach to iterate over the array and employ a helper object (or Map) to track already encountered values.

javascript
const array = [1, 2, 2, 3, 4, 4, 5];
let uniqueObject = {};
const uniqueArray = [];

array.forEach((item) => {
  if (!uniqueObject[item]) {
    uniqueArray.push(item);
    uniqueObject[item] = true;
  }
});
console.log(uniqueArray); // Output: [1, 2, 3, 4, 5]

This method is efficient but requires slightly more complex code and additional space to store the helper object.

Each method has its own applicable scenarios. The choice depends on specific requirements, code readability, and compatibility with older JavaScript versions. For example, if you are developing an application that must run on older browsers, you might avoid using Set and filter, opting instead for for loops or other ES5-compatible methods. If your environment supports ES6, using Set is the simplest and most intuitive approach.

In JavaScript, there are multiple ways to remove duplicate values from an array.

1. Using Set Set is a built-in data structure that stores unique values of any type. Therefore, you can easily remove duplicates using Set.

javascript
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]

1. Using filter() The filter() method creates a new array containing all elements that pass the test implemented by the provided function. Here, we can check if the current element's index is the first occurrence of that element in the array.

javascript
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index, arr) => arr.indexOf(item) === index);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

1. Using reduce() The reduce() method executes a reducer function on each element of the array, accumulating the results into a single return value. You can use it to build a new array without duplicates.

javascript
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((accumulator, current) => {
  if (accumulator.indexOf(current) === -1) {
    accumulator.push(current);
  }
  return accumulator;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

1. Using forEach() and includes() You can iterate through the array and use the includes() method to check if the current item is already present in the result array.

javascript
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [];
array.forEach(item => {
  if (!uniqueArray.includes(item)) {
    uniqueArray.push(item);
  }
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]

These are some common methods to remove duplicate values from an array. You can choose the method that best suits your situation. Typically, using Set is the simplest and quickest approach.

Using the .filter method with a concise one-liner implementation that leverages .indexOf to remove duplicates:

javascript
arr = arr.filter(function (value, index, array) { 
  return array.indexOf(value) === index;
});

ES6 Approach

javascript
arr = arr.filter((value, index, array) => 
  array.indexOf(value) === index
);