The Map object is a relatively new standard built-in object that holds [key, value] pairs in the order that they're inserted.

The keys and values in the Map object can be any value (both objects and primitive values are valid).

Syntax

new Map([iterable])

Parameters

iterable An Array or other iterable object whose elements are key-value pairs.

Example

const myMap = new Map();
myMap.set('foo', 1);
myMap.set('bar', 2);
myMap.set('baz', 3);

myMap.get('foo');   // returns 1
myMap.get('baz');   // returns 3
myMap.get('hihi');  // return undefined

myMap.size;   // 3

console.log(myMap); // Map { 'foo' => 1, 'bar' => 2, 'baz' => 3 }

It's easy to create a new Map from existing 2D arrays of key-value pairs:

const myArr = [['foo', 1], ['bar', 2], ['baz', 3]];
const arrMap = new Map(myArr);

console.log(arrMap); // Map { 'foo' => 1, 'bar' => 2, 'baz' => 3 }

You can also convert an object into a Map with the help of the Object.entries:

const myObj = {
  foo: 1,
  bar: 2,
  baz: 3
}
const objMap = new Map(Object.entries(myObj));

console.log(objMap); // Map { 'foo' => 1, 'bar' => 2, 'baz' => 3 }

Map.prototype.get

Returns the value of the specified key from a Map object.

Syntax

myMap.get(key);

Parameters

key Required.

Example

const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);

myMap.get('foo');   // returns 1
myMap.get('baz');   // returns 3
myMap.get('hihi');  // return undefined

Map.prototype.set

Sets or updates an element with the specified key and value in a Map object. The set() method also returns the Map object.

Syntax

myMap.set(key, value);

Parameters

  • key Required
  • value Required

Example

const myMap = new Map();

// sets new elements
myMap.set('foo', 1);
myMap.set('bar', 2);
myMap.set('baz', 3);

// Updates an existing element
myMap.set('foo', 100);

myMap.get('foo');   // returns 100

Because set() returns the Map object it operated on, the method can be easily chained. For example, the code above can be simplified to:

const myMap = new Map();

// sets new elements
myMap.set('foo', 1)
  .set('bar', 2)
  .set('baz', 3)
  .set('foo', 100); // Updates an existing element

myMap.get('foo');   // returns 100

Map.prototype.size

Returns the number of elements in a Map object.

Syntax

myMap.size();

Example

const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);


myMap.size(); // 3

Map.prototype.keys

Returns a new Iterator object that contains the keys for each element in the Map object in insertion order.

Syntax

myMap.keys()

Example

const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);


const iterator = myMap.keys();

console.log(iterator.next().value); // 'foo'
console.log(iterator.next().value); // 'bar'
console.log(iterator.next().value); // 'baz'

Map.prototype.values

Returns an iterator object that contains the values for each element in the Map object in the order they were inserted.

Syntax

myMap.values()

Example

const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);


const iterator = myMap.values();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

Map.prototype.delete

Removes the specified element from a Map object. Returns whether the key was found and successfully deleted.

Syntax

myMap.delete(key);

Parameters

key Required.

Example

const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);


myMap.size(); // 3
myMap.has('foo'); // true;

myMap.delete('foo');  // Returns true. Successfully removed.

myMap.size(); // 2
myMap.has('foo');    // Returns false. The "foo" element is no longer present.

Map.prototype.entries

Returns a new Iterator object that contains the [key, value] pairs for each element in the Map object in insertion order.

Syntax

myMap.entries()

Example

const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);


const iterator = myMap.entries();

console.log(iterator.next().value); // ['foo', 1]
console.log(iterator.next().value); // ['bar', 2]
console.log(iterator.next().value); // ['baz', 3]

Map.prototype.clear

Removes all elements from a Map object and returns undefined.

Syntax

myMap.clear();

Example

const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);


myMap.size(); // 3
myMap.has('foo'); // true;

myMap.clear(); 

myMap.size(); // 0
myMap.has('foo'); // false

Map.prototype.has

Given a Map with elements inside, the has() function allows you to determine whether or not an element exists inside the Map, based on a key that you pass.

The has() function returns a Boolean primitive (either true or false), which indicates that the Map contains the element or not.

You pass a key parameter to the has() function, which will be used to look for an element with that key inside the Map.

Example:

// A simple Map
const campers = new Map();

// add some elements to the map
// each element's key is 'camp' and a number
campers.set('camp1', 'Bernardo');
campers.set('camp2', 'Andrea');
campers.set('camp3', 'Miguel');

// Now I want to know if there's an element
// with 'camp4' key:
campers.has('camp4');
// output is `false`

The campers Map does not currently have an element with a 'camp4' key. Therefore, the has('camp4') function call will return false.

// If we add an element with the 'camp4' key to the map
campers.set('camp4', 'Ana');

// and try looking for that key again
campers.has('camp4');
// output is `true`

Since the map now does have an element with a 'camp4' key, the has('camp4') function call will return true this time!

In a more real-world scenario, you might not manually add the elements to the Map yourself, so the has() function would become really useful in those cases.

Map.prototype.forEach

Executes the passed function on each key-value pair in the Map object. Returns undefined.

Syntax

myMap.forEach(callback, thisArg)

Parameters

  • callback Function to execute for each element.
  • thisArg Value to use as this when executing callback.

Example

const myMap = new Map();
myMap.set('foo',1);
myMap.set('bar',2);
myMap.set('baz',3);

function valueLogger(value) {
  console.log(`${value}`);
}

myMap.forEach(valueLogger);
// 1
// 2
// 3