JS: the Set Object Tutorial

By Xah Lee. Date: . Last updated: .

New in ES2015.

“Set” objects are collections of values of any type. A distinct value may only occur once as value of a Set's collection. The insertion order of values are maintained.

Creating Set

new Set() → creates a empty set.

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

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

Any iterable object can be used as argument. 〔►see JS: Iterable

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

// using array as literal expression for set
var 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
var 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 returns 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
var 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]) === false and ({"a":3} === {"a":3}) === false ).

〔►see JS: Test Equality of Objects

// set of array

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

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

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?

var 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' ]

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 is a getter property from Set.prototype.size.

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

〔►see JS: Getter/Setter Properties

Add a Value

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

// create a set, add value to it
var 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.prototype.delete(value) → delete a value in the set. Returns true if found, else false.

var 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.prototype.has(value) → return true if value is in set. Else, false.

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

Clear Set

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

var 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
let 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
var s = new Set();
s.add(3);
s.add(4);
s.add(5);

var ar = Array.from(s);

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

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
Like what you read? Buy JavaScript in Depth