Flash cards
Review the key moves
What is the main idea behind JavaScript Maps?
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?
Put the learning moves in the order that makes the concept easiest to apply.
The Map Object
A JavaScript Map is an object that can store collections of key-value pairs, similar to a dictionary in other programming languages.
Maps differ from standard objects in that keys can be of any data type .
Map Characteristics
- Key Types Map keys can be any type (strings, numbers, objects, etc).
- Insertion Order The Map remembers the original insertion order of the keys.
- Size The number of items in a Map is easily retrieved using the size property.
- Performance Maps are optimized for frequent additions and removals of key-value pairs.
- Iteration Maps are iterable, allowing for direct use of for...of loops or methods like forEach().
- Iteration Order The original order is preserved during iteration.
Maps are similar to both Objects (unique key/value collection) and Arrays (ordered values collection).
But if you look close, Maps are most similar to Objects.
How to Create a Map
You create a JavaScript Map by
- Create a new Map and add elements with Map.set()
- Passing an existing Array to the new Map() constructor
Map.set()Adding Map Values
You can add elements to a Map with the set() method:
fruits.set("mangos", 100);Changing Map Values
The set() method can also be used to change existing Map values:
fruits.set("apples", 200);The get() Method
The get() method gets the value of a key in a Map:
fruits.get("apples"); // Returns 500Maps are Objects
// Returns object:
typeof fruits;instanceof Map returns true:
// Returns true:
fruits instanceof Map;JavaScript Objects vs 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 |
Learn More
JavaScript Map Methods
JavaScript Weak Maps
JavaScript Map Reference
JavaScript Sets
Browser Support
Map is an ES6 feature .
ES6 is fully supported in all modern browsers since June 2017:
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
|---|---|---|---|---|
| May 2016 | Apr 2017 | Jun 2017 | Sep 2016 | Jun 2016 |