How to Use Array map() Method in JavaScript

javaScript array map method; Through this tutorial, i am going to share with you how to use JavaScript Array map() method on arrays with the help of examples.

JavaScript Array map Method Example

The javaScript arraymap() method is used to creates a new array with the results of calling a function for every array element.

Syntax of JavaScript Array map() method

The following illustrates the map() method; as shown below:

arrayObject.map(callback[,contextObject]);

Here,  arrayObject is an array.

Parameters of JavaScript Array map()

The map() method takes in:

  • callback – The function called for every array element. Its return values are added to the new array. It takes in:
    • currentValue – The current element being passed from the array.
  • thisArg (optional) – Value to use as this when executing callback. By default, it is undefined.

Return Value of JavaScript Array map()

Returns a new array with elements as the return values from the callback function for each element.

  • map() does not change the original array.
  • map() executes callback once for each array element in order.
  • map() does not execute callback for array elements without values.

Example 1 – Mapping array elements using custom function

Here, i will take first example for mapping array elements using custom function with the help of array.map() in javaScript; as shown below:

const prices = [1800, 2000, 3000, 5000, 500, 8000];

let newPrices = prices.map(Math.sqrt);
// [ 42.42640687119285, 44.721359549995796, 54.772255750516614,
//   70.71067811865476, 22.360679774997898, 89.44271909999159 ]
console.log(newPrices);

// custom arrow function
const string = "JavaScript";
const stringArr = string.split(''); // array with individual string character

let asciiArr = stringArr.map(x => x.charCodeAt(0));

// map() does not change the original array
console.log(stringArr); // ['J', 'a', 'v', 'a','S', 'c', 'r', 'i', 'p', 't']

console.log(asciiArr); // [ 74,  97, 118,  97, 83,  99, 114, 105, 112, 116 ]

Output

[
  42.42640687119285,
  44.721359549995796,
  54.772255750516614,
  70.71067811865476,
  22.360679774997898,
  89.44271909999159
]
[
  'J', 'a', 'v', 'a',
  'S', 'c', 'r', 'i',
  'p', 't'
]
[
   74,  97, 118,  97,
   83,  99, 114, 105,
  112, 116
]

Example 2 – map() for object elements in array

Here, i will take second example for array object elements with the help of array.map() in javaScript; as shown below:

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

[
  { name: 'Adam', netEarning: 4500 },
  { name: 'Noah', netEarning: 7000 },
  { name: 'Fabiano', netEarning: 1800 },
  { name: 'Alireza', netEarning: 4600 }
]

Note that: JavaScriptmap() method assigns undefined to the new array if the callback function returns undefined or nothing.

Conclusion

In this tutorial, you have learned how to use the JavaScript Array map() method with js arrays.

More JavaScript Tutorials

Recommended:-JavaScript Arrays

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *