DEV Community

loading...
Cover image for Sets in JavaScript — the only explanation you will ever need

Sets in JavaScript — the only explanation you will ever need

marcosmol204 profile image Marcos Molina 👩🏽‍💻 Updated on ・5 min read

Alt Text

This post contains technical information, code examples and real use cases.

Introduction

What Sets are in general?

There is a branch of mathematical logic called "Set theory" and that studies sets( OMG 😱, I can't believe!), which can be informally described as unordered collections of distinct element.
Distinct, meaning every element appears only once.
Unorder, in this case, refers to the order not being important.
The elements that make up a set can be any kind of thing: people, letters of the alphabet, numbers, points in space, lines, other geometrical shapes, variables, or even other sets.

Example

Set example 1

Properties of set

  • Length / Cardinality: number of elements of the set. A set can be empty, finite, or infinite. For example: Set example 2
  • Subset/ Superset: a set A is a subset of a set B if all elements of A are also elements of B; B is then a superset of A. For example, all odd numbers set is a subset of all numbers set. All number sets are a superset of odd numbers set. Set example 3

Operations on sets

  • Union: is the set of all elements that are members of both sets. union
  • Intersection: is the set of all things that are members of both A and B. Intersection
  • Complement: is the set of all elements that are members of A, but not members of B.

    Complement

  • Symmetric difference: is the set of elements that are part of the sets, but not in their intersection.

    Symmetric difference

Content

Sets in JavaScript

Definition

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. MDN

Creating a set

The constructor takes an iterable object, eliminates all duplicated items, and returns an instance of Set.
Don't remember what iterables are ? check it

How JS check if an item is duplicated?

The operator === is used. There are some "edge cases" like +0 is equal to -0? NaN is equal to Nan? that behavior a little different. Click for more information.
Let's check it.

const setExample = new Set([1, '1']);
console.log(setExample);
// Set(2) { 1, '1' }
Enter fullscreen mode Exit fullscreen mode

Since

console.log(1 === '1');
// false
Enter fullscreen mode Exit fullscreen mode

Be careful since comparing objects, since you are comparing the pointer to the object and not the value

const objA1 = { a: 'a' };
const objA2 = { a: 'a' };
const exampleSet = new Set([objA1, objA2]);
console.log(exampleSet)
// Set(2) { { a: 'a' }, { a: 'a' } }
Enter fullscreen mode Exit fullscreen mode

Set methods / properties

  • size : returns the length / cardinality of the set.
  • add(value): append the value to the set, checking if exists. Returns the same pointer to the original set with added value.
  • clear(): removes all the elements. Returns undefined.
  • delete(value) : removes the element associated to the value. Returns true if the values was deleted else returns false.
  • has(value) : returns true is the value exists in the set, else returns false.
const exampleSet = new Set([1]);
console.log(exampleSet);
// Set(1) { 1 }
const afterAddMethod = exampleSet.add(2);
// returned pointer to exampleSet. Are you sure? let's check it.
console.log(exampleSet === afterAddMethod);
// true
exampleSet.add(3);
const wasDeleted = exampleSet.delete(1);
console.log(wasDeleted);
// true
console.log(exampleSet);
// Set(2) { 2, 3 }
console.log(exampleSet.has(2));
// true
console.log(exampleSet.has(1));
// false
exampleSet.clear();
console.log(exampleSet);
//Set(0) {}
Enter fullscreen mode Exit fullscreen mode

The follow iteration methods can be used with sets

const exampleSet = new Set([1, "2", 3, "4", 4]);
console.log(exampleSet.keys());
// [Set Iterator] { 1, '2', 3, '4', 4 }
console.log(exampleSet.values());
// [Set Iterator] { 1, '2', 3, '4', 4 }
console.log(exampleSet.entries());
/* [Set Entries] {
    [1, 1],
    ['2', '2'],
    [3, 3],
    ['4', '4'],
    [4, 4]
} */
exampleSet.forEach(value => console.log(value));
// 1, 2, 3, 4, 4
Enter fullscreen mode Exit fullscreen mode

MDN Implementation of basic set operations.

After explaining about operation on sets, we check the code implementation.

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
}  
Enter fullscreen mode Exit fullscreen mode

Edit #1:

Alex Lohr suggested the following implementations:

const isSuperset = (set, superset) => [...set].every((item) => superset.has(item))
const union = (set1, set2) => new Set([...set1, ...set2])
const intersection = (set1, set2) => new Set([...set1].filter((item) => set2.has(item)))
const symmetricDifference = (set1, set2) => new Set([...set1, ...set2].filter((item) => set1.has(item) ^ set2.has(item)))
const difference = (set1, set2) => new Set([...set1].filter((item) => !set2.has(item)))
Enter fullscreen mode Exit fullscreen mode

Examples

const setA = new Set([1, 2, 3])
const setB = new Set([3, 4, 5, 6])
console.log(isSuperset(setA, setB))          // returns true
console.log(union(setA, setB))              // returns Set { 1, 2, 3, 4, 5, 6 }
console.log(intersection(setA, setB))       // returns Set { 3 }
console.log(symmetricDifference(setA, setB)) // returns Set { 1, 2, 4, 5, 6 }
console.log(difference(setA, setB))     // returns Set { 1, 2 }
Enter fullscreen mode Exit fullscreen mode

When can I use Sets?

Abstract examples

*Removing duplicate values of an array.

const someArray = [1, 1, 2, 2, 3, 3, 4, 5, 5, 6, 7];
const afterRemovingDuplicatedValues = [...new Set(someArray)];
Enter fullscreen mode Exit fullscreen mode

*Given two arrays, return an array with the common values once.

const setA = new Set([31, 141, 245, 22]);
const setB = new Set([1, 22, 12, 33])
console.log(intersection(setA, setB));
Enter fullscreen mode Exit fullscreen mode

*Given two arrays, return an array with every value once.

const setA = new Set([31, 141, 245, 22]);
const setB = new Set([1, 22, 12, 33])
console.log(join(setA, setB));
Enter fullscreen mode Exit fullscreen mode

More specifics examples

*Tags. If everyone can add a tag, I think is a good idea to avoid duplicated tags. Set of tags.
*Did I see this IP in the last hour? Set of IPs
*Is the user online? Set of users ids.
*Has this URL been banned? Set of URLs.

Summary

Set is a collection of unique values. It "adds" additional capabilities to arrays and simplifies working on scenarios where the values should be unique.

I hope I could share with you some knowledge.
Did you learn something new? Let me know in the comments. ❤️
Do you know another use cases? 👆🏽
Did you love it? Share it with your friends. 👏🏽
Don't be afraid to post your thoughts. I'm here to learn from you. 😇
Networking? LinkedIn 🤝🏽

Thank you for reading.

Sources:
1) Wikipedia
2) MDN

Discussion (4)

Collapse
lexlohr profile image
Alex Lohr

Your examples can be simplified by using arrays as intermediate step:

const isSuperset = (set, superset) => [...set].every((item) => superset.has(item))
const union = (set1, set2) => new Set([...set1, ...set2])
const intersection = (set1, set2) => new Set([...set1].filter((item) => set2.has(item)))
const symmetricDifference = (set1, set2) => new Set([...set1, ...set2].filter((item) => set1.has(item) ^ set2.has(item)))
const difference = (set1, set2) => new Set([...set1].filter((item) => !set2.has(item)))
Enter fullscreen mode Exit fullscreen mode
Collapse
marcosmol204 profile image
Marcos Molina 👩🏽‍💻 Author

Thank you, just added to the post.

Collapse
tomfa profile image
Tomas Fagerbekk

Nicely explained 👍I think your empty set example has length 4, though?

I'm looking forward to Set in JS gets method included!

Collapse
marcosmol204 profile image
Marcos Molina 👩🏽‍💻 Author

You are right! I Fixed it.
Thank you very much for the comment!

Forem Open with the Forem app