Introduction

It's a Javascript inbuilt method and While working on our code .map() method is very useful when we have to perform certain operations on every element of the array and return a new array.

With the help of the map method, we can only update the element of the array and return a modified array. We will not be able to alter the array.

Syntax of .map() method

array.map(function(currentValue,index,array){
  return changedValueOfElement;
});

Parameters

• Callback function:-

  It runs on every element of the given array and performs the operation written inside its block

• CurrentValue:-

  This is the current value of the given array on which the function is performing the operation

• Index:- (optional)

  This is the index of the current value in the given array

• Array:- (optional)

  This is the array on which the .map() method is called.

Examples

Now suppose you have to multiply 2 with every element of the given array, You might use for loop to get the desired output as shown below

// multiply 2 with every element of the array
const Numbers = [1,2,3];
function AddOne(arr){
  let arr1 = [];
  for(let i=0;i<arr.length;i++){
    let num = arr[i]*2;
    arr1[i] = num;// arr1.push(num); 
  }
  return arr1;
}
console.log(AddOne(Numbers));

//output of the above code
[ 2, 4, 6 ]

But... this task can be done easily with the help of the Javascript in-built method .map()

const Numbers = [1,2,3];

const AddOne =(arr)=>arr.map(e => e*2);
console.log(AddOne(Numbers))

//output of the above code
[ 2, 4, 6 ]

Here we applied .map() on every element with the help of the arrow function AddOne and multiplied each element with 2 and we got the new array with modified elements.

Let's see how we can use .map() method on arrays of objects.

Working of .map() with an Array of Objects

const Users = [
{name:"yash",role:"Software Engineer"},
{name:"ram",role:"Product Manager"},
{name:"chintu",role:"Lifebuoy brand ambassador"},
]

const getTheNewArray = arr => arr.map(e => `${e.name} is ${e.role}`);
console.log(getTheNewArray(Users));

The out of the above code will be

[
  'yash is Software Engineer',
  'ram is Product Manager',
  'chintu is Lifebuoy brand ambassador'
]

As you can see from the output that map goes to every element of the given array performs the operation and gives us a new array

map() creates a new array from calling a function for every array element.

map() calls a function once for each element in an array.

map() does not execute the function for empty elements.

map() does not change the original array.

Conclusion

• map creates a new array by calling the function on every element of the given array.

• map calls the function once on every element of the array.

• map will not execute the function on the empty element of the array.

• map does not change the original array.

Thanks for reading my blog on map, please let me know your valuable suggestion it will help to learn and write amazing blogs

Thank You