Flash cards
Review the key moves
What is the main idea behind JavaScript Map Methods?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
// ___ a MapPut the learning moves in the order that makes the concept easiest to apply.
The new Map() Method
You can create a map by passing an array to the new Map() constructor:
Example
// 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:
Example
// 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");Map.forEach()
The forEach() method invokes a callback for each key/value pair in a map:
Example
// 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:
Example
// 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:
Example
// 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:
Example
// 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:
Example
// Sum all values
let total = 0;
for (const x of fruits.values()) {
total += x;
}Objects as Keys
Being able to use objects as keys is an important Map feature.
Example
// 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 undefinedJavaScript 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.
Example
// 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 ECMAScript 2024 feature.
JavaScript 2024 is supported in new browsers since March 2024 :
| Chrome 117 | Edge 117 | Firefox 119 | Safari 17.4 | Opera 103 |
|---|---|---|---|---|
| Sep 2023 | Sep 2023 | Oct 2023 | Okt 2024 | May 2023 |
Warning
ES2024 features are relatively new.
Older browsers may need an alternative code (Polyfill)
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.
Learn More
JavaScript Maps
JavaScript Weak Maps
JavaScript Map Reference
JavaScript Sets