JavaScript Maps and Sets Explained For Beginners

JavaScript Maps and Sets Explained - This article we will look at some of the new data structures. ES6 Introduced Maps and Sets to JavaScript. Understand difference between JavaScript objects and Maps and Sets and Arrays.

Introduction

This is a short article about all the use of JavaScript Map and Set objects. Map and Set are the new data structures that were introduced in E6. This article will cover the explanation, real use case scenarios and reasons to use Map and Set over standard JavaScript Arrays and Objects.

Just a note…

Along with writing this article, I have also created a YouTube video!

You can check out all the extensions and a brief explanation of each one at this link —** JavaScript Map and Set Explained**.

JavaScript Set

First, we are going to create an exemplary array, containing numbers from 1 to 5, and then we are going to turn that array into a JavaScript Set.

const myArray = [ 1, 2, 3, 4, 5 ];const mySet = new Set(myArray);

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

So, what is Set used for?

First real use case scenario is using Set to remove all duplicate values from an array. We only need to create a new set and pass an array as a parameter, as we already did here.

Now, if we add duplicate values to our array and our set will automatically remove them for us. Let’s add some duplicate values:

const myArray = [ 1, 2, 3, 4, 5, 5, 5, 2 ];

And now, if we console.log() our array and our set:

console.log(myArray) // [ 1, 2, 3, 4, 5, 5, 5, 2 ];

console.log(mySet) // Set { 1, 2, 3, 4, 5 }

We can see that the array still contains all the values and our set only the values that are unique.

Another great thing to know is that we can easily turn that Set back to an array that now contains only unique values using the spread operator.

const uniqueArray = [...mySet]; // [ 1, 2, 3, 4, 5 ]

Set methods

Set has different methods that allow us to manipulate data inside of it easily.

**set.add() **— Using add we can well, add, any element into our set. As I previously mentioned, that can be a primitive value like a string or a number, or that can be an array or an object.

mySet.add(6);

mySet.add('6');

mySet.add({ channelName: 'JavaScript Mastery' });

mySet.add([ 1, 2, 3 ]);

**set.delete() **— Using delete we can simply delete desired element from a Set.

mySet.delete(5);

**set.clear() **— Using clear we can delete all the elements from a Set.

mySet.clear();

**set.has() **— Has is similar to array.includes(), we can simply check whether the set has the desired value.

console.log(mySet.has(5));

**set.size() **— Size returns a number of elements in a set.

console.log(mySet.size);

Differences between Arrays and Sets

An array is an ordered list of objects. You can access the elements of an array by referencing its integer position in the list:

myArray[3]

A set is an unordered pool of unique elements. Since it’s unordered, there is no integer index you can use to access specific elements of a set.

So, when is it better to use Set over an Array?

Firstly, Set is different than Array. It is not meant to replace Array entirely, but to provide additional support type to complete what Array is missing.

Since Set only contains distinct elements, it makes life much easier if we know in advance we want to avoid saving duplicate data to our structure.

JavaScript Map

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.

Map is a data structure that exists in other programming languages, JavaScript first introduced it in ES6, and they allow you to map arbitrary values to other values, most importantly you can use objects as keys.

You can define a map like this:

const myMap = new Map([ [key, value] ]);

The problem that Map solves

JavaScript object only supports one key object. If we add multiple key objects, it only remembers the last one, that’s why we need to use maps.

const myObject = {};

const a = {};

const b = {};

myObject[a] = 'a';

myObject[b] = 'b';

console.log(myObject); // { '[object Object]': 'b' }

Using Maps, we can do something like this following:

const a = {};

const b = {};

const myMap = new Map([ [ a, 'a'], [b, 'b'] ]);

console.log(myMap); <em>// Map { {} => 'a', {} => 'b' }</em>

As you can see, Maps can store multiple objects as keys.

Map methods

Map has different methods that allow us to manipulate data inside of it easily.

We can now delete all of this and start exploring different methods.

map.set() — Using set we can assign key value pairs of our Set.

myMap.set(key, value);

As mentioned above, keys can be primitive values or objects.

map.delete() — With delete we can simply delete desired element from a Map.

myMap.delete(5);

map.clear() — Using clear we can delete all the elements from a Map.

myMap.clear();

map.has() — With has we can simply check whether the set has the desired value.

console.log(myMap.has(5)); // true

map.size() — Size returns a number of elements in a set.

console.log(myMap.size); // 5

That’s it!

You made it all the way until the end! If you got stuck along the way, feel free to ask and leave feedback in the comments down below.

Learn More

In this video we will look at some of the new data structures.
ES6 Introduced Maps and Sets to JavaScript. Understand difference between JavaScript objects and Maps and Sets and Arrays.

#javascript #web-development