JavaScript Mapping Arrays. Map() Method.
By: Oleg Ivanov
Tags: Mapping, Iterators, Arrays, JavaScript, Map Method

In my previous article I wrote about the Filter() method, a built-in native array method that goes over an array, passes each element to a provided callback function, and returns a new array comprised of elements for which the callback returned a true value.

Photo by Neil Bates on Unsplash

Now, let’s talk about another very common and frequently used built-in array method Map(). This method transforms / modifies every element of the original array to another value based on some defined logic. For example, it can be used to square every value in an array of numbers: [1, 2, 3, 4] -> [1, 4, 9, 16]. Like a Filter() method, the Map() method takes a callback function, and passes each element in turn to the callback. The Map() method returns a new array that is the same length as the original one in which the elements have been modified.

If we are looking for the official definition of this Map() method, let’s look at MDN Web Docs website:

The Map () method creates a new array populated with the results of calling a provided function on every element in the calling array.

Let’s break this definition down as we did before!

It creates a new array

It iterates over each element of the original array

It transforms / modifies each element of the original array to another value based on some defined logic

It pushes the transformed / modified values into the new array

It returns the new array populated with the transformed / modified values

First let’s use Vanilla JavaScript / for loop to solve a problem “multiply by 2 every value in an array of numbers” and then apply the Map() method to solve the same problem.

You are given an array of numbers:

const array1 = [1, 4, 9, 16];

We need to multiply every value of this array and return a new array containing all those multiplied values or expected output is:

[2, 8, 18, 32];

Here is a pseudocode and code itself for the problem. Please read, then copy and paste into your console.

function arraySquare (arrayOfNumbers) { // create a new empty array

let newArray = []; // iterate over the original array till the end of the array

for (var i = 0; i < arrayOfNumbers.length; i++) { // multiply the current element of the array by 2 and assign this new value to a multiply variable

let multiply = arrayOfNumbers[i] * 2; // push the current multiplied by 2 value into the new array

newArray.push(multiply);

} // return the new array

return newArray;

} const array1 = [1, 4, 9, 16];

const result = arraySquare(array1);

console.log(result);

Here is the output:

To have more fun, let’s iterate over an array of number objects. We have an array of objects like this:

let numbersArray = [

{key: 1, value: 10},

{key: 2, value: 20},

{key: 3, value: 30}]

We need to multiply every value of this array of objects by 2 and return a new array containing all those multiplied values or expected output is:

[{key: 1, value: 20},

{key: 2, value: 40},

{key: 3, value: 60}]

Same Vanilla JavaScript and for loop can be used to solve this problem. Here is a pseudocode and code itself for the problem. Please read, then copy and paste into your console.

function arraySquareObj (arrayOfObjects) { // create a new empty array

let newArray = []; // iterate over the original array till the end of the array

for (var i = 0; i < arrayOfObjects.length; i++) { // multiply the current element of the array by 2 and assign this new value to a multiply variable

let multiply = arrayOfObjects[i].value * 2; // push the current multiplied by 2 value into the new array

newArray.push(multiply);

} // return the new array

return newArray;

} let numbersArray =

[{key: 1, value: 10},

{key: 2, value: 20},

{key: 3, value: 30}] let result = arraySquareObj (numbersArray);

console.log(result);

Here is the output:

These solutions are still valid and demonstrate how we can solve problems like these by using a for loop. Do we really need to write so many lines of code, when JavaScript has the built-in array method Map()? I think it is time for us to shift gears and talk about this Map() method.

Photo by James Lewis on Unsplash

Let’s look at Map() syntax at MDN Web Docs:

// Arrow function

map((element) => { ... } )

map((element, index) => { ... } )

map((element, index, array) => { ... } ) // Callback function

map(callbackFn)

map(callbackFn, thisArg) // Inline callback function

map(function callbackFn(element) { ... })

map(function callbackFn(element, index) { ... })

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

map(function callbackFn(element, index, array) { ... }, thisArg)

and solve the same two problems by using the Map() method:

const array1 = [1, 4, 9, 16];

// pass a function to map const map1 = array1.map(x => x * 2); console.log(map1);

// expected output: Array [2, 8, 18, 32]

In this example, we are invoking the Map() method on the given array and use an arrow function expression to multiply each element of this array by 2. Here is the output:

For the second problem / array of number object, our Map() code is going to look like this:

let kvArray =

[{key: 1, value: 10},

{key: 2, value: 20},

{key: 3, value: 30}] let reformattedArray = kvArray.map(obj => obj.value * 2);

console.log(reformattedArray);

Here is the output:

Takeaways are similar to what I wrote in my JavaScript Filtering Arrays. Filter() Method tutorial but because “Practice makes perfect” l will list them one more time here, the benefits of using the Map() method:

We don’t need to create a for loop to iterate over / or use any other loops

In each iteration, the current element is stored in a variable for us, so we don’t need to access elements using their index values

A new array is automatically created and returned after all the iterations are over, so we don’t need to create an empty array in the beginning and push elements into it

Just a few lines of code compared the Vanilla JavaScript / for loop approach

Easy to read and understand / expressive for all users

If you find this information useful, please feel free to follow me. Hope you enjoyed this short guidance on Map() method in JavaScript, be strong and stay tuned!