JavaScript Map Tutorial: Creating and Manipulating Key-Value Pairs

Here is a tutorial on using a Map in JavaScript, with an example of storing translations for a multilingual website:

Welcome to the Map Tutorial!

Hey there, friend! Today we're going to explore the Map data structure in JavaScript. You've already learned about Arrays and Objects, but Maps are a powerful tool for storing and retrieving data in a more flexible way.

What is a Map?

A Map is a collection of key-value pairs, where each key is unique and maps to a specific value. Think of it like a dictionary, where each word (key) has a definition (value).

Let's get started!

Open your index.js file and let's create a Map to store translations for a multilingual website.

Step 1: Create a Map

Write the following code in your index.js file:

const translations = new Map()

This creates a new, empty Map called translations.

Step 2: Add translations to the Map

Let's add some translations to our Map. We'll use English as the key and the corresponding translations in Spanish, French, and German as the values.

Add the following code:

translations.set('hello', { es: 'hola', fr: 'bonjour', de: 'hallo' });
translations.set('goodbye', { es: 'adiós', fr: 'au revoir', de: 'auf Wiedersehen' });
translations.set('welcome', { es: 'bienvenido', fr: 'bienvenue', de: 'willkommen' });

Here, we're using the set() method to add key-value pairs to our Map. The key is the English word, and the value is an object with the translations in different languages.

Step 3: Retrieve a translation

Let's say we want to retrieve the Spanish translation for "hello". Add the following code:

const helloInSpanish = translations.get("hello").es
console.log(`Hello in Spanish is: ${helloInSpanish}`)

Here, we're using the get() method to retrieve the value associated with the key "hello", and then accessing the Spanish translation using .es.

Run the code!

Click the "Run" button to execute the code. You should see the output:

Hello in Spanish is: hola

Using the Map

Let's explore our Map further. We can use the size property to get the number of key-value pairs in our Map:

console.log(`Number of translations: ${translations.size}`);

Run the code again, and you should see:

Number of translations: 3

We can also use the has() method to check if a key exists in our Map:

console.log(`Does "hello" exist? ${translations.has("hello")}`)

Run the code again, and you should see:

Does "hello" exist? true

And that's it!

You've now learned how to create and use a Map in JavaScript, with a practical example of storing translations for a multilingual website.

Next, we'll explore the Set data structure in JavaScript. Stay tuned!

What's next?

Click the "Next" button to proceed to the Set tutorial.