Introduction to ES6 Map in JavaScript

The ES6 Map is a powerful data structure introduced in ECMAScript 6 (ES6) that holds key-value pairs and offers a range of useful methods for interacting with these pairs efficiently. This feature provides a superior alternative to traditional JavaScript objects when it comes to managing collections of keyed data. In this guide, we’ll explain the essential APIs provided by ES6 Map along with code snippets and an example application, making it easier to understand and utilize this feature in your projects.

Creating a Map

  const map = new Map();

With just a single line, you can create an empty Map instance.

Setting Key-Value Pairs

  
    map.set('name', 'John Doe');
    map.set('age', 30);
    map.set('occupation', 'Developer');
  

The set method allows you to add key-value pairs to the map.

Getting Values

  const name = map.get('name'); // John Doe

Use the get method to retrieve the value associated with a specific key.

Checking for Existence of Keys

  const hasAge = map.has('age'); // true

The has method returns a boolean indicating whether a specific key exists in the map.

Deleting Key-Value Pairs

  map.delete('age');

Remove a key-value pair using the delete method.

Getting Map Size

  const size = map.size; // 2

The size property provides the number of key-value pairs in the map.

Iterating over a Map

  
    for (let [key, value] of map) {
      console.log(key, value);
    }
  

Use a for...of loop to iterate over the key-value pairs.

Converting Map to Array

  const mapArray = [...map];

You can convert a Map to an array using the spread operator.

Using Maps in Applications

Here is an example of a simple application that uses a Map to store and manage a collection of users:

  
    class User {
      constructor(id, name, email) {
        this.id = id;
        this.name = name;
        this.email = email;
      }
    }

    const users = new Map();

    function addUser(id, name, email) {
      const user = new User(id, name, email);
      users.set(id, user);
    }

    function getUser(id) {
      return users.get(id);
    }

    function deleteUser(id) {
      users.delete(id);
    }

    addUser(1, 'Alice', 'alice@example.com');
    addUser(2, 'Bob', 'bob@example.com');

    console.log(getUser(1)); // User { id: 1, name: 'Alice', email: 'alice@example.com' }
    console.log(users.size); // 2

    deleteUser(1);
    console.log(users.size); // 1
  

This simple application demonstrates how you can use Maps to manage user data efficiently.

Hash: a55306de5d2b9a15517cac4762254525b6754fad9396868d9c03fa0542fd5838