# Rajat's Blog

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)
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 articles related to web development. Follow me here if you are learning the same.