map method to iterate over an array in JavaScript

In this lesson, we will analyze the special method map, designed to transform arrays. This method works like this: it takes a callback function as a parameter and applies it to each array element, and then returns the modified array.

Here is a scheme of how the method works on a code example:

let arr = [1, 2, 3, 4, 5]; let result = arr.map(function() { // the function will be applied for each array element });

If you specify the first parameter in the callback (the name of the parameter does not matter), then the values of the array elements will automatically fall into it:

let arr = [1, 2, 3, 4, 5]; let result = arr.map(function(elem) { console.log(elem); // prints 1, 2, 3, 4, 5 sequentially });

Let's now see how the map method transforms an array. In our case, the transformed array will be written to the variable result. This array will have the same number of elements as the original one, but the values of the elements will be different. For each element, instead of the original value, there will be the value that the callback call returned for it.

I believe that it is not very clear yet, let's look at this with an example. Let's make the callback call return the square of the element for which it was called:

function(elem) { return elem * elem; }

Let's apply our callback for each element of the array:

let arr = [1, 2, 3, 4, 5]; let result = arr.map(function(elem) { return elem * elem; }); console.log(result); // shows [1, 4, 9, 16, 25]

For example, let's see what happens if the callback for each element returns the same (let, for example, the number 0):

let arr = [1, 2, 3, 4, 5]; let result = arr.map(function(elem) { return 0; }); console.log(result); // shows [0, 0, 0, 0, 0]

Given an array of numbers. Using the map method, extract the square root of each array element and write the result to a new array.

Given an array with strings. Using the map method, add the character '!' to the end of the value of each array element.

Given an array with strings. Using the map method, reverse the characters of each string.

Given the following array:

let arr = ['123', '456', '789'];

Using the map method, transform this array into the following:

let arr = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ];

Element key

The callback function can also take a second parameter - JavaScript will place the key of the array element into it.

Let's look at an example. Let's have an array like this:

let arr = ['a', 'b', 'c', 'd', 'e'];

Let's write at the end of each element its index number in the array:

let arr = ['a', 'b', 'c', 'd', 'e']; let result = arr.map(function(elem, index) { return elem + index; }); console.log(result); // shows ['a0', 'b1', 'c2', 'd3', 'e4']

Given an array of numbers. Using the map method, write to each element of the array the value of this element multiplied by its index number in the array.

Iterating over multidimensional arrays

The map method can also be used to iterate over multidimensional arrays. Let, for example, given an array like this:

let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

Let's iterate over this array through map and output its elements to the console:

let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; let result = arr.map(function(elem) { console.log(elem); });

As a result, console.log will output [1, 2, 3], then [4, 5, 6], then [7, 8, 9].

As you can see, subarrays get into the variable elem. Let's now apply the map method to each subarray and square each of its elements:

let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; let result = arr.map(function(elem) { return elem.map(function(num) { return num * num; }); }); console.log(result);
enru