Unique Elements in a JavaScript Array: Removing Duplicates from Within

The Duplicate Array: Why This Problem Got Thousands of Views on Stack Overflow

Imagine: you're writing an online store, a user adds items to the cart. But due to an error or a bug, the same iPhone ends up in the list three times. Or you're parsing a list of tags from a database, and "JavaScript" appears 15 times in a row. What to do? That's right — keep only the unique values.

The question "Get all unique values in a JavaScript array (remove duplicates)" on Stack Overflow has gathered hundreds of thousands of views. And this is no accident. The task seems simple, but under the hood lies a whole arsenal of approaches: from one-liners in modern ES6 to clever tricks with filter and indexOf. In this article, we won't just give ready-made solutions; we'll break down how each one works at the JavaScript engine level.

Ready to look under the hood? Let's go!

Method #1: Set — The King of Performance

The most elegant and fastest way to get unique values in a JavaScript array is to use the Set object. It appeared in ES6 and was literally created for this task.

const numbers = [1, 2, 2, 3, 4, 4, 5];\nconst uniqueNumbers = [...new Set(numbers)];\n\nconsole.log(uniqueNumbers); // [1, 2, 3, 4, 5]

How does it work under the hood?

The Set object stores only unique values. When we pass an array to the constructor new Set(numbers), the JavaScript engine iterates over each element and adds it to an internal hash table. If the value already exists, it is ignored. Then the spread operator ... converts the Set back into an array.

Why is it fast? Because searching and inserting into a Set are done in O(1) (constant time). For an array of 10,000 elements, the difference compared to other methods will be colossal.

Important: Set preserves the order of elements but only works with primitives (numbers, strings, booleans). For objects, comparison is done by reference, not by content.

When to use it?

\n
• If the array consists of numbers or strings.
\n
• If processing speed for large arrays is important.
\n
• If you are writing modern code and are not afraid of ES6.
\n

Method #2: filter + indexOf — A Classic

This method is a veteran of JavaScript. It works in all browsers without polyfills and is still popular on Stack Overflow.

const numbers = [1, 2, 2, 3, 4, 4, 5];\nconst uniqueNumbers = numbers.filter((value, index, arr) => {\n  return arr.indexOf(value) === index;\n});\n\nconsole.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Logic Breakdown

The filter method creates a new array, keeping only those elements for which the callback returns true. Inside the callback, we check: is the current index the first occurrence of this value in the array? If yes, we keep the element. If the value has appeared before, indexOf will return a smaller index, the condition will not be met, and the duplicate will be discarded.

The catch: indexOf iterates through the array from the beginning each time. This gives a complexity of O(n²). For small arrays (up to 1000 elements), the difference is negligible, but with 100,000 elements, the browser might freeze for a second.

When to use it?

\n
• If you need to support older browsers (IE11).
\n
• If the array is small.
\n
• If you want to clearly demonstrate the logic of "first occurrence".
\n

Method #3: reduce + Accumulator — Flexibility and Control

The reduce method gives you full control over the process. We decide ourselves how to assemble the result.

const numbers = [1, 2, 2, 3, 4, 4, 5];\nconst uniqueNumbers = numbers.reduce((acc, value) => {\n  if (!acc.includes(value)) {\n    acc.push