Core of ES6: Sets in JavaScript

With the advent of ES6 came the new features in the world of JavaScript. One of those new features was Set. So in this article, I have decided to write on it. At the end of the article, you will be able to use sets in your daily JavaScript programming. So let us start with the basics.

Definition

According to the official documentation of JavaScript, Set is defined as:

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

Primitives means things like strings or integers. Object literals or arrays can also be the part of a set.

Syntax

new Set([iterable]);

Parameters

iterable

If an iterable object is passed, all of its elements will be added to the new Set. If you don't specify this parameter, or its value is null, the new Set is empty.

Return value

A new Set object.

Examples

1: Basic functionality

In this example, the basic functionality of sets is given. Few of the general methods that came with the object of Set have also been used in this example.

// Initialize the set
let week = new Set();

// Adding Elements to the Set
week.add("Monday");
week.add("Tuesday");
week.add("Wednesday");
week.add("Thursday");
week.add("Friday");
week.add("Saturday");
week.add("Sundaay");

// Size of Set
console.log(week.size);
//Output -> 7

//Checking Element Whether it exists or not
console.log(week.has("Friday")); 
//Output -> true

//Deleting the element
week.delete("Friday");
//Element Deleted

//Lets check the deleted element again
console.log(week.has("Friday")); 
//Output -> false

//Iterate through the Set
week.forEach(w => {
  console.log("${w}!");
});

// Output -> Monday Tuesday Wednesday ... (In separate lines)

//Remove all the elements of the Set
week.clear();
console.log(week.size);
//Output -> 0

2: Set Containing An Array

In this example, an array would be in the Set.

let numbers= new Set([1,2,3,4]);

numbers.add([5,6]);
numbers.add({ number: "7", type: "natural" });

console.log(numbers.size);
//Output -> 4

numbers.forEach(number=> {
  console.log(number);
});

// Output:
// 1
// 2
// [5,6]
// Object { number: "7", type: "natural" }

3: Strings As An Argument

Strings can also be used as an argument to a set. The example will show you how it can be used:

let sentence = new Set("You are learning JavaScript!");
console.log(sentence.size);
// Output -> 18

In the above example, you must be wondering how it has 18 characters? Aren't they more than 18? In Set, the size returns you the unique character. For example, in the word JavaScript, there are 9 unique characters. The letter a comes twice, but it will be considered once.

AUTHOR

9 months ago

Great article! However example 2 contains an error as 'console.log(numbers.size);' would output '6' and the forEach loop would also print 3 and 4 after 1 and 2.

I don't understand why in the example of "Set Containing An Array", the output is not 1, 2, 3, 4, [5, 6], {number: "7", type: "natural"}. What happen with 3 and 4? Thanks

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?