<h1>Set</h1><p>The&nbsp;<code><strong>Set</strong></code>&nbsp;object lets you store unique values of any type, whether&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Glossary/Primitive" rel="noopener noreferrer" target="_blank">primitive values</a>&nbsp;or object references.</p><h2>Description</h2><p><code>Set</code>&nbsp;objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the&nbsp;<code>Set</code>&nbsp;<strong>may only occur once</strong>; it is unique in the&nbsp;<code>Set</code>'s collection.</p><h3>Value Equality</h3><p>Because each value in the&nbsp;<code>Set</code>&nbsp;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&nbsp;<code>===</code>&nbsp;operator. Specifically, for&nbsp;<code>Set</code>s,&nbsp;<code>+0</code>&nbsp;(which is strictly equal to&nbsp;<code>-0</code>) and&nbsp;<code>-0</code>&nbsp;were different values. However, this was changed in the ECMAScript 2015 specification. See&nbsp;<em>"Key equality for -0 and 0"</em>&nbsp;in the&nbsp;browser compatibility&nbsp;table for details.</p><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" rel="noopener noreferrer" target="_blank">NaN</a></code>&nbsp;and&nbsp;<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" rel="noopener noreferrer" target="_blank">undefined</a></code>&nbsp;can also be stored in a Set. All&nbsp;<code>NaN</code>&nbsp;values are equated (i.e.&nbsp;<code>NaN</code>&nbsp;is considered the same as&nbsp;<code>NaN</code>, even though&nbsp;<code>NaN !== NaN</code>).</p><h2>Constructor</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set" rel="noopener noreferrer" target="_blank">Set()</a></code> Creates a new&nbsp;<code>Set</code>&nbsp;object.</p><h2>Static properties</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@species" rel="noopener noreferrer" target="_blank">get Set[@@species]</a></code> The constructor function that is used to create derived objects.</p><h2>Instance properties</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/size" rel="noopener noreferrer" target="_blank">Set.prototype.size</a></code> Returns the number of values in the&nbsp;<code>Set</code>&nbsp;object.</p><h2>Instance methods</h2><ol><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add" rel="noopener noreferrer" target="_blank">Set.prototype.add(value)</a></code> Appends&nbsp;<code>value</code>&nbsp;to the&nbsp;<code>Set</code>&nbsp;object. Returns the&nbsp;<code>Set</code>&nbsp;object with added value.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear" rel="noopener noreferrer" target="_blank">Set.prototype.clear()</a></code> Removes all elements from the&nbsp;<code>Set</code>&nbsp;object.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/delete" rel="noopener noreferrer" target="_blank">Set.prototype.delete(value)</a></code> Removes the element associated to the&nbsp;<code>value</code>&nbsp;and returns a boolean asserting whether an element was successfully removed or not.&nbsp;<code>Set.prototype.has(value)</code>&nbsp;will return&nbsp;<code>false</code>&nbsp;afterwards.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has" rel="noopener noreferrer" target="_blank">Set.prototype.has(value)</a></code> Returns a boolean asserting whether an element is present with the given value in the&nbsp;<code>Set</code>&nbsp;object or not.</li></ol><h3>Iteration methods</h3><ol><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator" rel="noopener noreferrer" target="_blank">Set.prototype[@@iterator]()</a></code> Returns a new iterator object that yields the&nbsp;<strong>values</strong>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values" rel="noopener noreferrer" target="_blank">Set.prototype.keys()</a></code> Returns a new iterator object that yields the values for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order. (For Sets, this is the same as the&nbsp;<code><strong>values()</strong></code>&nbsp;method.)</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values" rel="noopener noreferrer" target="_blank">Set.prototype.values()</a></code> Returns a new iterator object that yields the&nbsp;<strong>values</strong>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order. (For Sets, this is the same as the&nbsp;<code><strong>keys()</strong></code>&nbsp;method.)</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/entries" rel="noopener noreferrer" target="_blank">Set.prototype.entries()</a></code> Returns a new iterator object that contains&nbsp;<strong>an array of&nbsp;</strong><code><strong>[value,&nbsp;value]</strong></code>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object, in insertion order. This is similar to the&nbsp;<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" rel="noopener noreferrer" target="_blank">Map</a></code>&nbsp;object, so that each entry's&nbsp;<em>key</em>&nbsp;is the same as its&nbsp;<em>value</em>&nbsp;for a&nbsp;<code>Set</code>.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/forEach" rel="noopener noreferrer" target="_blank">Set.prototype.forEach(callbackFn[,&nbsp;thisArg])</a></code> Calls&nbsp;<code>callbackFn</code>&nbsp;once for each value present in the&nbsp;<code>Set</code>&nbsp;object, in insertion order. If a&nbsp;<code>thisArg</code>&nbsp;parameter is provided, it will be used as the&nbsp;<code>this</code>&nbsp;value for each invocation of&nbsp;<code>callbackFn</code>.</li></ol><h2>Examples</h2><h3>Using the Set object</h3><pre class="ql-syntax" spellcheck="false">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
</pre><h3>Iterating Sets</h3><pre class="ql-syntax" spellcheck="false">// 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 =&gt; mySet2.has(x)))

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

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

// 1
// 2
// 3
// 4
</pre><h3>Implementing basic set operations</h3><pre class="ql-syntax" spellcheck="false">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}

</pre><h3>Relation with Array objects</h3><pre class="ql-syntax" spellcheck="false">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
</pre><h3>Remove duplicate elements from the array</h3><pre class="ql-syntax" spellcheck="false">// 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]
</pre><h3>Relation with Strings</h3><pre class="ql-syntax" spellcheck="false">let text = 'India'

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

//case sensitive &amp; 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" }
</pre><h3>Use Set to ensure the uniqueness of a list of values</h3><pre class="ql-syntax" spellcheck="false">const array = Array.from(document.querySelectorAll('[id]')).map(e =&gt; e.id);
const set = new Set(array);
console.assert(set.size == array.length);
</pre><p>That's how Set works in JavaScript. Feel free to leave a comment below.</p>

The Set object lets you store unique values of any type, whether primitive values or object references. 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 collectionThe Set object lets you store unique values of any type, whether primitive values or object references. Set objects are collections of values...

Explanation & Working of Set's in JavaScript