This site is mobile accessible. Press the "Tap Here" button to use a different font-size.
Smartphone icons created by Freepik - Flaticon
10.10 JS Object Maps
- A Map holds key-value pairs where the keys can be any datatype.
- A Map remembers the original insertion order of the keys.
- A Map has a property that represents the size of the map.
Map Methods
| Method | Description |
|---|---|
| new Map() | Creates a new Map object |
| set() | Sets the value for a key in a Map |
| get() | Gets the value for a key in a Map |
| clear() | Removes all the elements from a Map |
| delete() | Removes a Map element specified by a key |
| has() | Returns true if a key exists in a Map |
| forEach() | Invokes a callback for each key/value pair in a Map |
| entries() | Returns an iterator object with the [key, value] pairs in a Map |
| keys() | Returns an iterator object with the keys in a Map |
| values() | Returns an iterator object of the values in a Map |
| Property | Description |
|---|---|
| size | Returns the number of Map elements |
How to Create a Map
You can create a JavaScript Map by:
- Passing an Array to
- Create a Map and use
new Map()
You can create a Map by passing an Array to the constructor:
Example 1: JS Map Objects - new Map()
// Create a Map const fruits = new Map([ ["apples", 500], ["bananas", 300], ["oranges", 200] ]);
Map.set()
You can add elements to a Map with the method:
Example 2: JS Map Objects - Map.set() part 1
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
The method can also be used to change existing Map values:
Example 3: JS Map Objects - Map.set() part 2
fruits.set("apples", 500);
Map.get()
The method gets the value of a key in a Map:
Example 4: JS Map Objects - Map.get()
fruits.get("apples"); // Returns 500
Map.size
The property returns the number of elements in a Map:
Example 5: JS Map Objects - Map.size
fruits.size;
Map.delete()
The method removes a Map element:
Example 6: JS Map Objects - Map.delete()
fruits.delete("apples");
Map.clear()
The method removes all the elements from a Map:
Example 7: JS Map Objects - Map.clear()
fruits.clear();
Map.has()
The method returns true if a key exists in a Map:
Example 8: JS Maps using Map.has()
fruits.has("apples");
Try This:
fruits.delete("apples");
fruits.has("apples");
Maps are Objects
returns object:
Example 9: JS Map Objects - Map typeof
// Returns object: typeof fruits;
Map returns true:
Example 10: JS Map Objects - Map instanceof
// Returns true: fruits instanceof Map;
JavaScript Objects vs Maps
Differences between JavaScript Objects and Maps:
| Object | Map |
|---|---|
| Not directly iterable | Directly iterable |
| Do not have a size property | Have a size property |
| Keys must be Strings (or Symbols) | Keys can be any datatype |
| Keys are not well ordered | Keys are ordered by insertion |
| Have default keys | Do not have default keys |
Map.forEach()
The method invokes a callback for each key/value pair in a Map:
Example 11: JS Map Objects - Using Map.forEach()
// List all entries
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
Map.entries()
The method returns an iterator object with the [key,values] in a Map:
Example 12: JS Map Objects - Using Map.entries()
// List all entries
let text = "";
for (const x of fruits.entries()) {
text += x;
}
Map.keys()
The method returns an iterator object with the keys in a Map:
Example 13: JS Map Objects - Using Map.keys()
// List all keys
let text = "";
for (const x of fruits.keys()) {
text += x;
}
Map.values()
The method returns an iterator object with the values in a Map:
Example 14: JS Map Objects - Using Map.values() part 1
// List all values
let text = "";
for (const x of fruits.values()) {
text += x;
}
You can use the method to sum the values in a Map:
Example 14: JS Map Objects - Using Map.values() part 2
// 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 15: JS Map Objects - Objects as Keys part 1
// 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"):
Example 16: JS Map Objects - Objects as Keys part 2
fruits.get("apples"); // Returns undefined
Browser Support
JavaScript Maps are supported in all browsers, except Internet Explorer:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
Navigate this module
Eventually the navigation links, above, will be replaced by these (previous) and (next) buttons below.
JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon