map() method in JavaScript

Let's see what MDN has to say:

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

Here the calling array is the original array.

Let's see some examples in order to understand better:

let's see some examples

Example 1: Double the value of each element in an array and return a new array of modified elements.

//using arrow function

const numbersArray = [1, 5, 22, 40, 19]
const doublesArray = numbersArray.map(item => item*2)
console.log(doublesArray)

Result: [2, 10, 44, 80, 38]


//With normal functions

const numbersArray = [1, 5, 22, 40, 19]
function double(num){
       return num*2;
}
const doublesArray = numbersArray.map(double)
console.log(doublesArray)

Result: [2, 10, 44, 80, 38]

In the above example, each and every element (or item) of the numbersArray will pass through the function double to return a new value. Further, all the returned values are combined to form a new array.

Note: map method does not mutate the original array. It returns a modified copy of the original array.

Since I prefer arrow functions and it's a much more efficient way, I'll explain in terms of arrow functions.

let's see another example:

Example 2: Triple the value of each element in an array and return a new array of modified elements.

const numbersArray = [1, 5, 22, 40, 19]
const triplesArray = numbersArray.map(item => item*3)
console.log(triplesArray)

Result: [3, 15, 66, 120, 57]

*Note: map is meant to work with any iterable. *

Example 3: Given an array of strings, return a new array with the first element of each string.

stringArray = ["apple", "banana", "mango", 'grapes', 'guava', 'pineapple','strawberry']
const newArray = stringArray.map(item => item[0])
console.log(newArray)

Result: ['a', 'b', 'm', 'g', 'g', 'p', 's']

The map will internally run the provided function over each and every value of the array and create a new array out of it.

Example 4: Given an array of numbers, return a new array in which an even number is decremented by 1 and an odd number is incremented by 1.

const numbersArray = [1, 5, 22, 40, 19]

//Here's the 1 line answer using the arrow function:
const newArray = numbersArray.map(num => num % 2 === 0 ? num-1 : num +1)
console.log(newArray)
result: [2, 6, 21, 39, 20]

//Using normal function:
function oddEvenOperation(num){
      if(num % 2===0){
            return num-1;
       } 
       else{
              return num+1;  
       }

const newArray = numbersArray.map(oddEvenOperation)
console.log(newArray)

result: [2, 6, 21, 39, 20]

Let's see another example.

Example 5: Given an array of string, Return an array of objects with key as item and value as no. of characters in the string.

stringArray = ["apple", "banana", "mango", 'grapes', 'guava', 'pineapple','strawberry']
//using arrow function:
stringArray.map(item => { return {[item]: item.length} })
Result: [{item: 5}, {item: 6}, {item: 5}, {item: 6}, {item: 5}, {item: 9},{item: 10}]

If you want the explanation of the above example in terms of normal function, tell me in the comments and I'll be happy to include the same.

That's all folks.

I write one article every day related to web development (yes, every single f*cking day). Follow me here if you are learning the same..

If you love the article follow me on Twitter: @therajatg

If you are the LinkedIn type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!