Set) [ES6]
Before ES6, JavaScript didn’t have a data structure for sets. Instead, two workarounds were used:
Since ES6, JavaScript has the data structure Set, which can contain arbitrary values and performs membership checks quickly.
There are three common ways of creating Sets.
First, you can use the constructor without any parameters to create an empty Set:
const emptySet = new Set();
assert.equal(emptySet.size, 0);
Second, you can pass an iterable (e.g., an Array) to the constructor. The iterated values become elements of the new Set:
const set = new Set(['red', 'green', 'blue']);
Third, the .add() method adds elements to a Set and is chainable:
const set = new Set()
.add('red')
.add('green')
.add('blue');
.add() adds an element to a Set.
const set = new Set();
set.add('red');
.has() checks if an element is a member of a Set.
assert.equal(set.has('red'), true);
.delete() removes an element from a Set.
assert.equal(set.delete('red'), true); // there was a deletion
assert.equal(set.has('red'), false);
.size contains the number of elements in a Set.
const set = new Set()
.add('foo')
.add('bar');
assert.equal(set.size, 2)
.clear() removes all elements of a Set.
set.clear();
assert.equal(set.size, 0)
Sets are iterable and the for-of loop works as you’d expect:
const set = new Set(['red', 'green', 'blue']);
for (const x of set) {
console.log(x);
}
Output:
redgreenblue
As you can see, Sets preserve insertion order. That is, elements are always iterated over in the order in which they were added.
Given that Sets are iterable, you can use Array.from() to convert them to Arrays:
const set = new Set(['red', 'green', 'blue']);
const arr = Array.from(set); // ['red', 'green', 'blue']
Converting an Array to a Set and back, removes duplicates from the Array:
assert.deepEqual(
Array.from(new Set([1, 2, 1, 2, 3, 3, 3])),
[1, 2, 3]);
Strings are iterable and can therefore be used as parameters for new Set():
assert.deepEqual(
new Set('abc'),
new Set(['a', 'b', 'c']));
As with Map keys, Set elements are compared similarly to ===, with the exception of NaN being equal to itself.
> const set = new Set([NaN, NaN, NaN]);
> set.size
1
> set.has(NaN)
true
As with ===, two different objects are never considered equal (and there is no way to change that at the moment):
> const set = new Set();
> set.add({});
> set.size
1
> set.add({});
> set.size
2
Sets are missing several common operations. Such an operation can usually be implemented by:
a ∪ b)Computing the union of two Sets a and b means creating a Set that contains the elements of both a and b.
const a = new Set([1,2,3]);
const b = new Set([4,3,2]);
// Use spreading to concatenate two iterables
const union = new Set([...a, ...b]);
assert.deepEqual(Array.from(union), [1, 2, 3, 4]);
a ∩ b)Computing the intersection of two Sets a and b means creating a Set that contains those elements of a that are also in b.
const a = new Set([1,2,3]);
const b = new Set([4,3,2]);
const intersection = new Set(
Array.from(a).filter(x => b.has(x))
);
assert.deepEqual(
Array.from(intersection), [2, 3]
);
a \ b)Computing the difference between two Sets a and b means creating a Set that contains those elements of a that are not in b. This operation is also sometimes called minus (−).
const a = new Set([1,2,3]);
const b = new Set([4,3,2]);
const difference = new Set(
Array.from(a).filter(x => !b.has(x))
);
assert.deepEqual(
Array.from(difference), [1]
);
Sets don’t have a method .map(). But we can borrow the one that Arrays have:
const set = new Set([1, 2, 3]);
const mappedSet = new Set(
Array.from(set).map(x => x * 2)
);
// Convert mappedSet to an Array to check what’s inside it
assert.deepEqual(
Array.from(mappedSet), [2, 4, 6]
);
We can’t directly .filter() Sets, so we need to use the corresponding Array method:
const set = new Set([1, 2, 3, 4, 5]);
const filteredSet = new Set(
Array.from(set).filter(x => (x % 2) === 0)
);
assert.deepEqual(
Array.from(filteredSet), [2, 4]
);
Sets are iterable and therefore can use operations that accept iterables. These are described elsewhere:
Setnew Set()new Set(iterable) [ES6]
values, then an empty Set is created.
const set = new Set(['red', 'green', 'blue']);
Set.prototype.*: single Set elementsSet.prototype.add(value) [ES6]
value to this Set.
this, which means that it can be chained.
const set = new Set(['red']);
set.add('green').add('blue');
assert.deepEqual(
Array.from(set), ['red', 'green', 'blue']
);
Set.prototype.delete(value) [ES6]
value from this Set.
true if something was deleted and false, otherwise.
const set = new Set(['red', 'green', 'blue']);
assert.equal(set.delete('red'), true); // there was a deletion
assert.deepEqual(
Array.from(set), ['green', 'blue']
);
Set.prototype.has(value) [ES6]
Returns true if value is in this Set and false otherwise.
const set = new Set(['red', 'green']);
assert.equal(set.has('red'), true);
assert.equal(set.has('blue'), false);
Set<T>.prototype: all Set elementsget Set.prototype.size [ES6]
Returns how many elements there are in this Set.
const set = new Set(['red', 'green', 'blue']);
assert.equal(set.size, 3);
Set.prototype.clear() [ES6]
Removes all elements from this Set.
const set = new Set(['red', 'green', 'blue']);
assert.equal(set.size, 3);
set.clear();
assert.equal(set.size, 0);
Set<T>.prototype: iterating and loopingSet.prototype.values() [ES6]
Returns an iterable over all elements of this Set.
const set = new Set(['red', 'green']);
for (const x of set.values()) {
console.log(x);
}
Output:
redgreen
Set.prototype[Symbol.iterator]() [ES6]
Default way of iterating over Sets. Same as .values().
const set = new Set(['red', 'green']);
for (const x of set) {
console.log(x);
}
Output:
redgreen
Set.prototype.forEach(callback, thisArg?) [ES6]
forEach(
callback: (value: T, key: T, theSet: Set<T>) => void,
thisArg?: any
): void
Feeds each element of this Set to callback(). value and key both contain the current element. This redundancy was introduced so that this callback has the same type signature as the callback of Map.prototype.forEach().
You can specify the this of callback via thisArg. If you omit it, this is undefined.
const set = new Set(['red', 'green']);
set.forEach(x => console.log(x));
Output:
redgreen
MapThe following two methods mainly exist so that Sets and Maps have similar interfaces. Each Set element is handled as if it were a Map entry whose key and value are both the element.
Set.prototype.entries(): Iterable<[T,T]> [ES6]
Set.prototype.keys(): Iterable<T> [ES6]
.entries() enables you to convert a Set to a Map:
const set = new Set(['a', 'b', 'c']);
const map = new Map(set.entries());
assert.deepEqual(
Array.from(map.entries()),
[['a','a'], ['b','b'], ['c','c']]
);
.size, while Arrays have a .length?The answer to this question is given in “Why do Maps have a .size, while Arrays have a .length?” (§35.6.4).