The new collection method

ECMAScript 14 introduces several enhancements to collection-related methods, including Set.prototype.union(), Set.prototype.intersection(), Set.prototype.difference(), and others, which significantly simplify set operations. Additionally, Map and WeakMap have also gained practical methods like Map.prototype.emplace().

New Set Operation Methods

ECMAScript 14 adds standard mathematical set operation methods to the Set type, eliminating the need for manual implementation or reliance on third-party libraries. Here are the core methods:

Set.prototype.union()

Returns the union of the current set and another set, without modifying the original set.

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);
console.log(setA.union(setB)); // Set {1, 2, 3, 4, 5}

Set.prototype.intersection()

Returns the intersection of two sets.

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
console.log(setA.intersection(setB)); // Set {2, 3}

Set.prototype.difference()

Returns elements present in the current set but not in the parameter set.

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 4]);
console.log(setA.difference(setB)); // Set {1, 3}

Set.prototype.symmetricDifference()

Returns the symmetric difference of two sets (elements present in only one of the sets).

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
console.log(setA.symmetricDifference(setB)); // Set {1, 4}

Set.prototype.isSubsetOf() and isSupersetOf()

Checks subset and superset relationships.

const setA = new Set([1, 2]);
const setB = new Set([1, 2, 3]);
console.log(setA.isSubsetOf(setB)); // true
console.log(setB.isSupersetOf(setA)); // true

Enhanced Methods for Map

Map.prototype.emplace()

Atomically inserts or updates a value, avoiding race conditions.

const map = new Map([['key', 1]]);
map.emplace('key', {
  insert: () => 100,
  update: (old) => old + 1
});
console.log(map.get('key')); // 2

Map.prototype.groupBy()

Groups items into a new Map based on a callback function.

const data = [
  { type: 'fruit', name: 'apple' },
  { type: 'vegetable', name: 'carrot' }
];
const grouped = Map.groupBy(data, item => item.type);
console.log(grouped.get('fruit')); // [{ type: 'fruit', name: 'apple' }]

New Methods for WeakMap

WeakMap.prototype.upsert()

Similar to emplace, but designed for weak reference keys.

const weakMap = new WeakMap();
const key = {};
weakMap.upsert(key, () => 'initial', v => v + ' updated');
console.log(weakMap.get(key)); // 'initial'

Performance Optimization and Considerations

1. Lazy Evaluation for Set Operations: Methods like union() return new sets rather than iterators, so be mindful of memory overhead for large sets.
2. Type Consistency: Set methods strictly use the SameValueZero comparison algorithm:

   const set = new Set([NaN]);
   console.log(set.union(new Set([NaN])).size); // 1
   

3. Chaining Support: Methods support chaining:

   new Set([1, 2])
     .union(new Set([2, 3]))
     .difference(new Set([3]))
     .size; // 2
   

Practical Use Cases

Data Deduplication and Merging

const userTags1 = new Set(['js', 'html']);
const userTags2 = new Set(['css', 'js']);
const allTags = userTags1.union(userTags2);

Permission Intersection Validation

const requiredPermissions = new Set(['read', 'write']);
const userPermissions = new Set(['read', 'delete']);
const hasAccess = requiredPermissions.intersection(userPermissions).size > 0;

Synchronizing Data Differences

const serverData = new Set([1001, 1002, 1003]);
const localData = new Set([1002, 1004]);
const needUpload = localData.difference(serverData);
const needDownload = serverData.difference(localData);

Integration with Other Features

Using Spread Operator for Quick Conversion

const setA = new Set([1, 2]);
const setB = new Set([...setA, 3]); // Replaces the old merging approach

Combining with Array.from for Complex Operations

const uniqueItems = Array.from(
  new Set(data).union(additionalData)
);

Browser Compatibility Note

As of the time of release, these methods require the latest versions of Chrome/Firefox or can be polyfilled via the Babel plugin @babel/plugin-proposal-set-methods. The corresponding polyfill can be imported from core-js.