JavaScript Map Methods

The new Map() Method

You can create a map by passing an array to the new Map() constructor:

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

Map.get()

You get the value of a key in a map with the get() method

fruits.get("apples");

Map.set()

You can add elements to a map with the set() method:

// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

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

fruits.set("apples", 500);

Map.size

The size property returns the number of elements in a map:

fruits.size;

Map.delete()

The delete() method removes a map element:

fruits.delete("apples");

Map.clear()

The clear() method removes all the elements from a map:

fruits.clear();

Map.has()

The has() method returns true if a key exists in a map:

fruits.has("apples");

Try This:

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

Map.forEach()

The forEach() method invokes a callback for each key/value pair in a map:

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

Map.entries()

The entries() method returns an iterator object with the [key,values] in a map:

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

Map.keys()

The keys() method returns an iterator object with the keys in a map:

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

Map.values()

The values() method returns an iterator object with the values in a map:

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

You can use the values() method to sum the values in a map:

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

Objects as Keys

// 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);

Remember: The key is an object (apples), not a string (“apples”):

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

JavaScript Map.groupBy()

ES2024 added the Map.groupBy() method to JavaScript.

The Map.groupBy() method groups elements of an object according to string values returned from a callback function.

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

// Create an Array
const fruits = [
  {name:"apples", quantity:300},
  {name:"bananas", quantity:500},
  {name:"oranges", quantity:200},
  {name:"kiwi", quantity:150}
];

// Callback function to Group Elements
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}

// Group by Quantity
const result = Map.groupBy(fruits, myCallback);

Browser Support

Map.groupby() is an ES2024 feature.

It is supported in new browsers since March 2024:

Object.groupBy() vs Map.groupBy()

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

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

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