JavaScript Array method .map()

Total
0
Shares

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)
Enter fullscreen mode

Exit fullscreen mode

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];

Enter fullscreen mode

Exit fullscreen mode

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"]

Enter fullscreen mode

Exit fullscreen mode

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 }
] */

Enter fullscreen mode

Exit fullscreen mode

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
Total
0
Shares
Valentsea

When to Use Nested Functions

Warning: the word function appears more often than you are probably used to. Sorry. Alright, let’s begin: nested…

You May Also Like