Get All Unique Values in a JavaScript Array (Remove Duplicates)

There are various methods to remove duplicate elements from a JavaScript array and get all unique values. Sometimes when working with data, it is useful to get unique values from the JavaScript array (remove duplicates).

1. Using Set (Simple Approach)

The simplest and most useful way to remove duplicates from an array is by utilizing the Set object in JavaScript. A Set is a built-in collection that only stores unique values. When you pass an array to a Set, it automatically removes any duplicate values.

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];

// Output: [1, 2, 3, 4, 5]
console.log(uniqueArr);

Explanation

• The Set constructor creates a new Set from the given array.
• When duplicates are present, they are automatically removed.
• The spread operator (...) is used to convert the Set back into an array.

2. Using filter() and indexOf() Methods

Another approach to remove duplicates is using the filter() method combined with indexOf(). The idea is to loop through the array and only keep the elements whose first occurrence is at the current index.

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((value, index, self) => self.indexOf(value) === index);

// Output: [1, 2, 3, 4, 5]
console.log(uniqueArr);

Explanation

• The filter() loops through the array and checks if the current value’s first occurrence (index) matches its current index.
• indexOf() returns the index of the first occurrence of the element.
• If the current element is the first occurrence, it is included in the result.

3. Using reduce() Method

The reduce() method is a more functional approach to removing duplicates. It allows us to accumulate unique values into a new array while traversing the original array.

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

// Output: [1, 2, 3, 4, 5]
console.log(uniqueArr);

Explanation

• The reduce() method iterates over the array and maintains an accumulator (an array in this case).
• For each element, it checks whether the element is already included in the accumulator using includes().
• If not, it pushes the element into the accumulator.

4. Using forEach() and a Temporary Object (For Objects)

When working with arrays of objects, a Set or indexOf() approach won’t work as expected because JavaScript compares objects by reference, not by value. In such cases, we can use forEach() along with a temporary object or map to track already-seen values.

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'John' },
  { id: 3, name: 'Jake' }
];

const uniqueArr = [];
const seen = {};

arr.forEach(item => {
  if (!seen[item.id]) {
    uniqueArr.push(item);
    seen[item.id] = true;
  }
});

console.log(uniqueArr);
/* Output: [ 
    { name: 'John', age: 25 }, 
    { name: 'Jane', age: 30 }, 
    { name: 'Jake', age: 22 }
] */

Explanation

• We use a seen object to track the IDs of objects we’ve already encountered.
• For each object, if its id has not been seen before, it is pushed into the uniqueArray.

5. Using map() and filter() for Complex Duplicates

If you need to handle more complex scenarios where values are not directly comparable, you can combine map() with filter() to ensure uniqueness.

const arr = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 },
    { name: 'John', age: 25 },
    { name: 'Jake', age: 22 }
];

const uniqueArr = arr.filter((value, index, self) =>
    index === self.findIndex((t) => t.name === value.name && t.age === value.age)
);

console.log(uniqueArr);
/* Output: [ 
    { name: 'John', age: 25 }, 
    { name: 'Jane', age: 30 }, 
    { name: 'Jake', age: 22 }
] */

Explanation

• The findIndex() method checks if an object with the same name and age already exists in the array.
• If it’s the first occurrence, it keeps the object in the array.

6. Using Lodash uniq() Method

If you’re working on a project that already uses Lodash, the uniq() method can be a great way to remove duplicates quickly.

const _ = require('lodash');

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = _.uniq(arr);

// Output: [1, 2, 3, 4, 5]
console.log(uniqueArr);

Explanation

• uniq() is a Lodash function that efficiently removes duplicates from arrays.