Mastering JavaScript Maps: Keys to Efficient Data Handling

Dive Into JavaScript Maps

Today, we're learning about Map in JavaScript. A Map stores data as key-value pairs. We'll recall how to create Maps, implement them, and delve into the details of their memory management.

Understanding JavaScript Maps

Maps are versatile data structures in JavaScript. They store key-value pairs and accept any data type as a key — even objects and functions!

Here is how we create an empty Map:

let myMap = new Map(); // creates an empty Map

Here, myMap is a new JavaScript Map, eagerly awaiting to store your keys and values.

Meander Through Map Methods

Maps provide some essential built-in methods:

  • set(key, value): Stores a key-value pair.
  • get(key): Retrieves the value of a key.
  • has(key): Checks if a key exists and returns true or false.
  • delete(key): Erases a key-value pair.
  • size: Returns the count of key-value pairs.

To gain a better understanding, let's apply these methods:

let myMap = new Map();

// Add pairs with set
myMap.set('apples', 10); // Adds a new pair
myMap.set('bananas', 6); // Adds another pair

// Use get
console.log(myMap.get('apples')); // Outputs: 10, gets apples' value

// Apply has
console.log(myMap.has('bananas')); // Outputs: true, checks for bananas' existence

// Delete with delete
myMap.delete('bananas'); // Deletes bananas and its value from the map

// Check size
console.log(myMap.size); // Outputs: 1; gives the number of pairs

Behind The Scenes: Maps in Memory Management

JavaScript uses a Hash Table to implement Maps. This table ensures the Map's size adjusts based on the stored data, optimizing memory usage.

Time Complexity Analysis of Map Operations

The time complexity of get, set, has, and delete operations in Maps is O(1). This signifies that they execute instantly, regardless of the Map's size.

Imagine running a store with thousands of items. A Map lets you quickly handle any item!

let superstoreStock = new Map();

// Stock item
superstoreStock.set('toothpaste', 1000); // Stock 1000 toothpaste
superstoreStock.set('soap', 500); // Stock 500 soap
superstoreStock.set('shampoo', 800); // Stock 800 shampoo

// Purchase is made
console.log(superstoreStock.get('toothpaste')); // Outputs: 1000 (current quantity)
superstoreStock.set('toothpaste', superstoreStock.get('toothpaste') - 1); // Toothpaste is bought
console.log(superstoreStock.get('toothpaste')); // Outputs: 999 (updated quantity)

// Item is out of stock, will be replaced later
superstoreStock.delete('soap'); // Soap is removed
console.log(superstoreStock.has('soap')); // Outputs: false

// Item is restocked
superstoreStock.set('soap', 500); // Soap is restocked
console.log(superstoreStock.has('soap')); // Outputs: true
Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal