Loading Now
×

Advance . Map in javascript es6

Advance . Map in javascript es6

In JavaScript’s ES6, apart from some syntactic sugar, we haven’t seen anything significantly new so far. But now we are going to discuss something entirely new. Yes, this feature has been added completely new in ES6. It is called Map.

Don’t confuse this Map with the map method of arrays. The map method is an array method, but the Map we will discuss today is a data structure. This new data structure has been introduced to developers with the ES6 version of JavaScript. However, it is somewhat different from the object-type data structure. It has its own methods and characteristics. The Map can hold any type of data such as functions, booleans, integers, characters, and strings.

#### Creating a Map

Creating a new Map: If we want to create a new Map data structure, we can do it like this:

“`javascript

const zawad = new Map();

“`

That’s it! We have created a map named `zawad`. Now, a map contains keys and values. If we want to add new values to this map:

“`javascript

zawad.set(‘fullName’, ‘Zawad Ahmed’);

“`

To access any data from the map, we have another method. For example, to get the `fullName` from `zawad`:

“`javascript

zawad.get(‘fullName’);  // “Zawad Ahmed”

“`

We can also check if a specific value exists in our map:

“`javascript

zawad.has(‘fullName’);  // true

“`

Certainly! Here is the translation of the provided text into English with corrected JavaScript code:

Since our map has a key named `fullName`, it will return true:

“`javascript

zawad.has(‘fullName’); // true

“`

Now, if there is no such key, it will return false:

“`javascript

zawad.has(‘something’); // false

“`

We can also delete such a key-value pair from the map. First, let’s add a new key-value pair:

“`javascript

zawad.set(‘toBeRemoved’, ‘willBeRemoved’);

“`

Now, if we want to check if the new key-value pair has been added to the map:

“`javascript

zawad.has(‘toBeRemoved’); // true

“`

Now, we want to delete this `toBeRemoved` key:

“`javascript

zawad.delete(‘toBeRemoved’);

“`

Done! It has been deleted. Now if we check whether `toBeRemoved` exists:

“`javascript

zawad.has(‘toBeRemoved’); // false

“`

Because we just deleted it from our map.

Here is the translated version of the given text:

Now, if we want, we can clear the entire `zawad` map:

“`javascript

zawad.clear();

“`

Now if we check, we won’t find anything inside `zawad`:

“`javascript

console.log(zawad);

// Output: Map(0) {}

“`

Assume we have a map with a few elements like below:

“`javascript

const favorite = new Map();

“`

Now we will put some elements inside it:

“`javascript

favorite.set(‘name’, ‘Zonayed Ahmed’);

favorite.set(‘job’, ‘student’);

favorite.set(‘color’, ‘blue’);

favorite.set(‘os’, ‘ubuntu’);

favorite.set(‘mobileos’, ‘android’);

“`

Now, you will get all the data inside the `favorite` map:

“`javascript

console.log(favorite);

// Output: Map(5) {“name” => “Zonayed Ahmed”, “job” => “student”, “color” => “blue”, “os” => “ubuntu”, “mobileos” => “android”}

“`

If we want, we can also find out how many elements are inside the map using the `size` property of the map:

“`javascript

Favorite.size;

“`

Sure! Here’s the translated text:

Now we can even loop through a map:

“`javascript

favorite.forEach((value, key) => console.log(`Key is: ${key} and the value is: ${value}`));

“`

In the `forEach` method, we usually get the index number as the second argument, but in the case of a map, we get the map’s key:

“`javascript

favorite.forEach((value, key) => console.log(`Key is: ${key} and the value is: ${value}`));

// Output:

// Key is: name and the value is: Zonayed Ahmed

// Key is: job and the value is: student

// Key is: color and the value is: blue

// Key is: os and the value is: ubuntu

// Key is: mobileos and the value is: android

“`

Similarly, we can also loop using `for…of`:

“`javascript

for (let [key, value] of favorite.entries()) {

    console.log(`Key is: ${key} and the value is: ${value}`);

}

// Output:

// Key is: name and the value is: Zonayed Ahmed

// Key is: job and the value is: student

// Key is: color and the value is: blue

// Key is: os and the value is: ubuntu

// Key is: mobileos and the value is: android

“`

With the map data structure:

1. We can easily loop through it.

2. We can get the size of the map.

3. Lastly, adding or deleting data from a map is very easy.

However, remember that since this is quite new, support for this data structure is limited. So, be sure to check if it is supported before using it anywhere.

Post Comment