JavaScript Array method .map()

Hello Everyone, in this post I will try to explain about JavaScript Array map() method with the help of examples.

The map() method iterates over each element in array and creates new array passing each element to specific function.

Syntax:
General syntax of map() method is:

array.map(callback(currentValue), thisArg)

Parameters: map() method accepts two parameters:

• callback- This function is called on each element of array and returns value which will be added in new array. It takes in 3 parameters:

  • currentValue : It is a required parameter and it holds the value of the current element.
  • index : It is an optional parameter and it holds the index of the current element.
  • array : It is an optional parameter and it holds the array.

• thisArg (optional)- It is used to hold the value passed to the function. By default it is undefined.

Return value: It returns a new array with elements as the return values from the callback function for each element.

Notes:

1. map() doen't change the original array.
2. it executes callback for each array element in order
3. it does not execute callback for elements without values.

The below examples illustrate the use of the array map() method in JavaScript:

Example 1 : In below example map() method takes in elements of original array and returns new array with square of elements.

const numbers = [2, 5, 8];
const sqrNumbers = numbers.map((num) => num * num);

console.log(numbers); // [2, 5, 8];
console.log(sqrNumbers); // [4, 25, 64];

Example 2 : In below example map() method takes in each city names from names array and returns new array with uppercase city names.

const names = ["brampton", "london", "new york"];
const UpperCaseNames = names.map((name) => name.toLocaleUpperCase());

console.log(names); // ["brampton", "london", "new york"]
console.log(UpperCaseNames); // ["BRAMPTON", "LONDON", "NEW YORK"]

Example 3 : In below example map() method iterates over each employee data and returns netEarning for each employee in newArr.

const employees = [
    { name: "Adam", salary: 5000, bonus: 500, tax: 1000 },
    { name: "Noah", salary: 8000, bonus: 1500, tax: 2500 },
    { name: "Fabiano", salary: 1500, bonus: 500, tax: 200 },
    { name: "Alireza", salary: 4500, bonus: 1000, tax: 900 },
];

// calculate the net amount to be given to the employees
const calcAmt = (obj) => {
    newObj = {};
    newObj.name = obj.name;
    newObj.netEarning = obj.salary + obj.bonus - obj.tax;
    return newObj;
};

let newArr = employees.map(calcAmt);
console.log(newArr);
/* Output will be : 
[
  { name: 'Adam', netEarning: 4500 },
  { name: 'Noah', netEarning: 7000 },
  { name: 'Fabiano', netEarning: 1800 },
  { name: 'Alireza', netEarning: 4600 }
] */

In conclusion map() method is used to modify each element in array and returns new array with modified elements.

Thanks for reading this post.

For more information check below resources:

1. MDN-Array.prototype.map()
2. geeksforgeeks
3. w3schools