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.

Note

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

Examples

Create a new Map and add elements with Map.set()

// Create an empty Map
const fruits = new Map();

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

Try it Yourself »

Pass an Array to the new Map() constructor:

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

Try it Yourself »

Adding Map Values

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

Example

fruits.set("mangos", 100);

Try it Yourself »

Changing Map Values

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

Example

fruits.set("apples", 200);

Try it Yourself »

The get() Method

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

Example

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

Try it Yourself »

Maps are Objects

Example

// Returns object:
typeof fruits;

Try it Yourself »

instanceof Map returns true:

Example

// Returns true:
fruits instanceof Map;

Try it Yourself »

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