JavaScript ES6 Set, WeakSet, Map, and WeakMap

In this article, we cover JavaScript ES6 Set, Map, WeakSet, Map and WeakMap data structure with examples and detailed explanations with lots of code examples.

JavaScript is a versatile and powerful programming language that has a wide range of data structures to offer.

Two such data structures are the Set and Map.

In JavaScript, Set and Map are powerful data structures that allow developers to store unique values and key-value pairs respectively.

They are similar to arrays and objects but with some important differences.

In this article, we will explore the advantages of using Set and Map, their syntax, and some code examples to help you understand how they work.

JavaScript Set

A Set is a collection of unique values in JavaScript.

It can store any type of value, including primitives, objects, and even other Sets.

One of the main advantages of using Set is that it automatically eliminates duplicate values, which can save time and memory. Here’s an example of creating a Set and adding values to it:

Syntax of Set in JavaScript

The Set object is created using the new keyword followed by the Set() constructor. Here is an example:

const set = new Set();

We can also pass an iterable object to the constructor to initialize the Set object with a collection of values:

const set = new Set([1, 2, 3]);

The Set object provides a number of methods to add, remove, and access values in the collection.

Advantages of Set in JavaScript

1. The Set object only stores unique values. This makes it an ideal data structure for storing a collection of items that should not contain duplicates.
2. The Set object provides efficient methods to add, remove, and check if a value is present in the collection.
3. The Set object can store any data type, including objects.
4. The Set object is iterable, which makes it easy to loop through the collection using a for…of loop.

JavaScript WeakSet

A WeakSet is similar to a Set but with some important differences.

A WeakSet can only store objects and it holds weak references to its elements.

This means that if an object in the WeakSet has no other references, it can be garbage collected.

This can be useful for storing objects that are only needed temporarily.

Here’s an example of creating a WeakSet and adding objects to it:

const myWeakSet = new WeakSet();
const obj1 = {name: "John"};
const obj2 = {name: "Jane"};
myWeakSet.add(obj1);
myWeakSet.add(obj2);
console.log(myWeakSet); // WeakSet {{...}, {...}}

You cannot use the size property or the forEach() method on a WeakSet because the number of elements is not guaranteed to be accurate due to garbage collection.

JavaScript Map

A Map is a collection of key-value pairs in JavaScript. It can store any type of key and value, including objects and other Maps.

One of the main advantages of using Map is that it allows you to associate a value with a specific key, which can make your code more readable and efficient.

Here’s an example of creating a Map and adding key-value pairs to it:

const myMap = new Map();
myMap.set("name", "John");
myMap.set("age", 30);
console.log(myMap); // Map {"name" => "John", "age" => 30}

JavaScript WeakMap

A WeakMap is similar to a Map but with some important differences.

A WeakMap can only store objects as keys and it holds weak references to its keys.

This means that if a key in the WeakMap has no other references, it can be garbage collected.

This can be useful for storing metadata about objects that are only needed temporarily.

Here’s an example of creating a WeakMap and adding key-value pairs to it:

const myWeakMap = new WeakMap();
const obj1 = {name: "John"};
const obj2 = {name: "Jane"};
myWeakMap.set(obj1, 30);
myWeakMap.set(obj2, 40);
console.log(myWeakMap); // WeakMap {{...} => 30, {...} => 40}

Additional Methods

Set, WeakSet, Map, and WeakMap have additional methods that can be useful in certain situations. Here are some examples:

• clear(): Removes all elements from the Set, WeakSet, Map, or WeakMap.
• keys(): Returns an iterator of the keys in the Set, WeakSet, Map, or WeakMap.
• values(): Returns an iterator of the values in the Set, WeakSet, Map, or WeakMap.
• entries(): Returns an iterator of the key-value pairs in the Map or WeakMap.
• forEach(): Invokes a function for each element in the Set, WeakSet, Map, or WeakMap.

In this article, we explored the advantages of using Set and Map, their syntax, and some code examples to help you understand how they work.

We also introduced WeakSet and WeakMap, which are similar to Set and Map but with some important differences.

By using these data structures in your JavaScript code, you can create more efficient and readable applications.