JavaScript Sets — Can You Spot the Bug?

Why This Question Matters

Removing duplicates from an array is one of those "day one" tasks every developer faces. Whether you're cleaning up API responses or managing a list of unique tags for a blog, you'll do this a thousand times in your career.

The tricky part isn't the logic—it's the syntax. JavaScript has evolved a lot. Ten years ago, we had to write tedious for loops and manually push values into a new array. Now, we have modern ES6 features that let us do this in one line. But because there are so many ways to achieve the same result, developers often trip over the specific syntax of Set and the spread operator.

If you've ever stared at a piece of code and thought, "This looks right, so why is it crashing?", you're exactly where this challenge starts.

Understanding the Code

Let's look at the snippet provided:

const nums = [1, 2, 2, 3, 3, 4]
const unique = [...Set(nums)]
console.log(unique)

At first glance, it looks clean. It’s trying to use a Set, which is a built-in JavaScript object that stores only unique values. If you give a Set five copies of the number 2, it only keeps one. That's exactly what we want.

However, there is a critical syntax error here.

In JavaScript, Set is a constructor. To create a new instance of a Set, you must use the new keyword. When you write Set(nums), JavaScript thinks you're trying to call Set as a regular function.

Since Set isn't a function—it's a class—the engine will throw a TypeError. It will tell you that Set cannot be called as a function.

Finding the Correct Answer

The correct way to write this is:

const unique = [...new Set(nums)];

Here is the breakdown of why this works:

1. new Set(nums): This creates a Set object. The constructor takes the nums array, iterates through it, and strips out all the duplicates. At this point, unique isn't an array anymore; it's a Set object.
2. The Spread Operator (...): We usually want our data back in an array format so we can use methods like .map() or .filter(). The spread operator takes the elements out of the Set and "spreads" them into a new array literal [].

If you forget the new keyword, the code breaks. If you forget the [...] part, you end up with a Set object instead of an array, which will likely break whatever logic comes next in your application.

Common Mistakes Developers Make

Even seasoned devs make a few classic blunders when handling uniqueness.

1. Forgetting that Sets only handle primitives
A Set works great for numbers and strings. But if your array contains objects or arrays, it won't work as you expect.

const users = [{ id: 1 }, { id: 1 }];
const uniqueUsers = [...new Set(users)]; 
// Result: still has two objects.

Why? Because in JavaScript, objects are compared by reference, not by value. Two objects that look identical are actually different instances in memory, so the Set considers them unique. To fix this, you'd need to map the objects to a unique ID first or use a Map.

2. Performance traps with indexOf
Before Set became the standard, people used .filter() with .indexOf(). It looks like this:
nums.filter((item, index) => nums.indexOf(item) === index).

While clever, this is an $O(n^2)$ operation. For a small array, it's fine. For an array with 10,000 items, your app will freeze. Set is significantly faster because it uses a hash table internally.

Real-World Usage

In a production environment, you rarely see a standalone Set operation. Usually, it's part of a data transformation pipeline.

Imagine you're building an e-commerce site and you need to generate a list of all unique categories from a list of products. You might chain a .map() to grab the category and then wrap it in a Set to clean it up:

const products = [
  { name: 'Laptop', category: 'Electronics' },
  { name: 'Phone', category: 'Electronics' },
  { name: 'Shirt', category: 'Apparel' },
];
const categories = [...new Set(products.map(p => p.category))];

// ['Electronics', 'Apparel']

This pattern is incredibly common in frontend state management (like Redux or Vuex) when you need to derive a unique list of filters for a UI sidebar.

Key Takeaways

- Always use new: Set is a constructor, not a function. new Set() is the only way to initialize it.
- Spread to convert: Use [...] to turn that Set back into a usable array.
- Watch your types: Set works perfectly for primitives (strings, numbers, booleans) but fails on objects because of reference equality.
- Complexity matters: Using a Set is the most performant way to deduplicate arrays in modern JavaScript.