Maps in JavaScript
In JavaScript, a Map
is a built-in object that allows you to store key-value pairs. It is often used when you want to store a collection of key-value pairs and access them by their keys.
Creating a Map
You can create a new Map
by using the new
keyword followed by the Map
constructor. You can pass an iterable
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
console.log(map); // Map { 'name' => 'John', 'age' => 23, 'person' => { name: 'John', age: 23, greet: [Function: greet] } }
- The
Map
constructor creates a newMap
object. - You can pass an iterable (such as an array of key-value pairs) to the
Map
constructor to initialize the map with the key-value pairs from the iterable. - The
Map
object stores key-value pairs, so any duplicate keys will be overwritten. - The order of elements in a
Map
is guaranteed to be the same as the order of insertion. - The
Map
object is iterable, so you can use it in afor...of
loop to iterate over its elements. - The
Map
object has asize
property that returns the number of key-value pairs in the map. - The
Map
object has methods to add, delete, and check for the presence of key-value pairs. - The
Map
object does not have methods to access key-value pairs by index, as it does not maintain the order of elements. - The
Map
object can store any type of key or value, including objects, functions, and other maps. - The
Map
object can store key-value pairs with the same key, as it uses the===
operator to compare keys. - The
Map
object can store key-value pairs withNaN
as the key, as it uses the===
operator to compare keys.
Adding Key-Value Pairs to a Map
You can add key-value pairs to a Map
by using the set
method.
const map = new Map();
map.set("name", "John");
map.set("age", 23);
map.set("person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
});
console.log(map); // Map { 'name' => 'John', 'age' => 23, 'person' => { name: 'John', age: 23, greet: [Function: greet] } }
In this example, the set
method is used to add key-value pairs to the map. The first argument to the set
method is the key, and the second argument is the value.
- The
set
method is used to add a new key-value pair to the map. - If the key is already present in the map, its value will be updated with the new value.
- The
set
method returns theMap
object, so you can chain multipleset
calls together. - The
set
method can store any type of key or value, including objects, functions, and other maps. - The
set
method can store key-value pairs with the same key, as it uses the===
operator to compare keys. - The
set
method can store key-value pairs withNaN
/undefined
as the key, as it uses the===
operator to compare keys.
Deleting Key-Value Pairs from a Map
You can delete key-value pairs from a Map
by using the delete
method.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
map.delete("age");
console.log(map); // Map { 'name' => 'John', 'person' => { name: 'John', age: 23, greet: [Function: greet] } }
In this example, the delete
method is used to remove the key-value pair with the key "age"
from the map. The delete
method returns true
if the key-value pair is removed, and false
otherwise.
- The
delete
method is used to remove a key-value pair from the map. - If the key is present in the map, the key-value pair will be removed, and the method will return
true
. - If the key is not present in the map, the method will return
false
. - The
delete
method does not throw an error if the key is not present in the map. - The
delete
method does not return the removed key-value pair. - The
delete
method is chainable, so you can remove multiple key-value pairs from the map in a single statement. - The
delete
method can be used to remove key-value pairs withNaN
/undefined
as the key, as it uses the===
operator to compare keys. - The
delete
method can be used to remove key-value pairs with the same key, as it uses the===
operator to compare keys.
Checking for the Presence of a Key in a Map
You can check if a key is present in a Map
by using the has
method.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
console.log(map.has("age")); // true
In this example, the has
method is used to check if the key "age"
is present in the map. If the key is present, the method will return true
; otherwise, it will return false
.
- The
has
method is used to check if a key is present in the map. - If the key is present in the map, the method will return
true
. - If the key is not present in the map, the method will return
false
. - The
has
method does not throw an error if the key is not present in the map. - The
has
method does not return the key itself. - The
has
method is often used to check if a key is present in the map before adding or deleting it. - The
has
method can be used to check for the presence ofNaN
/undefined
as the key, as it uses the===
operator to compare keys. - The
has
method can be used to check for the presence of the same key, as it uses the===
operator to compare keys. - The
has
method can be used to check for the presence of a key with a value ofundefined
.
Iterating Over a Map
You can iterate over the key-value pairs of a Map
by using a for...of
loop.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
for (const [key, value] of map) {
console.log(key + ": " + value);
}
The for...of
loop is used to iterate over the key-value pairs of the map. In each iteration, the value of the current key-value pair is assigned to the loop variable [key, value]
, and the loop body is executed.
The output of the above example will be:
name: John
age: 23
person: [object Object]
In each iteration, the key and value of the current key-value pair are printed to the console.
Iterating Over the Keys of a Map
You can iterate over the keys of a Map
by using the keys
method.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
for (const key of map.keys()) {
console.log(key);
}
The keys
method is used to iterate over the keys of the map. In each iteration, the value of the current key is assigned to the loop variable key
, and the loop body is executed.
The output of the above example will be:
name
age
person
In each iteration, the key of the current key-value pair is printed to the console.
Iterating Over the Values of a Map
You can iterate over the values of a Map
by using the values
method.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
for (const value of map.values()) {
console.log(value);
}
The values
method is used to iterate over the values of the map. In each iteration, the value of the current key-value pair is assigned to the loop variable value
, and the loop body is executed.
The output of the above example will be:
John
23
[object Object]
In each iteration, the value of the current key-value pair is printed to the console.
Converting a Map to an Array
You can convert a Map
to an array by using the Array.from
method or the spread operator (...
).
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
const array = Array.from(map);
console.log(array); // [ [ 'name', 'John' ], [ 'age', 23 ], [ 'person', { name: 'John', age: 23, greet: [Function: greet] } ] ]
- The
Array.from
method is used to create a new array from an iterable (such as aMap
). - The
Array.from
method returns a new array that contains the key-value pairs of the map. - The spread operator (
...
) can also be used to create a new array from an iterable. - The spread operator (
...
) returns a new array that contains the key-value pairs of the map. - The
Array.from
method and the spread operator (...
) can be used to convert aMap
to an array of key-value pairs. - The
Array.from
method and the spread operator (...
) can be used to convert aMap
to an array of keys or values.
Using the Map Constructor
You can use the Map
constructor to create an empty Map
and then add key-value pairs to it.
const map = new Map();
map.set("name", "John");
map.set("age", 23);
map.set("person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
});
console.log(map); // Map { 'name' => 'John', 'age' => 23, 'person' => { name: 'John', age: 23, greet: [Function: greet] } }
The Map
constructor creates a new empty Map
object. You can then use the set
method to add key-value pairs to the map. The Map
object stores key-value pairs, so any duplicate keys will be overwritten.
Using the Spread Operator
You can use the spread operator (...
) to create a new Map
from an existing Map
.
const map1 = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
const map2 = new Map([...map1]);
console.log(map2); // Map { 'name' => 'John', 'age' => 23, 'person' => { name: 'John', age: 23, greet: [Function: greet] } }
The spread operator (...
) is used to create a new Map
from an existing Map
. The new Map
contains the key-value pairs of the existing Map
.
Using the forEach
Method
You can use the forEach
method to iterate over the key-value pairs of a Map
.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
map.forEach((value, key) => {
console.log(key + ": " + value);
});
The forEach
method is used to iterate over the key-value pairs of the map. In each iteration, the value of the current key-value pair is assigned to the loop variable value
, and the key is assigned to the loop variable key
. The loop body is executed for each key-value pair.
The output of the above example will be:
name: John
age: 23
person: [object Object]
In each iteration, the key and value of the current key-value pair are printed to the console.
Using the clear
Method
You can use the clear
method to remove all key-value pairs from a Map
.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
map.clear();
console.log(map); // Map {}
The clear
method is used to remove all key-value pairs from the map. After calling the clear
method, the map will be empty.
The clear
method does not return any value.
The clear
method can be used to remove all key-value pairs from the map in a single statement.
Using the size
Property
You can use the size
property to get the number of key-value pairs in a Map
.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
console.log(map.size); // 3
The size
property returns the number of key-value pairs in the map. It can be used to get the size of the map in a single statement.
The size
property is read-only, so you cannot change its value.
The size
property can be used to get the number of key-value pairs in the map.
Using the entries
Method
You can use the entries
method to get an iterator that contains the key-value pairs of a Map
.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
const iterator = map.entries();
console.log(iterator.next().value); // [ 'name', 'John' ]
console.log(iterator.next().value); // [ 'age', 23 ]
console.log(iterator.next().value); // [ 'person', { name: 'John', age: 23, greet: [Function: greet] } ]
The entries
method returns an iterator that contains the key-value pairs of the map. You can use the next
method of the iterator to get the next key-value pair.
The entries
method can be used to get an iterator that contains the key-value pairs of the map.
The entries
method can be used to iterate over the key-value pairs of the map.
Using the keys
Method
You can use the keys
method to get an iterator that contains the keys of a Map
.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
const iterator = map.keys();
console.log(iterator.next().value); // name
console.log(iterator.next().value); // age
console.log(iterator.next().value); // person
The keys
method returns an iterator that contains the keys of the map. You can use the next
method of the iterator to get the next key.
The keys
method can be used to get an iterator that contains the keys of the map.
The keys
method can be used to iterate over the keys of the map.
Using the values
Method
You can use the values
method to get an iterator that contains the values of a Map
.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
const iterator = map.values();
console.log(iterator.next().value); // John
console.log(iterator.next().value); // 23
console.log(iterator.next().value); // { name: 'John', age: 23, greet: [Function: greet] }
The values
method returns an iterator that contains the values of the map. You can use the next
method of the iterator to get the next value.
The values
method can be used to get an iterator that contains the values of the map.
The values
method can be used to iterate over the values of the map.
Using the Symbol.iterator
Property
You can use the Symbol.iterator
property to get an iterator that contains the key-value pairs of a Map
.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
const iterator = map[Symbol.iterator]();
console.log(iterator.next().value); // [ 'name', 'John' ]
console.log(iterator.next().value); // [ 'age', 23 ]
console.log(iterator.next().value); // [ 'person', { name: 'John', age: 23, greet: [Function: greet] } ]
The Symbol.iterator
property returns an iterator that contains the key-value pairs of the map. You can use the next
method of the iterator to get the next key-value pair.
The Symbol.iterator
property can be used to get an iterator that contains the key-value pairs of the map.
The Symbol.iterator
property can be used to iterate over the key-value pairs of the map.
Using the for...of
Loop
You can use a for...of
loop to iterate over the key-value pairs of a Map
.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
for (const [key, value] of map) {
console.log(key + ": " + value);
}
The for...of
loop is used to iterate over the key-value pairs of the map. In each iteration, the value of the current key-value pair is assigned to the loop variable [key, value]
, and the loop body is executed.
The output of the above example will be:
name: John
age: 23
person: [object Object]
In each iteration, the key and value of the current key-value pair are printed to the console.
Using the for...of
Loop with the entries
Method
You can use a for...of
loop to iterate over the key-value pairs of a Map
by using the entries
method.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
for (const [key, value] of map.entries()) {
console.log(key + ": " + value);
}
The for...of
loop is used to iterate over the key-value pairs of the map by using the entries
method. In each iteration, the value of the current key-value pair is assigned to the loop variable [key, value]
, and the loop body is executed.
The output of the above example will be:
name: John
age: 23
person: [object Object]
In each iteration, the key and value of the current key-value pair are printed to the console.
Using the for...of
Loop with the keys
Method
You can use a for...of
loop to iterate over the keys of a Map
by using the keys
method.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
for (const key of map.keys()) {
console.log(key);
}
The for...of
loop is used to iterate over the keys of the map by using the keys
method. In each iteration, the value of the current key is assigned to the loop variable key
, and the loop body is executed.
The output of the above example will be:
name
age
person
In each iteration, the key of the current key-value pair is printed to the console.
Using the for...of
Loop with the values
Method
You can use a for...of
loop to iterate over the values of a Map
by using the values
method.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
for (const value of map.values()) {
console.log(value);
}
The for...of
loop is used to iterate over the values of the map by using the values
method. In each iteration, the value of the current key-value pair is assigned to the loop variable value
, and the loop body is executed.
The output of the above example will be:
John
23
[object Object]
In each iteration, the value of the current key-value pair is printed to the console.
Using the for...in
Loop
You can use a for...in
loop to iterate over the keys of a Map
.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
for (const key in map) {
console.log(key);
}
The for...in
loop is used to iterate over the keys of the map. In each iteration, the value of the current key is assigned to the loop variable key
, and the loop body is executed.
The output of the above example will be:
name
age
person
In each iteration, the key of the current key-value pair is printed to the console.
Using the hasOwnProperty
Method
To check if the key is a direct property of the map and not inherited from its prototype chain, you can use the hasOwnProperty
method. Here's an example:
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
for (const key in map) {
if (map.hasOwnProperty(key)) {
console.log(key);
}
}
In this example, the hasOwnProperty
method is used to check if the key is a direct property of the map. If it is, the key is printed to the console.
The output of the above example will be:
name
age
person
In each iteration, the key is checked if it is a direct property of the map. If it is, the key is printed to the console.
Using the Array.from
Method
You can use the Array.from
method to convert a Map
to an array of key-value pairs.
const map = new Map([
["name", "John"],
["age", 23],
["person", {
name: "John",
age: 23,
greet: function () {
console.log(
"Hello, I am " + this.name + " and I am " + this.age + " years old."
);
},
}],
]);
const array = Array.from(map);
console.log(array); // [ [ 'name', 'John' ], [ 'age', 23 ], [ 'person', { name: 'John', age: 23, greet: [Function: greet] } ] ]
The Array.from
method is used to create a new array from the map. The new array contains the key-value pairs of the map.
The Array.from
method can be used to convert a Map
to an array of key-value pairs.
The Array.from
method can be used to convert a Map
to an array of keys or values.
Why Use Maps?
Maps are often used when you want to store a collection of key-value pairs and access them by their keys. They are more flexible than objects, as they can store any type of key or value, including objects, functions, and other maps. They can also store key-value pairs with the same key, as they use the ===
operator to compare keys.
Benefits of Using Maps
- Maps are iterable, so you can use them in a
for...of
loop to iterate over their elements. - Maps have a
size
property that returns the number of key-value pairs in the map. - Maps have methods to add, delete, and check for the presence of key-value pairs.
- Maps do not have methods to access key-value pairs by index, as they do not maintain the order of elements.
- Maps can store any type of key or value, including objects, functions, and other maps.
- Maps can store key-value pairs with the same key, as they use the
===
operator to compare keys. - Maps can store key-value pairs with
NaN
as the key, as they use the===
operator to compare keys. - Maps can store key-value pairs with
undefined
as the key, as they use the===
operator to compare keys. - Maps can store key-value pairs with
null
as the key, as they use the===
operator to compare keys. - Maps can store key-value pairs with
0
as the key, as they use the===
operator to compare keys. - Maps can store key-value pairs with
false
as the key, as they use the===
operator to compare keys. - Maps can store key-value pairs with an empty string as the key, as they use the
===
operator to compare keys.
When to Use Maps
- Use maps when you want to store a collection of key-value pairs and access them by their keys.
- Use maps when you want to store key-value pairs with the same key, as maps can store duplicate keys.
- Use maps when you want to store key-value pairs with
NaN
as the key, as maps can storeNaN
as the key. - Use maps when you want to store key-value pairs with
undefined
as the key, as maps can storeundefined
as the key. - Use maps when you want to store key-value pairs with
null
as the key, as maps can storenull
as the key. - Use maps when you want to store key-value pairs with
0
as the key, as maps can store0
as the key. - Use maps when you want to store key-value pairs with
false
as the key, as maps can storefalse
as the key.
When Not to Use Maps
- Do not use maps when you want to access key-value pairs by index, as maps do not maintain the order of elements.
- Do not use maps when you want to store key-value pairs with the same key, as maps will overwrite the existing key-value pair.
- Do not use maps when you want to store key-value pairs with
NaN
as the key, as maps will treatNaN
as the same key. - Do not use maps when you want to store key-value pairs with
undefined
as the key, as maps will treatundefined
as the same key. - Do not use maps when you want to store key-value pairs with
null
as the key, as maps will treatnull
as the same key. - Do not use maps when you want to store key-value pairs with
0
as the key, as maps will treat0
as the same key. - Do not use maps when you want to store key-value pairs with
false
as the key, as maps will treatfalse
as the same key.
Summary
In this tutorial, we learned about maps in JavaScript. We learned how to use maps to store key-value pairs in JavaScript. We also learned how to add, delete, and check for the presence of key-value pairs in a map. Finally, we learned how to iterate over the key-value pairs, keys, and values of a map.