How to Add a Key-Value Pair to a Map in JavaScript

The Map object is a modern and powerful data structure in JavaScript for storing key-value pairs. Unlike plain objects, Maps allow any value—including objects and other non-primitive types—to be used as a key. The primary method for adding or updating entries in a Map is the .set() method.

This guide will teach you how to use map.set() to add new entries, how to chain calls for a fluent syntax, and how to initialize a Map with values directly in its constructor.

The Core Method: map.set()

The Map.prototype.set() method is the standard way to add a new key-value pair to a Map.

Syntax

myMap.set(key, value)

where:

• key: The key of the element to add. This can be of any data type.
• value: The value of the element to add.

For example, you have an empty Map and you want to add some data to it.

// Problem: How to add 'name' and 'age' to this Map?
const userMap = new Map();

Solution:

const userMap = new Map();

// Add a key-value pair
userMap.set('name', 'Alice');

// Add another key-value pair
userMap.set('age', 30);

console.log(userMap);

Output:

Map(2) { 'name' => 'Alice', 'age' => 30 }

Then, you can retrieve a value using the .get() method:

console.log(userMap.get('name')); // Output: Alice

How set() Handles Existing Keys

If you call .set() with a key that already exists in the Map, it will simply update the value for that key. It will not create a duplicate entry.

const userMap = new Map();
userMap.set('status', 'active');

console.log(userMap.get('status')); // Output: active

// Call .set() again with the same key
userMap.set('status', 'inactive');

console.log(userMap.get('status')); // Output: inactive
console.log(userMap.size);          // Output: 1

note

This behavior makes .set() a reliable tool for both adding and updating data.

Initializing a Map with Values

You don't have to start with an empty Map. The new Map() constructor can accept an iterable of [key, value] pairs (like a 2D array) to initialize it with data.

const initialData = [
  ['name', 'Alice'],
  ['age', 30],
  ['isAdmin', true],
];

const userMap = new Map(initialData);

console.log(userMap);

Output:

Map(3) { 'name' => 'Alice', 'age' => 30, 'isAdmin' => true }

note

This is a very clean and declarative way to create a Map with a predefined set of entries.

Chaining .set() Calls

The map.set() method returns the Map object itself after it runs. This allows you to "chain" multiple .set() calls together for a fluent and concise syntax.

const userMap = new Map();

userMap
  .set('name', 'Alice')
  .set('age', 30)
  .set('isAdmin', true);

console.log(userMap);

Output:

Map(3) { 'name' => 'Alice', 'age' => 30, 'isAdmin' => true }

note

This is a stylistic choice but is a common pattern for populating a Map with several entries.

Conclusion

Adding entries to a Map in JavaScript is a simple and powerful operation.

• The primary method for adding or updating a key-value pair is map.set(key, value).
• You can initialize a Map with data by passing an array of [key, value] pairs to the new Map() constructor.
• For a more fluent syntax, you can chain multiple .set() calls together.

By using these simple methods, you can effectively manage the data within your Map objects.