JavaScript Map

Javascript Map

You may often need to take an array and apply a process to its elements, resulting in a new array with updated elements.

We can use the built-in Array.map() method instead of manually iterating over the array with a loop.

What is map function

It is a high order function. Now what is high order function? High order function take function as argument instead of some variables and give the result.

The map function loops through each item in an array, completing the task assigned to it. It's a key-value collection that first appeared in ES6. It serves as a link between arrays that has no key-value pairs and objects that has key-value pairs but much more diffult to implement.

map() Syntax

The map() method takes in:

⮞ Callback: Every element of the array was called by the function. The array's return values are added to it.

⮞ currentValue: Value that is being passed from the array

⮞ thisArg (optional) - Value to use as this when executing callback. By default, it is undefined

Let me give some examples

const numbers = [1,2,3]
const multiplied = numbers.map(function(num)){
                     return num*2
                   }
console. log(multiplied)
// expected answer = [2,4,6]

How are Maps different to Objects?

There are two differences between Maps and regular JavaScript objects.

Restriction on Keys

In a regular JavaScript object, each key must be either a String or a Symbol.

Maps, on the other hand, allow you to utilise functions, objects, and any other primitive types as object keys (including NaN).

Limitation in Iteration

To iterate over an object's keys, values, or entries, you may either convert them to an array using Object.keys(), Object.values(), or Object.entries(), or use a for... in loop. Because objects aren't directly iterable, the for... in loop has a few limitations: it can only iterate over enumerable, non-Symbol attributes and in any order.

However, Maps are directly iterable, and the order of iteration is the same as the order of insertion because they are a keyed collection. A for... of loop or the forEach function can be used to iterate across the entries of a Map.

Below is the implementation for better understanding

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

💡 Notes

⮞ map() does not change the original array.

⮞ It executes the callback function only once for each element in array

⮞ It does not executes the callback function on the elements without values

Differences between Maps and Sets

⮞ A Map is quite similar to a Set in terms of behaviour, and they share numerous of the same methods, such as has, get, delete, and size. Both are keyed collections, which means you can iterate over the elements in the order of insertion using methods like forEach.

⮞ The contrast is that a Map has two dimensions and a key/value pair. An array can be converted to a set, and a 2D array can be converted to a map:

const set = new Set([1, 2, 3, 4]);
const map = new Map([['one', 1], ['two', 2], ['three', 3], ['four', 4]]);

Conclusion: At this point, you should have a better understanding of JavaScript map. As you work on JavaScript programming projects, each of these will become more important.