Learn about Sets & Maps in JavaScript

Introduction Object Set And Map.

1. The Set object allows you to store values ​​that are unique
2. The Map object allows you to store key-value pairs and remember the initial insertion order of the keys.

Set

Set Is a collection of values. You can iterate through Set elements in the order of insertion. The value in Set can only be a unique set of Sets. In Javascript, the Set object allows customization, providing useful methods such as adding, modifying, and iterating over the elements of the Set collection.

Array vs Set

Array, like a collection, is a data structure that allows to calculate, remove and iterate over its indexes. However, an Array differs from a Set in the sense that it allows the addition of duplicate values ​​and its operations are relatively slower.

Example: When searching through an array with linear time complexity of O (n), it’s like inserting an element in the middle of an array. This means that the runtime for searching and inserting indexes for the array increases as the size of the array increases.The Push and Pop array methods have a runtime of O (1), meaning: This operation will have a constant execution time regardless of the aray size increasing n.

In practice, however, the Push (O) operation incurs a copy cost when new adjacent memory locations are allocated to the newly created array array.

Set has run time of O (1) with all calculations and searches.

Creating a Set

Initializing a Set

To initialize a Set, we can pass an array of values ​​to the Set constructor, which will create a Set with those values:

In the above paragraph, the oreo duplicate value, is quietly deleted from Set and only the unique values ​​are returned.

Adding Items

We can add more items to the Set using the add() . This method adds a new value to the Set object and returns Set.

Adding a duplicate entry to the Set object will not return an error, instead, that item will not be added.

Deleting Items

Use the delete() , to delete the value to delete. The method will return a true Boolean value if the delete succeeds and false if it fails.

We can delete all Set elements with the clear () method.

Size of a Set

We can get the size of the Set using the size attribute on the Set prototype. This is similar to the length attribute for arrays:

Searching for Items

We need to know there is a specific element in Set. This can be done using the has() .

The has() returns true if the element is in Set and false if it is not:

Returning the Items in a Set

We can return items in a Set in the same order of insertion using the values() . This method returns a new setIterator object.

A similar method to return items in a collection is the keys() :

The setIterator object is an Iterator object because it implements Iterizable and Iterator protocols. The Iterable protocol specifies an iteration through the values ​​of using loop structures.

It also makes the values ​​repeated by the next() . When we call next() on a setIterator object, we will get the next value in the iteration and false until all Set values ​​have been repeated:

Because the Department implements the Iterable protocol, loop structures like for … of can be used as shown below:

WeakSets

WeakSets provide additional flexibility when working with data structures. They differ from normal data sets in that they only accept objects and cannot be repeated; they can be repeated and there is no clear () method. To fix this we will use WeakSets. We can create a Weakset using the Weakset constructor:

Maps

Maps in JavaScript are objects designed to effectively store and retrieve items based on a unique key for each element. Maps store key-value pairs in which both the key and value can be primitive or other objects or both.

A Map object repeats its elements in the order in which they are inserted – a for … of that returns an array [key, value] for each iteration.

Creating a Map

Adding Items

Key-value pairs are added to the Map using the set() . This method has two arguments, first a key and second value , referenced by the key :

Unlike Set, which removes duplicate keys, Maps will update the value attached to that key:

Deleting Items

Just like Set, key-value pairs can be deleted by the delete() . The key to be deleted is passed to the () method as shown below:

The map also has a clear() to remove all key-value pairs from the Map:

Searching for Items

Maps also has has() to check if the key exists in Map or not. This method will return true if the key is in Map and false if it is not:

Returning the Value of a Map item

The value of the key in the Map object can be received by the get() on the Map prototype:

It is possible to retrieve all keys and values ​​of a Map object using the keys() and values() methods, respectively. These methods return a new MapIterator object with the next() that can be used to iterate over Map items:

As with Set, loop constructs such as for ... of and forEach() can be used to loop through Map:

WeakMaps

As with WeakSets, WeakMaps is different from regular Map objects. WeakMaps only accepts objects as keys, cannot be repeated and has no clear() .

As with WeakSets, setting the WeakMap object’s key to null will implicitly collect that index:

Summary

In this article we have learned about Set and Map and their usage. This utility provides an easier and more efficient way to structure and access data in certain use cases.

References

https://scotch.io/tutorials/exploring-sets-and-maps-in-javascript https://javascript.info/map-set https://en.wikipedia.org/wiki/JavaScript

My article is over See you in the following articles: