Skip to main content

How to Initialize a Map with Values in JavaScript

The Map object is a powerful data structure for storing key-value pairs, but an empty Map isn't very useful. A common task is to create a Map and populate it with initial data, either from an array, a plain object, or another Map.

This guide will teach you the modern, standard methods for initializing a Map with values. You will learn the core principle of the Map constructor and how to apply it to different data sources.

The Core Method: The Map() Constructor​

The key to all initialization is the Map() constructor. It can accept an optional argument: an iterable (like an array) whose elements are key-value pairs (e.g., a two-element array like ['key', 'value']).

Understanding this one principle is the key to all of the following methods.

Use Case 1: Initializing from an Array of Key-Value Pairs​

This is the most direct way to initialize a Map, as it perfectly matches the structure the constructor expects.

For example, we have a two-dimensional array of [key, value] pairs and we want to create a Map from it.

// Problem: How to convert this array into a Map?
const data = [
  ['name', 'Alice'],
  ['country', 'Canada'],
];

Recommended Solution: simply pass the array directly to the Map constructor.

const data = [
  ['name', 'Alice'],
  ['country', 'Canada'],
];

const myMap = new Map(data);

console.log(myMap);             // Output: Map(2) { 'name' => 'Alice', 'country' => 'Canada' }
console.log(myMap.get('name')); // Output: "Alice"

Use Case 2: Initializing from an Object​

Plain objects are a very common data structure, and you'll often need to convert one into a Map. To do this, you first need to convert the object into the [key, value] array format that the Map constructor understands. The Object.entries() method is the perfect tool for this.

The logic:

  1. Object.entries(obj): This method takes an object and returns an array of its [key, value] pairs.
  2. new Map(...): Pass the resulting array to the Map constructor.

For example, we have a plain object and need to convert it into a Map.

// Problem: How to convert this object to a Map?
const userObject = {
  id: 1,
  name: 'Bob',
};

Recommended Solution:

const userObject = {
  id: 1,
  name: 'Bob',
};

// First, convert the object to an array of entries
const entries = Object.entries(userObject);
console.log('Entries:', entries);   // Output: [ ['id', 1], ['name', 'Bob'] ]

// Then, create the Map from the entries
const userMap = new Map(entries);
console.log('Final Map:', userMap); // Output: Map(2) { 'id' => 1, 'name' => 'Bob' }
note

This can be written as a clean one-liner:

const userMap = new Map(Object.entries(userObject));

Use Case 3: Initializing by Cloning Another Map​

You can also create a new Map that is a copy of an existing Map. This works because a Map itself is an iterable of [key, value] pairs, so it can be passed directly to the constructor.

Solution:

const originalMap = new Map([
  ['name', 'Alice'],
  ['country', 'Canada'],
]);

// Pass the original Map directly to the constructor to create a clone.
const newMap = new Map(originalMap);

console.log(newMap);                  // Output: Map(2) { 'name' => 'Alice', 'country' => 'Canada' }

// The new Map is a separate instance
console.log(newMap === originalMap);  // Output: false

A Note on Adding Values Manually​

If you don't have all the data at creation time, you can start with an empty Map and add values using the .set() method. The .set() method is chainable, allowing for a fluent syntax.

const myMap = new Map();

myMap
  .set('name', 'Charlie')
  .set('age', 35);

console.log(myMap); // Output: Map(2) { 'name' => 'Charlie', 'age' => 35 }

Conclusion​

Initializing a Map with values is a simple task once you understand its core principle.

  • The new Map() constructor is the definitive tool, and it expects an iterable of [key, value] pairs.
  • To initialize from an array, make sure it's a two-dimensional array in the correct format.
  • To initialize from an object, first convert it to the required format using Object.entries().
  • To clone a Map, simply pass the original Map to the constructor.

Table of Contents