JS: the Set Object Tutorial

By Xah Lee. Date: . Last updated: .

New in ES2015.

“Set” objects are collections of values.

Creating Set

new Set() → creates a empty set.

new Set(iterable) → create a set from values in iterable object iterable.

[see JS: Iterable]

// create a set, add value to it
const s = new Set();
s.add ("6");
s.add ("5");
s.add ("6");
console.log(s); // Set { '5', '6' }

Literal Expression for Set?

There's no literal expression for set. But you can pass in a literal expression of array.

// using array as literal expression for set
const s = new Set([3, 4, 5]);
console.log(s); // Set { '3', '4', '5' }

Example of converting a string to a set:

// string to set of chars
const t = new Set("cat 😸");
t.add ("6");
console.log(t); // Set { 'c', 'a', 't', ' ', '😸', '6' }

How Set Determines Uniqueness

The equality test used for determining whether 2 values in a set is the same as ===, except treatment of NaN (not a number).

NaN === NaN return false, but for set object, NaN is considered same as any NaN.

// equality test used for determining whether 2 values in the set is the same as ===, except treatment of NaN

// this is false
console.log(NaN === NaN); // false

// but for set object, NaN is same as any NaN
const s = new Set([NaN, NaN]);
console.log(s); // Set { NaN }

ECMAScript 2015 §Keyed Collection#sec-set-objects

Set of Arrays, Set of Objects

Set can contain value of any type. But when elements are objects (or arrays), be careful that two object of same structure and element values is considered different objects.

For example:

[3] === [3] is false

{"a":3} === {"a":3} is false

[see JS: Test Equality of Objects]

// set of array

const s = new Set([4, [3], [3]]);
console.log(s); // Set { 4, [ 3 ], [ 3 ] }
// note the array [3] is duplicated, because [3] === [3] returns false

const x = [3];
const s2 = new Set([4, x, x]);
console.log(s2); // Set { 4, [ 3 ] }
// array assigned to variable is ok

Parent of Set Objects

The parent (aka prototype) of any set object is Set.prototype.

[see JS: Prototype and Inheritance]

Size of Set

set_obj.size → returns the total count of values in set_obj.

// size of set
const s = new Set([4, 5, 6]);
console.log(s.size); // 3

Add a Value

set_obj.add(value) → add an value to the set. Returns the modified set.

// create a set, add value to it
const s = new Set();
s.add ("6");
s.add ("5");
s.add ("6");

// the set is modified
console.log(s); // Set { '6', '5' }

console.log( s.add ("7")); // Set { '6', '5', '7' }
// the method “add” returns the modified set

Delete a Value

set_obj.delete(value) → delete a value in the set. Returns true if found, else false.

const s = new Set([4, 5, 6]);

// delete a value. return true if found
console.log(s.delete(5)); // true

console.log(s.delete(99)); // false

console.log(s); // Set { 4, 6 }

Check Existence

set_obj.has(value) → return true if value is in set. Else, false.

// check existence
const s = new Set([3,4,5]);
console.log(s.has (5)); // true
console.log(s.has (99)); // false

Clear Set

set_obj.clear() → delete all values of the set. Returns undefined.

const s = new Set([3,4,5]);

// clear set
console.log(
    s.clear()
); // Returns undefined

console.log(s); // Set {}

Iteration

You can use for-of loop.

[see JS: for-of Loop]

// Iterating over a Set
const s = new Set([3,4,5]);
for (let v of s) { console.log(v); }
// prints

// 3
// 4
// 5

Iteration with forEach

JS: Set.prototype.forEach

Union, Intersection, Difference

JS: Set Union, Intersection, Difference

Convert Set to Array

Use Array.from(set)

// convert set to arry
const s = new Set();
s.add(3);
s.add(4);
s.add(5);

const ar = Array.from(s);

console.log(ar); // [ 3, 4, 5 ]

Add Arbitrary Properties to Set

Because set is a object, you can still add arbitrary properties to a set object. (but you shouldn't do it.) [see JS: What's Object?]

const s = new Set([4, 5, 6]);

// you can add arbitrary properties to a set object
s.pp = 22;
console.log(s.pp); // 22

console.log(Object.getOwnPropertyNames(s)); // [ 'pp' ]

Set Topic

  1. JS: the Set Object Tutorial
  2. JS: Set Union, Intersection, Difference
  3. JS: Set Object
  4. JS: Set.prototype
  5. JS: Set.prototype.forEach
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon