How to use the JavaScript Map object and map method

This article explains how to use the Map object and map method in JavaScript .

One way to handle associative arrays is to use Map objects. 
Also, what is the map method?

A Map object is an object for handling associative arrays, which stores data in key-value format and allows you to manipulate the data using methods such as get and set.


The map method, on the other hand, is a function that processes the elements of an array and returns a new array. 
By using the map method, you can manipulate the elements of an array or create a new array.

How to use Map objects

A Map object is an associative array object for storing data in key-value pairs . Unlike arrays, which store elements by array index, Map objects can use any object as a key.

To use a Map object, create an instance as follows:

let map = new Map();

To add data to a Map object, use the set method. Also, use the get
method to retrieve data from the Map object .

let map = new Map();
map.set('name', 'John');
map.set('age', 30);
console.log(map.get('name')); // John
console.log(map.get('age')); // 30

You can use the delete method of the Map object to delete the element that corresponds to the specified key.

map.delete('name');
console.log(map.get('name')); // undefined

The Map object has a clear method that allows you to remove all elements within the Map object. You can also get the size of the map by using the size method.

map.clear();
console.log(map.size); // 0

How to use map method

The map method is a function that processes the elements of an array and returns a new array . By using the map method, you can manipulate the elements of an array or create a new array.

array.map(function(element, index, array){process})

Process and return elements of an array

For example, you can multiply all elements of an array by 2.

let numbers = [1, 2, 3];
let doubleNumbers = numbers.map(function(number){
    return number * 2;
});
console.log(doubleNumbers); // [2, 4, 6]

Convert and return the type of the contents of the array

By using the Map method, you can convert the type of the contents of an array .

For example, to convert an array of numbers to an array of strings, write as follows.

let numbers = [1, 2, 3, 4, 5, 6];
let strings = numbers.map(function(number){
    return number.toString();
});
console.log(strings); // ['1', '2', '3', '4', '5', '6']

The Map method can create a new array by applying a function to all the elements of the array. This way it can be used to transform each element of an array.

Differences from other methods

Difference with forEach method

　The Map method is a function that creates a new array by applying a certain function to the elements of an array. On the other hand, the forEach method is a function that applies a certain function to the elements of an array. The forEach method does not modify the array.

Use each function as follows.

let numbers = [1, 2, 3];
let doubleNumbers = numbers.map(function(number){
    return number * 2;
});
console.log(doubleNumbers); // [2, 4, 6]

numbers.forEach(function(number){
    console.log(number * 2);
}); // 2 4 6

Difference with filter method

The Map method applies a function to all elements of an array to create a new array. On the other hand, the filter method extracts only those elements that satisfy a certain condition from the array elements and creates a new array.

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(function(number){
    return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6]

The Map method operates on all elements of an array and creates a new array, whereas the Filter method extracts only those elements from the array that meet a certain condition and creates a new array. Each of these can be used for different purposes, and they can also be combined to perform more complex processing.

Difference with reduce method

The Map method applies a function to all elements of an array to create a new array. The reduce method, on the other hand , combines all elements of an array into a single value.

let numbers = [1, 2, 3, 4, 5, 6];
let sum = numbers.reduce(function(acc, number){
    return acc + number;
}, 0);
console.log(sum); // 21

Summary of this article

We explained the Map object and map function.

The Map object is useful for holding data in key-value format, and the map function is useful for extracting elements of an array one by one and creating a new array!

The Map object and map function are very useful features in JavaScript. 
In this article, we explained in detail how to use the Map object and map function.

Please use it when actually programming to perform efficient programming.