How to Use JavaScripts Map()

JavaScript’s Map object is a collection of key/value pairs that can be used to store and retrieve data. It is similar to an object, but it has some differences that make it more suitable for certain tasks.

Here is a detailed guide on how to use the Map object in JavaScript:

Creating a Map

To create a new Map, you can use the new keyword and the Map constructor:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map();

[/dm_code_snippet]

You can also create a Map and populate it with initial key/value pairs by passing an iterable object (such as an array) to the Map constructor:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

[/dm_code_snippet]

Setting and Getting Values

To set a value in a Map, you can use the set() method, which takes a key and a value as arguments:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

map.set('key', 'value');

[/dm_code_snippet]

To retrieve a value from a Map, you can use the get() method, which takes a key as an argument:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const value = map.get('key');

[/dm_code_snippet]

Checking for the Presence of a Key or Value

To check if a Map contains a particular key, you can use the has() method, which takes a key as an argument:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const hasKey = map.has('key');

[/dm_code_snippet]

To check if a Map contains a particular value, you can use the values() method, which returns an iterable object containing the values in the Map. You can then use the includes() method to check if the iterable object contains the value you are looking for:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const hasValue = [...map.values()].includes('value');

[/dm_code_snippet]

Iterating Over a Map

There are several ways to iterate over the key/value pairs in a Map. One option is to use the forEach() method, which takes a callback function as an argument. The callback function will be called for each key/value pair, and it will receive the value, the key, and the Map object as arguments:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

map.forEach((value, key, map) => {
  console.log(key, value);
});

[/dm_code_snippet]

Another option is to use a for-of loop, which allows you to iterate over the key/value pairs in the Map:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

for (const [key, value] of map) {
  console.log(key, value);
}

[/dm_code_snippet]

You can also get an iterable object containing the keys or values in the Map using the keys() and values() methods, respectively. You can then use a for-of loop to iterate over the iterable object:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

for (const key of map.keys()) {
  console.log(key);
}

for (const value of map.values()) {
  console.log(value);
}

[/dm_code_snippet]

Other Map Methods

Here are some other useful Map methods:

• clear(): Removes all key/value pairs from the Map.

set(key, value)

The set() method adds a new key/value pair to the Map, or updates the value of an existing key. It takes a key and a value as arguments, and returns the Map object itself, allowing you to chain multiple set() calls together.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map();

map.set('key1', 'value1');
// Map { 'key1' => 'value1' }

map.set('key1', 'new value');
// Map { 'key1' => 'new value' }

map.set('key2', 'value2').set('key3', 'value3');
// Map { 'key1' => 'new value', 'key2' => 'value2', 'key3' => 'value3' }

[/dm_code_snippet]

get(key)

The get() method retrieves the value for a given key from the Map. It takes a key as an argument, and returns the value for that key, or undefined if the key does not exist in the Map.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

map.get('key1'); // 'value1'
map.get('key2'); // 'value2'
map.get('key3'); // undefined

[/dm_code_snippet]

has(key)

The has() method checks if a given key is present in the Map. It takes a key as an argument, and returns a boolean indicating whether the key exists in the Map.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

map.has('key1'); // true
map.has('key2'); // true
map.has('key3'); // false

[/dm_code_snippet]

delete(key)

The delete() method removes a key/value pair from the Map. It takes a key as an argument, and returns a boolean indicating whether the key/value pair was successfully removed.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

map.delete('key1'); // true
map.delete('key1'); // false

console.log(map); // Map { 'key2' => 'value2' }

[/dm_code_snippet]

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

clear()
The clear() method removes all key/value pairs from the Map. It does not take any arguments and does not return any value.

[/dm_code_snippet]

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

map.clear();

console.log(map); // Map {}

[/dm_code_snippet]

forEach(callback)

The forEach() method executes a callback function for each key/value pair in the Map. It takes a callback function as an argument, which will be called for each key/value pair with the following arguments:

• value: The value for the current key/value pair.
• key: The key for the current key/value pair.
• map: The Map object being iterated over.

The forEach() method does not return any value.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

map.forEach((value, key, map) => {
  console.log(key, value);
});

// Output:
// key1 value1
// key2 value2

[/dm_code_snippet]

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

keys()
The keys() method returns an iterable object containing the keys in the Map. You can use a for-of loop or the Array.from() method to iterate over the keys in the Map.

[/dm_code_snippet]

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

for (const key of map.keys()) {
  console.log(key);
}

// Output:
// key1
// key2

console.log(Array.from(map.keys())); // ['key1', 'key2']

[/dm_code_snippet]

values()

The values() method returns an iterable object containing the values in the Map. You can use a for-of loop or the Array.from() method to iterate over the values in the Map.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

for (const value of map.values()) {
  console.log(value);
}

// Output:
// value1
// value2

console.log(Array.from(map.values())); // ['value1', 'value2']

[/dm_code_snippet]

entries()

The entries() method returns an iterable object containing the key/value pairs in the Map. You can use a for-of loop or the Array.from() method to iterate over the key/value pairs in the Map.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map([  ['key1', 'value1'],
  ['key2', 'value2']
]);

for (const [key, value] of map.entries()) {
  console.log(key, value);
}

// Output:
// key1 value1
// key2 value2

console.log(Array.from(map.entries())); // [['key1', 'value1'], ['key2', 'value2']]

[/dm_code_snippet]

size

The size property of a Map object returns the number of key/value pairs in the Map.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

console.log(map.size); // 2

map.set('key3', 'value3');

console.log(map.size); // 3

map.delete('key3');

console.log(map.size); // 2

[/dm_code_snippet]

Map.prototype.toString()

The toString() method of the Map object returns a string representation of the Map.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

console.log(map.toString()); // '[object Map]'

[/dm_code_snippet]

Map.prototype[Symbol.iterator]()

The Map object has a built-in iterator that allows you to iterate over its key/value pairs using a for-of loop. The iterator returns an array containing the key and value for each key/value pair in the Map.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

for (const [key, value] of map) {
  console.log(key, value);
}

// Output:
// key1 value1
// key2 value2

[/dm_code_snippet]

We hope this guide has been helpful in understanding how to use the Map object in JavaScript. If you have any further questions, please don’t hesitate to discuss them in the comment section.