How to remove duplicate values from JS array ?

To remove duplicate values from a JavaScript array, there are several methods depending on your use case and the type of data in the array. Below are multiple approaches with detailed explanations and examples:

1. Using Set (ES6+)

The simplest and most concise method for primitive values (numbers, strings, etc.).

const array = [1, 2, 3, 2, 4, 1];
const uniqueArray = [...new Set(array)];

// Result: [1, 2, 3, 4]

How it works:

• Set stores unique values, so converting the array to a Set removes duplicates.
• Spread syntax [...new Set(array)] converts the Set back to an array.

Limitations:

• Does not work for arrays of objects (since objects are reference types).
• Requires ES6+ support.

2. Using filter + indexOf

Works for primitive values and older browsers.

const array = [1, 2, 3, 2, 4, 1];
const uniqueArray = array.filter((value, index) => array.indexOf(value) === index);

// Result: [1, 2, 3, 4]

How it works:

• indexOf returns the first occurrence of a value.
• If the current index matches the first occurrence, the value is kept.

Limitations:

• Inefficient for large arrays (O(n²) complexity).
• Fails for NaN (since indexOf(NaN) returns -1).

3. Using reduce

Flexible method for primitives and objects.

const array = [1, 2, 3, 2, 4, 1];
const uniqueArray = array.reduce((acc, value) => {
  if (!acc.includes(value)) {
    acc.push(value);
  }
  return acc;
}, []);

// Result: [1, 2, 3, 4]

How it works:

• Iterates through the array and accumulates unique values in a new array.

Limitations:

• Inefficient for large arrays (due to includes checks).

4. Using an Object/Map for Tracking

Efficient for large arrays (O(n) complexity).

const array = [1, 2, 3, 2, 4, 1];
const seen = {};
const uniqueArray = array.filter((value) => {
  if (!seen[value]) {
    seen[value] = true;
    return true;
  }
  return false;
});

// Result: [1, 2, 3, 4]

How it works:

• Uses an object (seen) to track encountered values.
• Only keeps the first occurrence.

Limitations:

• Coerces values to strings (e.g., 1 and "1" are treated as duplicates).
• Fails for objects.

5. For Arrays of Objects

Use a unique identifier (e.g., id) to deduplicate.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 1, name: "Alice" }, // Duplicate
];

const seenIds = new Set();
const uniqueUsers = users.filter((user) => {
  if (!seenIds.has(user.id)) {
    seenIds.add(user.id);
    return true;
  }
  return false;
});

// Result: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }]

How it works:

• Tracks unique IDs using a Set.

6. Handling NaN Values

Since NaN !== NaN, special handling is required:

const array = [NaN, 1, NaN, 2];
const uniqueArray = [...new Set(array)];

// Result: [NaN, 1, 2]

7. Custom Deduplication Function

Create a reusable function to deduplicate arrays of primitives or objects:

function removeDuplicates(arr, key) {
  if (key) {
    // For arrays of objects
    const seen = new Set();
    return arr.filter((item) => {
      const value = item[key];
      if (!seen.has(value)) {
        seen.add(value);
        return true;
      }
      return false;
    });
  } else {
    // For arrays of primitives
    return [...new Set(arr)];
  }
}

// Example for objects:
const uniqueUsers = removeDuplicates(users, 'id');

Summary

• Primitive Values: Use [...new Set(array)] (fastest and simplest).
• Objects: Track unique identifiers with a Set or object.
• Legacy Browsers: Use filter + indexOf or reduce.
• Performance: Use a tracking object/Set for large datasets.

Choose the method that best fits your data type and environment!