How to remove duplicates from an array in JavaScript

1[...new Set(arr)]Recommended

new Set(iterable) adds every element and silently ignores the ones it already has. Spreading it back into [...] (or passing it to Array.from) turns it into an array again. Sets iterate in insertion order, so the result keeps the first occurrence of each value where it was. It is a single O(n) pass and the original array is not touched.

const langs = ['js', 'go', 'js', 'rust', 'go', 'js'];

const unique = [...new Set(langs)];
console.log(unique);
console.log(langs.length, '->', unique.length);

// Array.from does the same job and reads well in a chain
console.log(Array.from(new Set([3, 1, 3, 2, 1])));

// Set uses SameValueZero: NaN equals NaN, but '1' and 1 stay distinct
console.log([...new Set([NaN, NaN, 1, '1', 0, -0])]);

// Objects are compared by reference, not by contents
console.log([...new Set([{ id: 1 }, { id: 1 }])]);

Prints [ 'js', 'go', 'rust' ], 6 -> 3 and [ 3, 1, 2 ]: first-seen order, not sorted. The fourth line, [ NaN, 1, '1', 0 ], shows the equality rule Sets use (SameValueZero): it is === except that NaN matches itself, so the two NaNs and the 0/-0 pair collapse while the number 1 and the string '1' stay apart. The last line is the limit: two lookalike objects are still two different references, so [ { id: 1 }, { id: 1 } ] survives intact. Section 3 fixes that.

2filter() + indexOf() (the pre-Set idiom)

Before ES2015 the standard answer was to keep an element only if the index you are looking at is the first index it appears at. It still works everywhere and you will meet it in older code, but indexOf scans from the start for every element, so it is O(n²): fine for a few hundred items, noticeably slow on tens of thousands. Flipping the test to !== is a handy way to see which values were repeated.

const langs = ['js', 'go', 'js', 'rust', 'go', 'js'];

// Keep an item only if this is the first index it appears at
const unique = langs.filter((lang, i) => langs.indexOf(lang) === i);
console.log(unique);

// Flip the test to get the repeats instead
console.log(langs.filter((lang, i) => langs.indexOf(lang) !== i));

// The catch: indexOf can't find NaN, so every NaN is dropped
const values = [1, NaN, 2, NaN];
console.log(values.filter((v, i) => values.indexOf(v) === i));
console.log([...new Set(values)]);

The dedupe prints the same [ 'js', 'go', 'rust' ] as the Set version, and the flipped test prints [ 'js', 'go', 'js' ]: every extra copy, so a value repeated three times shows up twice. The last two lines are the bug to know about. indexOf uses strict equality, and NaN === NaN is false, so it returns -1 for NaN, the test never passes, and [ 1, 2 ] has lost the value entirely. The Set keeps one: [ 1, NaN, 2 ]. Prefer new Set for new code; reach for this form only when you need the index, for example to keep the last occurrence with lastIndexOf.

3Dedupe an array of objects by a key

A Set compares objects by reference, so two records with the same id are not duplicates to it. What you want is to pick the field that makes two records "the same" and dedupe on that. There are two idioms, and they differ in which record survives. A Map built from [id, object] pairs keeps the last record for each id (a later set overwrites the value), while a Set of seen ids inside filter keeps the first.

const users = [
  { id: 1, name: 'Ada' },
  { id: 2, name: 'Linus' },
  { id: 1, name: 'Ada L.' },
  { id: 3, name: 'Grace' },
];

// A Map keyed by id: a later duplicate overwrites the value,
// but the key keeps the position of its first appearance
const lastWins = [...new Map(users.map((u) => [u.id, u])).values()];
console.log(lastWins);

// A Set of seen ids inside filter keeps the FIRST object instead
const seen = new Set();
const firstWins = users.filter((u) => {
  if (seen.has(u.id)) return false;
  seen.add(u.id);
  return true;
});
console.log(firstWins);

Both print three users in the order 1, 2, 3, but the Map version starts with { id: 1, name: 'Ada L.' } and the filter version with { id: 1, name: 'Ada' }. Node prints each array over several lines because the objects no longer fit on one. The Map keeps id 1 at the front because overwriting a key's value doesn't move it. Pick the one that matches your data: last-wins is right when later rows are updates, first-wins when the first record is the canonical one. To dedupe on several fields, build a composite key such as `${u.first}|${u.last}`. Avoid JSON.stringify(obj) as a key: it depends on property order, so { a: 1, b: 2 } and { b: 2, a: 1 } come out different.

4Case-insensitive dedupe

The same idea handles JavaScript, javascript and JAVASCRIPT: record a normalised key in the seen-set, but push the original string. That keeps the spelling of the first occurrence. If you are happy for every value to come out lowercased, normalise first and hand the result to a Set.

const tags = ['JavaScript', 'go', 'javascript', 'Go', 'Rust', 'JAVASCRIPT'];

// Key on the normalised value, keep the original spelling
const seen = new Set();
const unique = tags.filter((tag) => {
  const key = tag.toLowerCase();
  if (seen.has(key)) return false;
  seen.add(key);
  return true;
});
console.log(unique);

// Or keep every value lowercased
console.log([...new Set(tags.map((tag) => tag.toLowerCase()))]);

Prints [ 'JavaScript', 'go', 'Rust' ], the first spelling of each tag, then [ 'javascript', 'go', 'rust' ]. The key function is the only part that changes between variations: add .trim() to ignore surrounding spaces, or use tag.normalize('NFC').toLowerCase() when the input may mix composed and decomposed accents. toLowerCase is enough for English tags; for user text in other languages, localeCompare with { sensitivity: 'base' } is the stricter comparison, though it doesn't give you a key you can put in a Set.

5Merge two arrays and remove duplicates

Merging without duplicates is the same operation with two inputs: spread both arrays into one Set. ES2025 also added set algebra to Set.prototype, so a.union(b) reads exactly like what it does. union, intersection and difference all return a new Set and are available in Node 22+ and every current browser. The pre-ES2015 version is concat followed by the filter from section 2.

const a = ['js', 'go', 'rust'];
const b = ['go', 'zig', 'js', 'odin'];

// Spread both into one Set, then back into an array
console.log([...new Set([...a, ...b])]);

// ES2025 Set methods: union returns a new Set
const merged = new Set(a).union(new Set(b));
console.log(merged);
console.log([...merged]);

// Its siblings answer the neighbouring questions
console.log([...new Set(a).intersection(new Set(b))]);
console.log([...new Set(b).difference(new Set(a))]);

// Before ES2015: concat, then the filter + indexOf dedupe
const both = a.concat(b);
console.log(both.filter((x, i) => both.indexOf(x) === i));

Every merge prints [ 'js', 'go', 'rust', 'zig', 'odin' ]: all of a in order, then the values from b that were new. Logging the Set itself shows Node's Set format, Set(5) { 'js', 'go', 'rust', 'zig', 'odin' }, which is why you spread it before handing it to code that expects an array. The intersection prints [ 'js', 'go' ] and the difference [ 'zig', 'odin' ], the values only b has. The argument to union has to be Set-like (it needs size and has): pass a plain array and it throws TypeError: The .size property is NaN, so wrap it in new Set() first. For arrays of objects, merge with [...a, ...b] and run the Map-by-key dedupe from section 3.

6Which should you use?