JavaScript Map Methods

new Map() method

You can pass an array to the new Map() Constructor to create Map:

method

// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Try It Yourself

Map.get()

You can use get() The method gets the value of a key in the Map:

method

fruits.get("apples");

Try It Yourself

Map.set()

You can use set() The method adds elements to the Map:

method

// Create a Map
const fruits = new Map();
// Set Map values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Try It Yourself

set() The method can also be used to change existing Map values:

method

fruits.set("apples", 500);

Try It Yourself

Map.size

size The property returns the number of elements in the Map:

method

fruits.size;

Try It Yourself

Map.delete()

delete() The method removes one element from the Map:

method

fruits.delete("apples");

Try It Yourself

Map.clear()

clear() The method removes all elements from the Map:

method

fruits.clear();

Try It Yourself

Map.has()

If a key exists in the Map:has() The method returns true:

method

fruits.has("apples");

Try It Yourself

Try the following code:

fruits.delete("apples");
fruits.has("apples");

Try It Yourself

Map.forEach()

forEach() The method calls the callback function for each key-value pair in the Map:

method

// List all entries
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

Try It Yourself

Map.entries()

entries() The method returns an array containing the [key, value] The iterator object:

method

// List all entries
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Try It Yourself

Map.keys()

keys() The method returns an iterator object containing the keys of the Map:

method

// List all keys
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

Try It Yourself

Map.values()}

values() method returns an iterator object containing the values in the Map:

method

// List all values
let text = "";
for (const x of fruits.values()) {
  text += x;
}

Try It Yourself

You can use values() method sums the values in the Map:

method

// Sum all values
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Try It Yourself

Object as key

Hint:The ability to use objects as keys is an important feature of Map.

method

// Create objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a Map
const fruits = new Map();
// Add new elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Try It Yourself

Note:The key is the object (apples), not the string ("apples"):

method

fruits.get("apples"); // Returns undefined

Try It Yourself

JavaScript Map.groupBy()

ES2024 added to JavaScript Map.groupBy() method.

Map.groupBy() method groups the elements of the object based on the string value returned by the callback function.

Map.groupBy() does not change the original object.

method

// Create an array
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// Callback function for grouping
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// Group by quantity
const result = Map.groupBy(fruits, myCallback);

Try It Yourself

Browser Support

Map.groupBy() It is an ES2024 feature.

Starting from March 2024, all new browsers support this feature:

The difference between Object.groupBy() and Map.groupBy()

Object.groupBy() and Map.groupBy() The difference lies in:

Object.groupBy() Group elements into a JavaScript object.

Map.groupBy() Group elements into a Map object.

Complete Map Reference Manual

For a complete reference, please visit our:JavaScript Map Reference Manual.

This manual includes descriptions and examples of all Map properties and methods.