JavaScript Array map() Method With Examples

In this tutorial we'll see how to use the JavaScript Array map() method.

Suppose you have a requirement to apply some logic to each element of an array then map() method is a more convenient choice rather than iterating the array and then processing each element.

map() method

With map() you provide a function that is called upon each element of the array and a new array is created with the modified elements.

Syntax of map() method

map(callbackFn, thisArg)

Here parameters are-

1. callbackFn- A function to execute for each element in the array.
The callback function is called with the following arguments:
• currentElement- The current array element
• index- The index of the current element. Optional parameter and you generally won't need this parameter.
• array- The array map() was called upon. You generally won't need this parameter.
2. thisArg- A value to use as this when executing callbackFn. This is an Optional parameter.

Callback function can also be written as an arrow function, in that case syntax is

map((element, index, array) => { /* … */ })

or the one you'll use more frequently

map((element) => { /* … */ })

Return value

Method returns a new array which is populated with the elements of the original array after each element is processed by the callback function.

Note that the map() method is an iterative method (iterates through all the elements in the array). This method doesn't change the original array.

Javascript map method examples

1. Using map() to square each element of an array.

const numArr = [3, 5, 6, 9];

const newArr = numArr.map(getSquare);

console.log(newArr); // [9, 25, 36, 81]

function getSquare(num){
	return num * num;
}

Same thing with arrow function

const numArr = [3, 5, 6, 9];
const newArr = numArr.map(n => n * n);
console.log(newArr); // [9, 25, 36, 81]

2. Increase each element by 10%.

const numArr = [300, 500, 600, 100];

const newArr = numArr.map(n => n + (n*10/100));

console.log(newArr); // [330, 550, 660, 110]

3. Using map() with array of objects. In the example there is a persons array containing person object with fields id, firstName, lastName, age, salary. You have to create a new array with objects having fields as name- which merges both first name and last name and salaries are increased by 10%.

const persons = [{id:1, firstName:"Ajay", lastName:"Bisht", age:9, salary: 10000}, 
   {id:2, firstName:"Rajiv", lastName:"Vishnoi", age:22, salary: 12000}, 
   {id:3, firstName:"Bosco", lastName:"Caesar", age:25, salary: 20000},
   {id:4, firstName:"Albert", lastName:"Wadlow", age:3, salary: 30000}];

const newArr = persons.map(p => {
    pObj = {};
    pObj.name = p.firstName + " " + p.lastName;
    pObj.salary = p.salary + (p.salary *10/100);
    return pObj;
  });


console.log(newArr); 

/*
[{name: 'Ajay Bisht', salary: 11000}, 
{name: 'Rajiv Vishnoi', salary: 13200}, 
{name: 'Bosco Caesar', salary: 22000}, 
{name: 'Albert Wadlow', salary: 33000}]*/

That's all for this topic JavaScript Array map() Method With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!

---

Related Topics

1. JavaScript filter Method
2. JavaScript Arrow Function With Examples
3. JavaScript Import and Export
4. Controlled and Uncontrolled Components in React

You may also like-

1. Angular Property Binding With Examples
2. How to Sort HashSet in Java
3. Read or List All Files in a Folder in Java
4. Difference Between Encapsulation And Abstraction in Java
5. How to Inject Null And Empty String Values in Spring