Explanation & Working of Set's in JavaScript

TIKAM CHAND
TIKAM CHAND

03 Jun 2021

JavaScript

Set

The Set object lets you store unique values of any type, whether primitive values or object references.

Description

Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.

Value Equality

Because each value in the Set has to be unique, the value equality will be checked. In an earlier version of ECMAScript specification, this was not based on the same algorithm as the one used in the === operator. Specifically, for Sets, +0 (which is strictly equal to -0) and -0 were different values. However, this was changed in the ECMAScript 2015 specification. See "Key equality for -0 and 0" in the browser compatibility table for details.

NaN and undefined can also be stored in a Set. All NaN values are equated (i.e. NaN is considered the same as NaN, even though NaN !== NaN).

Constructor

Set() Creates a new Set object.

Static properties

get Set[@@species] The constructor function that is used to create derived objects.

Instance properties

Set.prototype.size Returns the number of values in the Set object.

Instance methods

  1. Set.prototype.add(value) Appends value to the Set object. Returns the Set object with added value.
  2. Set.prototype.clear() Removes all elements from the Set object.
  3. Set.prototype.delete(value) Removes the element associated to the value and returns a boolean asserting whether an element was successfully removed or not. Set.prototype.has(value) will return false afterwards.
  4. Set.prototype.has(value) Returns a boolean asserting whether an element is present with the given value in the Set object or not.

Iteration methods

  1. Set.prototype[@@iterator]() Returns a new iterator object that yields the values for each element in the Set object in insertion order.
  2. Set.prototype.keys() Returns a new iterator object that yields the values for each element in the Set object in insertion order. (For Sets, this is the same as the values() method.)
  3. Set.prototype.values() Returns a new iterator object that yields the values for each element in the Set object in insertion order. (For Sets, this is the same as the keys() method.)
  4. Set.prototype.entries() Returns a new iterator object that contains an array of [value, value] for each element in the Set object, in insertion order. This is similar to the Map object, so that each entry's key is the same as its value for a Set.
  5. Set.prototype.forEach(callbackFn[, thisArg]) Calls callbackFn once for each value present in the Set object, in insertion order. If a thisArg parameter is provided, it will be used as the this value for each invocation of callbackFn.

Examples

Using the Set object

const mySet1 = new Set()

mySet1.add(1) // Set [ 1 ] mySet1.add(5) // Set [ 1, 5 ] mySet1.add(5) // Set [ 1, 5 ] mySet1.add('some text') // Set [ 1, 5, 'some text' ] const o = {a: 1, b: 2} mySet1.add(o)

mySet1.add({a: 1, b: 2}) // o is referencing a different object, so this is okay mySet1.has(1) // true mySet1.has(3) // false, since 3 has not been added to the set mySet1.has(5) // true mySet1.has(Math.sqrt(25)) // true mySet1.has('Some Text'.toLowerCase()) // true mySet1.has(o) // true

mySet1.size // 5

mySet1.delete(5) // removes 5 from the set mySet1.has(5) // false, 5 has been removed

mySet1.size // 4, since we just removed one value

console.log(mySet1) // logs Set(4) [ 1, "some text", {…}, {…} ] in Firefox // logs Set(4) { 1, "some text", {…}, {…} } in Chrome

Iterating Sets

// iterate over items in set
// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of mySet1.keys()) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of mySet1.values()) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} // (key and value are the same here) for (let [key, value] of mySet1.entries()) console.log(key)

// convert Set object to an Array object, with Array.from const myArr = Array.from(mySet1) // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}]

// the following will also work if run in an HTML document mySet1.add(document.body) mySet1.has(document.querySelector('body')) // true

// converting between Set and Array const mySet2 = new Set([1, 2, 3, 4]) mySet2.size // 4 [...mySet2] // [1, 2, 3, 4]

// intersect can be simulated via const intersection = new Set([...mySet1].filter(x => mySet2.has(x)))

// difference can be simulated via const difference = new Set([...mySet1].filter(x => !mySet2.has(x)))

// Iterate set entries with forEach() mySet1.forEach(function(value) { console.log(value) })

// 1 // 2 // 3 // 4

Implementing basic set operations

function isSuperset(set, subset) {
for (let elem of subset) {
if (!set.has(elem)) {
return false
}
}
return true
}

function union(setA, setB) { let _union = new Set(setA) for (let elem of setB) { _union.add(elem) } return _union }

function intersection(setA, setB) { let _intersection = new Set() for (let elem of setB) { if (setA.has(elem)) { _intersection.add(elem) } } return _intersection }

function symmetricDifference(setA, setB) { let _difference = new Set(setA) for (let elem of setB) { if (_difference.has(elem)) { _difference.delete(elem) } else { _difference.add(elem) } } return _difference }

function difference(setA, setB) { let _difference = new Set(setA) for (let elem of setB) { _difference.delete(elem) } return _difference }

// Examples const setA = new Set([1, 2, 3, 4]) const setB = new Set([2, 3]) const setC = new Set([3, 4, 5, 6])

isSuperset(setA, setB) // returns true union(setA, setC) // returns Set {1, 2, 3, 4, 5, 6} intersection(setA, setC) // returns Set {3, 4} symmetricDifference(setA, setC) // returns Set {1, 2, 5, 6} difference(setA, setC) // returns Set {1, 2}

Relation with Array objects

let myArray = ['value1', 'value2', 'value3']

// Use the regular Set constructor to transform an Array into a Set let mySet = new Set(myArray)

mySet.has('value1') // returns true

// Use the spread operator to transform a set into an Array. console.log([...mySet]) // Will show you exactly the same Array as myArray

Remove duplicate elements from the array

// Use to remove duplicate elements from the array

const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]

console.log([...new Set(numbers)]) // [2, 3, 4, 5, 6, 7, 32]

Relation with Strings

let text = 'India'

const mySet = new Set(text) // Set(5) {'I', 'n', 'd', 'i', 'a'} mySet.size // 5

//case sensitive & duplicate ommision new Set("Firefox") // Set(7) { "F", "i", "r", "e", "f", "o", "x" } new Set("firefox") // Set(6) { "f", "i", "r", "e", "o", "x" }

Use Set to ensure the uniqueness of a list of values

const array = Array.from(document.querySelectorAll('[id]')).map(e => e.id);
const set = new Set(array);
console.assert(set.size == array.length);

That's how Set works in JavaScript. Feel free to leave a comment below.



Comments

(3)
We have temporarily disabled the comment posting feature. It will be enabled soon—please check back later!
  • yearlymagazine

    Your writing is like a breath of fresh air in the often stale world of online content. Your unique perspective and engaging style set you apart from the crowd. Thank you for sharing your talents with us.


  • HealXO

    Excellent blog here Also your website loads up very fast What web host are you using Can I get your affiliate link to your host I wish my web site loaded up as quickly as yours lol


  • twinklecrest

    Hi Neat post There is a problem along with your website in internet explorer would test this IE still is the market chief and a good section of other folks will pass over your magnificent writing due to this problem


Recent posts

TIKAM CHAND
Shadow DOM in JavaScript
How ToJavaScript
1
101
2