An introduction to JavaScript maps

Use maps instead of objects to create hashmaps

What are Maps in JavaScript?

可以使用任何型別當成 Key。

the only primitive values that may be used as keys in an object are strings, but in a Map, you can use any type of primitive value, including strings, numbers, Booleans, and even objects or functions.

There are benefits to maps:

• Any data type, including Boolean, number, text, and function keys, can be looped through.
• Looping is straightforward in Map.
• A Map can be utilized in a complex project to solve problems.
• Map simplifies complex codes implemented with Objects.
• A Map is entirely iterable
• JavaScript objects can only be strings keys/properly. However, we can use any primitive value in a map.

You only need a basic understanding of JavaScript to begin using Maps because Map is a whole JavaScript. Given that Map is iterable, Maps will have a looping mechanism.

Getting Started

By creating a quiz game, we’ll learn how to use the Map described earlier in this tutorial. We can use Map effectively and learn more by creating a quiz game. We’ll cover a lot before we finish this tutorial, so please pay attention and follow along.

Constructing the Map

The “new” keyword associated with the Map is used in the Map. Since Map in JavaScript is a data structure, it also has a method, which we shall discuss later in this section. Here is a code snippet for Map that uses the new keyword.

1
2
3

    const question = new Map();
    console.log(question)

Output:

Please note that the Map’s prototype is a Map, as shown in the browser, and that multiple Map methods are mentioned below the prototype, including clear, delete, forEach, get, has, keys, size, and value. We’ll review each method derived from the Map before this essay comes to a close. Please take your time reading to discover more about Map. It’s not too difficult to understand and use a Map.

The code I’ll paste below will create a quiz game with correct and incorrect answers. Please use the code below as a guide.

const question = new Map();
question.set("question", "What is an HTML");
question.set(1, "Hello Text Markup language");
question.set(2, "Hyper Text Markup language");
question.set(3, "High Text Markup language");
question.set("answer", 2);
question.set(true, "Correct answer");
question.set(false, "Wrong answer, please try again.");
console.log(question);

Output:

Using any primitive value as a key is one of Map’s key capabilities.

Get method

We’ll discuss Map’s Get method in this part. We’ll just get an item that was set in the query Map as the opposite of the set is gets. Since this is so simple to use, I’ll be honest and say that you should concentrate on Map right now.

// The Get Method
console.log(question.get("question")) 
//Output: What is an HTML

You can see that the get method above passes a key already present in the Map.

Size method

console.log(question.size); 
// Output: 7

Delete method

question.delete(3);
console.log(question)

Output:

question.delete(3);
question.delete(3);
question.delete(3);
question.delete(3);
question.delete(3);
    
console.log(question)

Output:

You can see that no new thing or problem appeared in the code after repeatedly deleting it. This is great because there aren’t any bugs to be found.

CLEAR method

You only need to use the clear technique to remove every item from the list. By doing this, the entire list is removed. Please use the code provided below.

question.clear()
    
console.log(question)

Output:

If we use the question.size method, its result will also return 0.

Looping in Maps

we cannot do directly with JavaScript Object unless we use Object.key and Object.value.

Looping with forEach()

question.forEach((item, key) => {
    console.log(item);
});

question.forEach((item, key) => {
    console.log(key);
});

Looping in Map with for of

for(let item of question){
    console.log(item)
}

Output:

Using Entries to get the key and value pairs of an item.

for (let [key, value] of question.entries()) {
    console.log(`Key: ${key} | Value: ${value}`);
}

Output:

Quiz Game with Map

In this section, we’ll use what we’ve learned so far by creating a straightforward quiz game. The same logical code discussed in this course will be used in the quiz game.

I’ll start by describing the quiz we’re taking. The question and the solutions will be printed on the console in that order, and the Map will loop back to the solution.

Finally, you can respond to the query by responding appropriately to a prompt (). There is a method named prompt in the window object (). The prompt() method instructs the web browser to show a dialog box with text, a text input field, and the OK and Cancel buttons.

The quiz game’s question, together with the correct answer and answers ranging from 1 to 3, are all contained in the code below.

1
2
3
4

    let value = parseInt(prompt("Enter teh correct answer"));
        
    let checkAnswer = question.get(value === question.get("correct"));
    console.log(checkAnswer)

You can access the source code on GitHub by clicking here.

Source