JavaScript Maps

In this tutorial, we will explore the Map object in JavaScript. The Map is a built-in data structure that allows you to store key-value pairs. Unlike objects, keys in a Map can be of any type, including functions and other objects. This makes Maps more flexible and powerful for certain use cases.

Introduction

The Map object holds key-value pairs where each key is unique. A key in a Map can be of any type, not just strings or symbols like in regular JavaScript objects. This flexibility makes Maps particularly useful when you need to associate arbitrary values with keys that are not limited to primitive types.

Creating Maps

You can create a new Map using the new Map() constructor. You can also initialize a Map with an array of key-value pairs.

Example 1: Basic Map Creation

1const myMap = new Map();
2console.log(myMap);

Map(0) {}

Example 2: Initializing a Map with Key-Value Pairs

1const initialData = [
2  ['name', 'Alice'],
3  [1, 'One'],
4  [{}, 'Object']
5];
6 
7const myMap = new Map(initialData);
8console.log(myMap);

Map(3) {
'name' => 'Alice',
1 => 'One',
{} => 'Object'
}

Adding and Retrieving Entries

You can add entries to a Map using the set() method and retrieve them using the get() method.

Example 3: Adding Entries

1const myMap = new Map();
2myMap.set('name', 'Alice');
3myMap.set(1, 'One');
4console.log(myMap);

Map(2) { 'name' => 'Alice', 1 => 'One' }

Example 4: Retrieving Entries

1const myMap = new Map([['name', 'Alice'], [1, 'One']]);
2console.log(myMap.get('name')); // Output: Alice
3console.log(myMap.get(1));      // Output: One

Alice
One

Checking for Key Existence

You can check if a key exists in a Map using the has() method.

Example 5: Checking Key Existence

1const myMap = new Map([['name', 'Alice'], [1, 'One']]);
2console.log(myMap.has('name')); // Output: true
3console.log(myMap.has(2));      // Output: false

true
false

Removing Entries

You can remove entries from a Map using the delete() method and clear all entries using the clear() method.

Example 6: Removing an Entry

1const myMap = new Map([['name', 'Alice'], [1, 'One']]);
2myMap.delete('name');
3console.log(myMap);

Map(1) { 1 => 'One' }

Example 7: Clearing All Entries

1const myMap = new Map([['name', 'Alice'], [1, 'One']]);
2myMap.clear();
3console.log(myMap);

Map(0) {}

Iterating Over Maps

You can iterate over a Map using various methods like forEach(), for...of, and more.

Example 8: Using forEach()

1const myMap = new Map([['name', 'Alice'], [1, 'One']]);
2myMap.forEach((value, key) => {
3  console.log(`${key} => ${value}`);
4});

name => Alice
1 => One

Example 9: Using for...of

1const myMap = new Map([['name', 'Alice'], [1, 'One']]);
2for (let [key, value] of myMap) {
3  console.log(`${key} => ${value}`);
4}

name => Alice
1 => One

Size of a Map

You can get the number of entries in a Map using the size property.

Example 10: Getting the Size

1const myMap = new Map([['name', 'Alice'], [1, 'One']]);
2console.log(myMap.size); // Output: 2

2

Practical Example

Let's create a simple program that uses a Map to store and manage user data.

Example 11: User Data Management with Map

1const users = new Map();
2 
3function addUser(id, name) {
4  if (users.has(id)) {
5      console.log(`User with ID ${id} already exists.`);
6  } else {
7      users.set(id, name);
8      console.log(`User ${name} added with ID ${id}.`);
9  }
10}
11 
12function getUser(id) {
13  const user = users.get(id);
14  if (user) {
15      console.log(`User found: ${user}`);
16  } else {
17      console.log(`No user found with ID ${id}.`);
18  }
19}
20 
21addUser(1, 'Alice');
22addUser(2, 'Bob');
23getUser(1);
24getUser(3);

User Alice added with ID 1.
User Bob added with ID 2.
User found: Alice
No user found with ID 3.

Summary

What's Next?

Now that you have a solid understanding of JavaScript Maps, it's time to explore how to work with dates and times in JavaScript. In the next tutorial, we will cover the Date object and various methods for manipulating and formatting dates. Stay tuned!