Understanding the weird behavior of Sets in JavaScript

Discover why JavaScript's Sets behave unexpectedly with objects and learn how to effectively filter unique objects using Sets.
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Sets weird behavior in JS

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the weird behavior of Sets in JavaScript

JavaScript is a powerful language that allows developers to work with a variety of data structures, including Sets. However, many users, especially those new to JavaScript, encounter unexpected behavior when using Sets to filter unique objects from an array. If you've found yourself frustrated by this issue, you're not alone. In this guide, we'll break down the problem and provide a clear explanation of how Sets work with objects in JavaScript.

The Problem: Confusion with Object Uniqueness

When attempting to filter an array of objects for uniqueness, some developers believe that two objects with identical properties should be treated as the same. For example, consider the following code snippet:

[[See Video to Reveal this Text or Code Snippet]]

In this example, arr contains three distinct objects that all look the same, while sameArr contains three references to the same object in memory. When we create Sets from these arrays:

[[See Video to Reveal this Text or Code Snippet]]

This leads to a common point of confusion: why does arrSet contain three elements while sameArrSet only has one?

The Solution: Understanding Object References

Objects are Reference Types

In JavaScript, objects are reference types. This means that each object is stored in a specific memory location. When you create a new object, even if it has the same properties as an existing object, it exists in a different memory location.

Comparing two different objects, even if they look the same, will always return false:

[[See Video to Reveal this Text or Code Snippet]]

However, if you assign one object to another variable, both variables will point to the same memory location:

[[See Video to Reveal this Text or Code Snippet]]

Why This Matters for Sets

When you use a Set to filter unique elements, it checks for reference equality, not value equality. In the case of the arr variable:

All three objects are unique because each is stored in a different memory location, hence they are counted as separate entries in the Set.

In contrast, the sameArr contains references to the same object, thus the Set recognizes just one unique value.

How to Effectively Filter Unique Objects

If your goal is to filter unique objects from an array based on their properties rather than their memory references, you'll need to approach the problem differently. Here are two common methods:

Method 1: Using filter() and findIndex()

[[See Video to Reveal this Text or Code Snippet]]

Method 2: Using a Helper Object or Map

Another approach involves utilizing an object or Map to track seen values efficiently:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Understanding how JavaScript treats objects is crucial in order to manage their unique behaviors effectively. While Sets are a powerful tool for unique value storage, their behavior with objects can lead to unexpected results if you are not aware of the underlying mechanics of reference types.

By leveraging techniques like filtering and utilizing helper structures, you can effectively manage unique objects in JavaScript arrays. Happy coding!