How to customize object equality for JavaScript Set

JavaScript’s Set object offers a powerful way to store unique values. However, its default equality comparison for objects relies on reference equality, meaning two objects with the same properties are considered different unless they are the same object in memory. This can be a roadblock when you need to store objects based on their content rather than their memory location. This post dives deep into customizing object equality for JavaScript Sets, offering practical solutions and real-world examples to harness the full potential of this versatile data structure.

Understanding the Default Behavior

By default, a Set treats two objects as distinct even if their properties are identical. This stems from JavaScript’s inherent object comparison mechanism, which checks for reference equality. Consider this example:

const set = new Set(); const obj1 = { id: 1, name: 'John' }; const obj2 = { id: 1, name: 'John' }; set.add(obj1); set.add(obj2); // obj2 is added even though it's "equal" to obj1 in terms of content console.log(set.size); // Output: 2

This behavior can be problematic when you want to ensure uniqueness based on object content. For instance, if you’re tracking users based on their ID, you wouldn’t want duplicate entries just because the objects are created at different points in your code.

Customizing Equality with a Key Function

A robust solution is to use a “key function.” This function generates a unique key for each object, allowing the Set to determine equality based on these keys instead of references. This approach is highly flexible and adaptable to various scenarios. Below is an implementation using a key function that generates a stringified key from the object’s id property:

function createKey(obj) { return JSON.stringify(obj.id); } const customSet = new Set(); const obj3 = { id: 1, name: 'John' }; const obj4 = { id: 1, name: 'John' }; customSet.add(createKey(obj3), obj3); customSet.add(createKey(obj4), obj4); // obj4 is not added, as the key is the same console.log(customSet.size); // Output: 1

This provides precise control over how object equality is determined within the Set. Now we successfully manage uniqueness based on the id property.

Using Map for Enhanced Management

Another effective approach leverages the Map object. A Map allows storing key-value pairs, making it easy to manage objects based on custom keys. While not a Set directly, it offers similar uniqueness enforcement:

const userMap = new Map(); const obj5 = { id: 1, name: 'Jane' }; const obj6 = { id: 1, name: 'Jane' }; userMap.set(obj5.id, obj5); userMap.set(obj6.id, obj6); // obj6 overwrites obj5 as they have the same ID console.log(userMap.size); // Output: 1 console.log(userMap.get(1)); // Output: obj6 (the latest object added)

This allows updating existing objects while maintaining uniqueness based on the chosen key. You could also stringify more complex objects for the map key to compare by multiple properties.

Overriding the equals() and hashCode() Methods (Java-inspired approach)

While not directly applicable to JavaScript’s Set, it’s worth mentioning an approach inspired by languages like Java. In Java, you’d override the equals() and hashCode() methods of your objects to define custom equality. While JavaScript doesn’t have these methods natively, you can simulate this behavior with careful implementation of the key function.

This simulated approach, while more complex, offers fine-grained control over equality. It’s particularly useful when dealing with complex object structures and interoperability with systems where this Java-like pattern is established. Keep in mind, while conceptually similar to Java’s hashCode/equals, Javascript’s equality comparison requires different considerations.

Choosing the Right Approach

Selecting the best method depends on the specific needs of your project. For simple scenarios, the key function method using JSON.stringify is often sufficient. For more complex cases where object updates and retrieval are essential, the Map approach offers greater flexibility.

Key Function: Simple, efficient for basic object comparison.
Map Object: Provides update capabilities and easy retrieval.

Consider factors like the complexity of your objects, the frequency of updates, and the need for retrieving specific objects when deciding which strategy to implement. The key function approach offers a balance of simplicity and effectiveness for many common use cases.

Infographic Placeholder: Visual comparison of the key function and Map approaches.

Example: Deduplicating User Objects

Let’s say you’re building a user management system. You fetch user data from multiple sources and want to ensure you don’t have duplicate entries. Using a key function based on the userId provides a clean solution:

// ... (previous example code for key function and Set) const users = [ { userId: 123, name: 'Alice' }, { userId: 456, name: 'Bob' }, { userId: 123, name: 'Alice (duplicate)' }, // Duplicate userId ]; const uniqueUsers = new Set(); users.forEach(user => uniqueUsers.add(createKey(user), user)); console.log(uniqueUsers.size); // Output: 2 (duplicate removed)

FAQ

Q: Why doesn’t the Set remove duplicates automatically based on object content?

A: JavaScript’s default object comparison checks for reference equality, not content equality. Two objects with identical properties are considered different unless they are the same object in memory.

Determine the properties that define object equality.
Create a key function that generates a unique key based on these properties.
Use the Set with the key function to ensure uniqueness.

By mastering these techniques, you can leverage the Set object effectively for managing unique objects based on their content, leading to cleaner, more efficient JavaScript code. This enhanced control empowers you to handle complex data structures with precision and confidence.

Explore further by diving into these resources:

Ready to streamline your JavaScript code? Implement these techniques today and unlock the true potential of the Set object for robust and efficient data management. Consider sharing your experiences and challenges in the comments below — let’s learn and grow together!

Question & Answer :
New ES 6 (Harmony) introduces new Set object. Identity algorithm used by Set is similar to === operator and so not much suitable for comparing objects:

var set = new Set(); set.add({a:1}); set.add({a:1}); console.log([...set.values()]); // Array [ Object, Object ]

How to customize equality for Set objects in order to do deep object comparison? Is there anything like Java equals(Object)?

Update 3/2022

There is currently a proposal to add Records and Tuples (basically immutable Objects and Arrays) to Javascript. In that proposal, it offers direct comparison of Records and Tuples using === or !== where it compares values, not just object references AND relevant to this answer both Set and Map objects would use the value of the Record or Tuple in key comparisons/lookups which would solve what is being asked for here.

Since the Records and Tuples are immutable (can’t be modified) and because they are easily compared by value (by their contents, not just their object reference), it allows Maps and Sets to use object contents as keys and the proposed spec explicitly names this feature for Sets and Maps.

This original question asked for customizability of a Set comparison in order to support deep object comparison. This doesn’t propose customizability of the Set comparison, but it directly supports deep object comparison if you use the new Record or a Tuple instead of an Object or an Array and thus would solve the original problem here.

Note, this proposal advanced to Stage 2 in mid-2021. It has been moving forward recently, but is certainly not done.

Mozilla work on this new proposal can be tracked here.

Official Spec Draft here.

Incomplete polyfill here.

Note the polyfill will never be a complete polyfill because the spec uses new language features and implements new types in the language. But, the polyfill can be used with some work-arounds.

Original Answer

The ES6 Set object does not have any compare methods or custom compare extensibility.

The .has(), .add() and .delete() methods work only off it being the same actual object or same value for a primitive and don’t have a means to plug into or replace just that logic.

You could presumably derive your own object from a Set and replace .has(), .add() and .delete() methods with something that did a deep object comparison first to find if the item is already in the Set, but the performance would likely not be good since the underlying Set object would not be helping at all. You’d probably have to just do a brute force iteration through all existing objects to find a match using your own custom compare before calling the original .add().

Here’s some info from this article and discussion of ES6 features:

5.2 Why can’t I configure how maps and sets compare keys and values?

Question: It would be nice if there were a way to configure what map keys and what set elements are considered equal. Why isn’t there?

Answer: That feature has been postponed, as it is difficult to implement properly and efficiently. One option is to hand callbacks to collections that specify equality.

Another option, available in Java, is to specify equality via a method that object implement (equals() in Java). However, this approach is problematic for mutable objects: In general, if an object changes, its “location” inside a collection has to change, as well. But that’s not what happens in Java. JavaScript will probably go the safer route of only enabling comparison by value for special immutable objects (so-called value objects). Comparison by value means that two values are considered equal if their contents are equal. Primitive values are compared by value in JavaScript.