// Tutorial //

Introduction to Maps in JavaScript

Published on July 6, 2017 · Updated on April 4, 2022
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
Introduction to Maps in JavaScript

We introduced sets in JavaScript, so it’s only logical that we follow with a discussion on maps, which was also introduced with ES2015. Maps are a new object type that allow to store collections of key-value pairs.

Unlike with objects, map keys can be of any type, even objects or functions. It’s also easy to get the size of a map, while it’s not as straightforward for objects. On top of that, with maps we can iterate in the order in which the values were added, contrary to objects where there’s no guarantee about the order.

Here’s a simple example of a map demonstrating a few of the available methods and properties such as set, get, size, has, delete and clear:

let things = new Map();

const myFunc = () => '🍕';

things.set('🚗', 'Car');
things.set('🏠', 'House');
things.set('✈️', 'Airplane');
things.set(myFunc, '😄 Key is a function!');

things.size; // 4

things.has('🚗'); // true

things.has(myFunc) // true
things.has(() => '🍕'); // false, not the same reference
things.get(myFunc); // '😄 Key is a function!'

things.delete('✈️');
things.has('✈️'); // false

things.clear();
things.size; // 0

// setting key-value pairs is chainable
things.set('🔧', 'Wrench')
      .set('🎸', 'Guitar')
      .set('🕹', 'Joystick');

const myMap = new Map();

// Even another map can be a key
things.set(myMap, 'Oh gosh!');
things.size; // 4
things.get(myMap); // 'Oh gosh!'

Initializing Maps from Arrays

You can initialize a map from an array that contains arrays of two values:

const funArray = [
  ['🍾', 'Champagne'],
  ['🍭', 'Lollipop'],
  ['🎊', 'Confetti'],
];

let funMap = new Map(funArray);
funMap.get('🍾'); // Champagne

Iterating Over Maps

It’s easy to iterate over maps using for…of and array destructuring:

let activities = new Map();

activities.set(1, '🏂');
activities.set(2, '🏎');
activities.set(3, '🚣');
activities.set(4, '🤾');

for (let [nb, activity] of activities) {
  console.log(`Activity ${nb} is ${activity}`);
}

// Activity 1 is 🏂
// Activity 2 is 🏎
// Activity 3 is 🚣
// Activity 4 is 🤾

…And you can also use forEach to iterate over a map in the same manner. Note however how the first argument to the forEach callback function is the value and the second is the key. The following will have the same result as the for…of example:

activities.forEach((value, key) => {
  console.log(`Activity ${key} is ${value}`);
});

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment