JavaScript Maps

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.

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

Examples

// Create an empty Map

const fruits = new Map();

// Set Map Values

fruits.set("apples", 500);

fruits.set("bananas", 300);

fruits.set("oranges", 200);

Adding Map Values

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

Example

fruits.set("mangos", 100);

Changing Map Values

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

Example

fruits.set("apples", 200);

The get() Method

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

Example

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

Maps are Objects

Example

// Returns object:

typeof fruits;

instanceof Map returns true:

Example

// Returns true:

fruits instanceof Map;

JavaScript Objects vs Maps

Differences between JavaScript Objects and Maps:

Browser Support

Map is an ES6 feature.

ES6 is fully supported in all modern browsers since June 2017: