JavaScript Mapping Arrays. 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.
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.
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 mapconst 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!
