BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News New JavaScript Set Methods Now Supported by All Major Browser Engines

New JavaScript Set Methods Now Supported by All Major Browser Engines

With the release of Firefox 127, all major browser engines now support the new JavaScript Set methods, including intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf(), and isDisjointFrom(). Polyfills are no longer required to make them work everywhere. These additions provide convenient, built-in ways to manipulate and compare collections aiming to simplify development and enahnce performance.

JavaScript Sets function similarly to Arrays but guarantees the uniqueness of each value. This automatic removal of duplicates makes Sets perfect for creating unique collections. For instance, here's a simple example of creating and adding elements to a Set:


const users = new Set();
const alice = { id: 1, name: "Alice" };
users.add(alice);

users.forEach(user => { console.log(user) });
    

Sets are also typically faster than Arrays for checking if an element exists, making them useful for performance-sensitive applications.

The union() method returns a new Set containing elements from both the original Set and the given Set. This is useful for combining collections without duplicates:


const set1 = new Set(["Alice", "Bob", "Charlie"]);
const set2 = new Set(["Bob", "Charlie", "David"]);
const unionSet = set1.union(set2);

unionSet.forEach(name => {
  console.log(name); // Outputs: Alice, Bob, Charlie, David
});
    

The "intersection()" method returns a new Set containing only elements present in both Sets. This is helpful for finding common elements:


const intersectionSet = set1.intersection(set2);

intersectionSet.forEach(name => {
  console.log(name); // Outputs: Bob, Charlie
});
    

The symmetricDifference() method returns a new Set containing elements present in either of the Sets but not in both. This is useful for finding unique elements between two Sets:


const symmetricDifferenceSet = set1.symmetricDifference(set2);

symmetricDifferenceSet.forEach(name => {
  console.log(name); // Outputs: Alice, David
});
    

The difference() method returns a new Set containing elements present in the original Set but not in the given Set. This is useful for subtracting elements:


const set1Only = set1.difference(set2);

set1Only.forEach(name => {
  console.log(name); // Outputs: Alice
});
    

The methods isSubsetOf() and isSupersetOf() return Boolean values based on the relationship between Sets. The "isSubsetOf()" method checks if all elements of a Set are in another Set, while the isSupersetOf() method determines if a Set contains all elements of another Set.


const subset = new Set(["Alice", "Bob"]);
const superset = new Set(["Alice", "Bob", "Charlie"]);

if (subset.isSubsetOf(superset)) {
  console.log("subset is a subset of superset"); // This will be printed because all elements in subset are also in superset
} else {
  console.log("subset is not a subset of superset");
}

if (superset.isSupersetOf(subset)) {
  console.log("superset is a superset of subset"); // This will be printed because all elements in subset are also in superset
} else {
  console.log("superset is not a superset of subset");
}
    

The isDisjointFrom() method checks if two Sets have no common elements:


const set3 = new Set(["Eve", "Frank", "Gina"]);

if (set1.isDisjointFrom(set2)) {
  console.log("Set1 and Set2 are disjoint"); // This will be printed because set1 and set2 have no common elements
} else {
  console.log("Set1 and Set2 are not disjoint");
}

if (set1.isDisjointFrom(set3)) {
  console.log("Set1 and Set3 are disjoint");
} else {
  console.log("Set1 and Set3 are not disjoint"); // This will be printed because set1 and set3 have a common element "Charlie"
}
    

The community has responded positively to these new methods. In a Reddit thread, user peterlinddk said:

"Excellent - finally we can use Set for more than a 'duplicate-detector'. I only wish that there were some way for objects to be 'equal' without them having to be the exact same instance. Kind of like Java's .equals and .hashCode methods."

Another user, Pelopida92, praised the performance benefits, stating:

"Sets are awesome. I used them extensively for some big-data scripts, as they have way better performance than arrays and are very easy to use and convenient."

About the Author

Rate this Article

Adoption
Style

BT