JavaScript Fundamentals: Learning the Language of the Web

What are Sets in Javascript?

Board Infinity
Board Infinity
What are Sets in Javascript?

    Basics of Javascript

    Java Vs Javascript: What's The Difference?

    JavaScript console.log() Method

    How to run a .js file in Terminal?

    String to Array conversion in JavaScript

    JavaScript Split()

    How to reverse a string in Javascript?

    Array Join() in JavaScript

    A Quick Guide to VAR, LET and CONST

    Var, Let and Const: Description and Differences

    Array iteration in JavaScript

    AddEventListener() in Javascript

    Understanding Anonymous Function in Javascript

    How to Quickly Check If an Array is empty or not in Javascript?

    JavaScript Object.assign()

    Object.keys() in JavaScript

    Array find() method in JavaScript

    What are Sets in Javascript?

    Map in JavaScript

    Introduction to ES6

    Top 10 Features of ES6

Overview

A set is an object in ES6 that enables a programmer to create a collection of distinct values of any data type. We can add as many items in a set as we wish to, but it will automatically discard any duplicates. In this article, we shall learn in-depth about Set in JavaScript, its uses, how it can be used, and many other cool things!

Scope

In this article, we shall learn about:

  • How to create a Set in JavaScript.
  • Some useful methods that Set provides.
  • What is WeakSet in JavaScript?

How to create a set?

The following code block shows how to construct a set object:

let aSetObj = new Set();

We can also pass an iterable object as an argument to the SET() constructor to initialize our set object with the elements of the argument object. Have a look at the code block ahead:

let arr = [1, 2, 2, 3];

let aSetObj = new Set(arr);

console.log(aSetObj);

Output

Set(3) { 1, 2, 3 }

Set methods and properties

size

The size property of Set holds the number of items in the Set object. This is how we use it:

let arr = [1, 2, 2, 3];

let aSetObj = new Set(arr);

console.log(aSetObj.size);

Output

3

add

It is a method that allows us to add elements to a set object. Use it as demonstrated in the following code block:

let arr = [1, 2, 2, 3];

let aSetObj = new Set(arr);

aSetObj.add(0);

console.log(aSetObj);

Output

Set(3) { 1, 2, 3, 0 }

We can serially chain multiple add calls as follows:

aSetObj.add(0).add(1).add(12);

has

has() is a method that returns a boolean value, which determines whether or not a certain value is present in the set object. Pass the item to be checked the presence of, as an argument to the has() call. Look at the code block ahead to have a better understanding of how has() works;

let arr = [‘a’, ‘b’, ‘c’, ‘d’];

let aSetObj = new Set(arr);

console.log(aSetObj.has(‘a’));

console.log(aSetObj.has(‘z’));

Output

true

false

delete

It is a method used for removing an element from a set object.

let arr = [‘a’, ‘b’, ‘c’, ‘d’];

let aSetObj = new Set(arr);

aSetObj.delete('b’);

console.log(aSetObj);

Output

Set(3) { 'a', 'c', 'd' }

The method “delete” returns true implying that the element has been successfully removed from the set object.

clear

Use clear() method to empty a set object.

aSetObj.clear();

console.log(aSetObj.size);

Output

0

entries

In JavaScript, we are also provided with the keys(), values(), and entries() functions. Though, the keys and values in a javaScript set object are the same.

let arr = [1,2,3,4];

let aSetObj = new Set(arr);

for (let [key, val] of aSetObj.entries()) {

    console.log(`k: ${key} | v: ${val}`);

}

Output

k: 1 | v: 1

k: 2 | v: 2

k: 3 | v: 3

k: 4 | v: 4

WeakSets

A WeakSet in JavaScript is similar to a normal Set. The only difference is that a WeakSet may contain only objects. The objects stored in a WeakSet object are automatically garbage-collected, and thus a WeakSet object does not have the property “size”. Since one can’t iterate the elements of a WeakSet, it is rarely used in practice. Check out the code snippet below:

let brand = {company: 'BMW'};

let item = {type: 'car'};

let vehicle = new WeakSet([brand, item]);

console.log(vehicle.has(brand));

Output

true