Sling Academy
Home/JavaScript/JavaScript: Add/Remove Key-Value Pairs to/from a Map

JavaScript: Add/Remove Key-Value Pairs to/from a Map

Last updated: May 15, 2023

This succinct and straightforward article will show you how to add/remove key-value pairs to/from a Map in modern JavaScript. Without any further ado, let’s get to the point.

Adding key-value pairs to a Map

You can add a key-value pair to a Map by using the set() method. The syntax is as follows:

myMap.set(key, value)

The set() method returns the same Map object, so you can chain multiple calls to it. If you pass a key that already exists in the Map, the old value associated with that key will be updated by the new value.

Example:

// Create a new Map object
let myMap = new Map();

// Add a string key and value
myMap.set('name', 'Sling Academy'); 
// Add a number key and value
myMap.set(1, 'one'); 
// Add a boolean key and value
myMap.set(true, 'yes'); 

// Chain multiple calls to the set() method
myMap.set('a', 'Apple').set('b', 'Banana').set('c', 'Coconut');

console.log(myMap);

Output:

Map(6) {
  'name' => 'Sling Academy',
  1 => 'one',
  true => 'yes',
  'a' => 'Apple',
  'b' => 'Banana',
  'c' => 'Coconut'
}

Removing key-value pairs from a Map

The delete() method can help you you remove a specific element from a Map by its key. It returns true if the element existed and was removed, or false if the element did not exist.

Example:

// Create a new Map object
let myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['sling', 'academy']
]);

// remove elemnts whose key is 'key1' and 'key2'
myMap.delete('key1');
myMap.delete('key2');

console.log(myMap)

Output:

Map(1) { 'sling' => 'academy' }

In case you want to empty a Map (vacate all its elements), the clear() method is convenient. It returns undefined.

Example:

// Create a new Map object
let myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['sling', 'academy']
]);

// remove all key-value pairs from the map
let result = myMap.clear();

console.log(result);
console.log(myMap)

Output:

undefined
Map(0) {}

Next Article: JavaScript: 4 Ways to Convert an Object to a Map

Previous Article: How to iterate over a Map object in JavaScript

Series: Modern Data Structures in JavaScript

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration