How to Remove Duplicates From an Array in JavaScript

Have you ever worked with an array that contains the same value more than once? This can happen when collecting form data, processing API responses, or working with lists of names and IDs.

For example, you might have an array like this:

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

Here, the numbers 2 and 4 appear more than once. If you need an array containing only unique values, JavaScript provides several ways to remove those duplicates.

The simplest approach is to use Set with the spread operator. You can also use methods such as filter() and reduce() when you need more control over how duplicates are identified.

1. Using Set to Remove Duplicates

If you want a simple way to remove duplicate values from an array, JavaScript's Set is usually the best place to start. It stores unique values, so the same primitive value will not appear more than once.

You can combine Set with the spread operator (...) to create a new array containing only unique values. You do not need to write a loop or check each value manually.

Example 1: Remove duplicate numbers

Suppose an array contains repeated numbers. Here is how you can remove them with just one line of code.

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

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

console.log(uniqueNumbers);
// [1, 2, 3, 4, 5]

The resulting array contains each number only once. The original order is preserved, so the values appear in the order in which they first occurred.

How does this code work?

Example 2: Remove duplicate strings

The same approach works with strings. For example, you can remove repeated fruit names from a list.

const fruits = [
  "apple",
  "banana",
  "apple",
  "orange",
  "banana"
];

const uniqueFruits = [...new Set(fruits)];

console.log(uniqueFruits);
// ["apple", "banana", "orange"]

Notice that the first occurrence of each fruit is retained. Set treats uppercase and lowercase strings as different values, so "Apple" and "apple" would both remain in the result.

Does Set change the original array?

No. In this example, the original array stays the same because we create a separate array for the unique values.

const numbers = [1, 2, 2, 3];

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

console.log(numbers);
// [1, 2, 2, 3]

console.log(uniqueNumbers);
// [1, 2, 3]

This is useful when you still need the original data elsewhere in your application.

Method 2: Remove Duplicates Using filter() and indexOf()

You can also remove duplicate values using JavaScript'sfilter()andindexOf()methods. This approach keeps an element only when its current index matches the index of its first occurrence.

Here is a simple example:

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

const uniqueNumbers = numbers.filter((value, index) => {
  return numbers.indexOf(value) === index;
});

console.log(uniqueNumbers);
// [1, 2, 3, 4, 5]

How Does It Work?

1. filter() checks each element and keeps it only when the callback returnstrue.
2. indexOf(value) returns the index of the first matching element in the array.
3. If the current index equals the first occurrence's index, the element is kept. Otherwise, the duplicate is skipped.

Example With Strings

The same technique works with strings and other primitive values. For example, you can remove repeated fruit names while preserving their original order.

const fruits = [
  "apple",
  "banana",
  "apple",
  "orange",
  "banana"
];

const uniqueFruits = fruits.filter(
  (fruit, index) => fruits.indexOf(fruit) === index
);

console.log(uniqueFruits);
// ["apple", "banana", "orange"]

When Should You Use This Method?

The filter() and indexOf() approach is useful when you want to understand how duplicate removal works or need a straightforward filtering example. It does not modify the original array.

Method 3: Remove Duplicates Using reduce()

JavaScript's reduce() method processes an array and combines its elements into a single result. You can use it to build a new array containing only unique values.

In this example, we use includes() to check whether a value is already in the result array.

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

const uniqueNumbers = numbers.reduce((result, value) => {
  if (!result.includes(value)) {
    result.push(value);
  }

  return result;
}, []);

console.log(uniqueNumbers);
// [1, 2, 3, 4, 5]

How Does It Work?

1. reduce() starts with an empty array, provided as the initial value.
2. For each element, includes() checks whether that value already exists in the result.
3. If the value is not present, push() adds it to the result array.
4. The callback returns the updated array for the next iteration. After processing every element, reduce() returns the array of unique values.

Example With Strings

You can apply the same logic to arrays of strings, such as a list of fruit names. The first occurrence of each string is preserved.

const fruits = [
  "apple",
  "banana",
  "apple",
  "orange",
  "banana"
];

const uniqueFruits = fruits.reduce((result, fruit) => {
  if (!result.includes(fruit)) {
    result.push(fruit);
  }

  return result;
}, []);

console.log(uniqueFruits);
// ["apple", "banana", "orange"]

A Shorter reduce() Example

You can also write the same logic with a conditional expression. This version creates a new array when it encounters a new value.

const numbers = [10, 20, 10, 30, 20];

const uniqueNumbers = numbers.reduce(
  (result, value) =>
    result.includes(value) ? result : [...result, value],
  []
);

console.log(uniqueNumbers);
// [10, 20, 30]

When Should You Use reduce()?

Use reduce() when duplicate removal is part of a larger transformation or when you want to build an accumulated result. For a simple array of unique primitive values, the Set approach is usually easier to read.

How to Remove Duplicate Objects From an Array

Arrays of objects are common when working with API responses, user lists, products, and other structured data. However, using Set directly does not remove separate objects just because their properties have the same values.

Why Set Does Not Remove Identical Objects

Consider two objects with the same ID and name. JavaScript treats them as different objects because each object has its own reference.

const first = { id: 1, name: "Alex" };
const second = { id: 1, name: "Alex" };

const uniqueUsers = [...new Set([first, second])];

console.log(uniqueUsers.length);
// 2

The result contains two objects. To remove duplicates based on their data, choose a property that identifies each record, such as an ID.

Method 1: Use Map to Remove Objects With Duplicate IDs

A Map stores unique keys. You can use each object's ID as the key and then convert the Map values back into an array.

const users = [
  { id: 1, name: "John" },
  { id: 2, name: "Alex" },
  { id: 1, name: "John" },
  { id: 3, name: "Sara" },
  { id: 2, name: "Alex" }
];

const uniqueUsers = [
  ...new Map(users.map((user) => [user.id, user])).values()
];

console.log(uniqueUsers);
// [
//   { id: 1, name: "John" },
//   { id: 2, name: "Alex" },
//   { id: 3, name: "Sara" }
// ]

How It Works

1. users.map() creates key-value pairs using each user's ID and object.
2. new Map() stores one value per key. If a key appears again, its value is replaced by the later object.
3. .values() retrieves the stored objects.
4. The spread operator converts those values into a new array.

Method 2: Use filter() to Keep the First Object

If you want to preserve the first object for each ID, combine filter() with findIndex().

const users = [
  { id: 1, name: "John" },
  { id: 2, name: "Alex" },
  { id: 1, name: "John" },
  { id: 3, name: "Sara" }
];

const uniqueUsers = users.filter(
  (user, index, array) =>
    index === array.findIndex((item) => item.id === user.id)
);

console.log(uniqueUsers);
// [
//   { id: 1, name: "John" },
//   { id: 2, name: "Alex" },
//   { id: 3, name: "Sara" }
// ]

This method keeps an object only when its index matches the index of the first object with the same ID. Like the filter() and indexOf() approach, it can take O(n²) time because findIndex() searches the array for each object.

Which Method Should You Choose?

• Use Map: When you want a concise solution that keeps the last object for each key.
• Use filter() and findIndex(): When you want to keep the first object for each key.
• Choose the right key: Use a property that reliably identifies a record, such as a unique database ID.

Remove Duplicate Strings Ignoring Case

JavaScript compares strings in a case-sensitive way. That means"Apple"and"apple"are treated as different values.

To remove duplicates regardless of letter case, convert each string to a consistent case before comparing it. The following example keeps the first version of each string.

const fruits = [
  "Apple",
  "banana",
  "APPLE",
  "Banana",
  "orange"
];

const uniqueFruits = fruits.filter(
  (fruit, index, array) =>
    index ===
    array.findIndex(
      (item) => item.toLowerCase() === fruit.toLowerCase()
    )
);

console.log(uniqueFruits);
// ["Apple", "banana", "orange"]

How It Works

1. toLowerCase() converts each string to lowercase for comparison.
2. findIndex() finds the first string that matches the current string, ignoring case.
3. filter() keeps only the first occurrence of each case-insensitive value.

A More Efficient Approach Using Set

For larger arrays, a Set can track normalized strings that have already appeared. This avoids repeatedly searching the entire array with findIndex().

const fruits = [
  "Apple",
  "banana",
  "APPLE",
  "Banana",
  "orange"
];

const seen = new Set();

const uniqueFruits = fruits.filter((fruit) => {
  const normalized = fruit.toLowerCase();

  if (seen.has(normalized)) {
    return false;
  }

  seen.add(normalized);
  return true;
});

console.log(uniqueFruits);
// ["Apple", "banana", "orange"]

Which Method Should You Use?

JavaScript provides several ways to remove duplicate values. The right choice depends on the type of data you have, whether you need custom comparison logic, and how large the array is.

Our Recommendation

Frequently Asked Questions

Conclusion

JavaScript offers several ways to remove duplicate values from an array. The best approach depends on the type of data you are working with and how you want to identify duplicates.

For most arrays containing numbers or strings, Set with the spread operator is a simple and readable solution.

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

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

console.log(uniqueNumbers);
// [1, 2, 3, 4, 5]

If you need more control, filter() and reduce() let you define your own filtering logic. For arrays of objects, use a property such as an ID to decide which records should be considered duplicates.

Choose the method that fits your data, preserves the order you need, and makes your code easy to understand and maintain.