AppDividend
Latest Code Tutorials

Javascript Map Object: The Complete Guide

0

Javascript Map object holds key-value pairs and remembers the original insertion order of the keys.

JavaScript Map Object

Map in JavaScript is a collection of keyed data elements, just like an Object. But the main difference is that the Map allows keys of any type. A Map object iterates its items in insertion order and using the for…of loop, and it returns an array of [key, value] for each iteration.

JavaScript Object is similar to Map, but there are some major differences s, which are the following.

JavaScript Objects vs. Maps

  1. An object in JavaScript has a prototype, so it contains default keys that could collide with your keys if you’re not careful. A Map does not include any keys by default. It only includes what is explicitly put into it.
  2. The keys of the Object must be either a String or a Symbol. A Map’s keys can be any value that includes functions, objects, or any primitive data types.
  3. The keys of the Object are not ordered. The keys in the Map are ordered. Therefore, the iterating over it, the Map object returns keys in order of insertion.
  4. The number of elements in an Object must be defined manually. The number of elements in the Map is easily retrieved from its size property.

How to define a Map in JavaScript

To define a map, use a new Map() constructor.

Syntax

new Map([iterator])

Here, an iterator is any iterable object whose values are stored as key, value pair.

If the parameter is not specified, then a map will be empty.

Return Value

It returns a new map object.

How to set Map Object Properties

To set Map Object properties, use the set() method. The correct usage for storing the data in a Map is through the set(key, value) function.

let data = new Map()

data.set('Krunal', { age: 27, education: "Engineer" });
console.log(data);

Output

Map(1) { 'Krunal' => { age: 27, education: 'Engineer' } }

The set() method sets the value for the key in the Map object. Returns the Map object.

Map Object methods

Map.clear()

The map.clear() method removes all key-value pairs from the Map object.

// app.js

let data = new Map()

data.set('Krunal', { age: 27, education: "Engineer" });
console.log(data);
data.clear();
console.log('After clear the map object');
console.log(data);

Output

Map(1) { 'Krunal' => { age: 27, education: 'Engineer' } }
After clear the map object
Map(0) {}

You can see that the clear() method removes the key-value pairs from the map object.

Map.delete(key)

The map.delete() function returns true if the item in the Map object existed and has been removed, or false if an item does not exist. If you use Map.prototype.has(key) afterward, then it will return false.

// app.js

let data = new Map()

data.set('Krunal', { age: 27, education: "Engineer" });
console.log(data);
data.delete('Krunal')
console.log('After delete the map key');
console.log(data);

Output

Map(1) { 'Krunal' => { age: 27, education: 'Engineer' } }
After delete the map key
Map(0) {}

You can see that we have removed the Krunal key, and there is nothing in there, so it returns the empty map. To clear the complete map, use the map.clear() method and to delete a specific item using its key, use map.delete() method.

Map.get()

The map.get() method returns the value associated with the key, or undefined if there is none.

// app.js

let data = new Map()

data.set('Krunal', { age: 27, education: "Engineer" });
console.log(data);
prop = data.get('Krunal')
console.log(prop);

Output

Map(1) { 'Krunal' => { age: 27, education: 'Engineer' } }
{ age: 27, education: 'Engineer' }

You can see that we got the value of the Krunal key using get() method.

Map.has()

The map.has() method returns the boolean asserting whether the value has been associated with the key in the Map object or not. If it is related to the key, then it will return true, otherwise, false.

let data = new Map()

data.set('Krunal', { age: 27, education: "Engineer" });
console.log(data);
prop = data.has('Krunal')
console.log(prop);

Output

Map(1) { 'Krunal' => { age: 27, education: 'Engineer' } }
true

As we can see that the data map has Krunal key, so it returned true. If we have gone for the Ankit key, then it will return false because it is not there.

Map.keys()

The map.keys() method returns a new Iterator object that contains the keys for each item in a Map object in insertion order.

// app.js

let data = new Map()

data.set('Krunal', { age: 27, education: "Engineer" });
console.log(data);
props = data.keys();
console.log(props);

Output

Map(1) { 'Krunal' => { age: 27, education: 'Engineer' } }
[Map Iterator] { 'Krunal' }

You can see that keys return an Iterator, an object that contains the key Krunal in the Map object in insertion order.

Map.values()

The values() method returns a new Iterator object that contains the values for each item in the Map object in the insertion order.

let data = new Map()

data.set('Krunal', { age: 27, education: "Engineer" });
console.log(data);
values = data.values();
console.log(values);

Output

Map(1) { 'Krunal' => { age: 27, education: 'Engineer' } }
[Map Iterator] { { age: 27, education: 'Engineer' } }

Map.forEach(callbackFn[, thisArg])

It calls callbackFn once for each key-value pair present in the Map object, in insertion order. If a thisArg parameter is provided to forEach, it will be used as this value for each callback.

// app.js

let data = new Map()

data.set('Krunal', { age: 27, education: "Engineer" });
data.forEach(x => console.log(x));

Output

{ age: 27, education: 'Engineer' }

If you want to iterate the Map Object, then use forEach() function.

Map.entries()

The map.entries() method returns the new Iterator object that contains the array of [key, value] for each item in the Map object in insertion order.

// app.js

let data = new Map()

data.set('Krunal', { age: 27, education: "Engineer" });
let iter = data.entries();

console.log(iter.next().value);

console.log(iter.next().value);

In our example, there is only one key which is Krunal.

Now, map.entries() function returns the new iterator object that contains an array of key, value pair.

Map.prototype[@@iterator]()

It returns a new Iterator object that contains the array of [key, value] for each item in the Map object in insertion order.

See the following code.

// app.js

let data = new Map()

data.set('Krunal', { age: 27, education: "Engineer" });
data.set('Ankit', { age: 25, education: "MCA" });
const iter = data[Symbol.iterator]();

for (const item of iter) {
  console.log(item);
}

Output

[ 'Krunal', { age: 27, education: 'Engineer' } ]
[ 'Ankit', { age: 25, education: 'MCA' } ]

Conclusion

You may be confused with the JavaScript map with the JavaScript object, but it is different. Both works in different data structures and both have different methods, as we have defined in the difference section.

That is it for JavaScript Map Object.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.