JavaScript

Array map() method in JavaScript | Explained

In JavaScript, a built-in method named array.map() is used to create a new modified array; to do that, it traverses an array and invokes a function for each element of the array. It is very useful in a scenario where we have to implement some procedures/actions on each array element. For example, multiplying each array element with some specific number, or finding the square root of each array element, and so on.

In this write-up, we will cover the below-listed learning outcomes of the array.map() method:

So, let’s get started!

What is array.map() in JavaScript?

Array map() is a built-in array function that creates a new modified array based on some specific criteria. The array.map() method invokes a callback function for each element of the array and creates a new modified array that contains the modified elements that are returned by the call-back function.

Basic Syntax

Here is the syntax of array.map() method in JavaScript:

array.map(function(current_Element, index, arr), thisValue)

The syntax shows the array.map() function can take multiple parameters, however, all these parameters are not mandatory:

  • function() parameter better known as the call back function is mandatory, and it will be called for every single element of the array.
  • current_Element is a required parameter that keeps the value of the current element.
  • index is an optional parameter that keeps the index of the currentElement.
  • arr is an optional parameter that keeps the current array.
  • thisValue is also an optional parameter whose default value is undefined and it utilizes the value passed to the function as “this” value.

What does array.map() method return?

In JavaScript, the array.map() method returns the result of the call-back function for every single array element.

How array.map() method works in JavaScript?

So far, we have learned the theoretical concepts of the map() method, now we will implement these concepts practically.

Task 1: Add 50 to each array element

In this example program, we will learn how to use array.map() method to add “50” to every single element of the given array:

var originalArray = [12, 16, 32, 27, -31, 17];

var result = originalArray.map(addValue);

function addValue(values){

return values + 50;

}

console.log("Resultant Array: " , result);

The above program performed the below-listed tasks:

  • Firstly, we created an array named “originalArray” that includes some positive as well as negative numbers.
  • Next, we utilized the array.map() method to add 50 to each element of the array.
  • To do so, we created a function named “addValue()” which will add 50 to the current element of the array, and afterward, it will return the modified element.
  • Finally, we utilized the console() method to print the array of modified elements:

The output proved that the array.map() method returned an array of modified elements (i.e., each element is incremented by 50).

Task 2: How to use array.map() method with an array of objects

In the following code block, we will learn how to use the array.map() method to join the empName and id:

var employees = [

{empName : "Mike", id: 12},

{empName : "Seth", id: 15},

];

var empDetails = employees.map(function(value){

return `${value.empName} ${value.id}`;

})

console.log("Employee Details: ", empDetails);

In this program, we utilized the array.map() method to traverse the array and combine the employee name and employee id:

This is how the array.map() method works with an array of objects.

Task 3: how to use built-in methods with array.map() method

In this example we will learn how to use an inbuilt method to find the square of the array elements:

var originalArray = [3, 2, 5, 9, 7];

var resultantArray = originalArray.map(sqrValue);

function sqrValue(values){

return Math.pow(values, 2);

}

console.log("Employee Details: ", resultantArray);

In this example program, we utilized the Math.pow() function to find the square of an element. We utilized the array.map() method to traverse through each array element and return the square of every single element of the given array.

This is how we can utilize any built in method along with array.map() method to achieve different functionalities.

Conclusion

In JavaScript, array.map() is a built-in array function that creates a new modified array based on some specific criteria. The array.map() method invokes a callback function for each element of the array and creates a new modified array that contains the modified elements that are returned by the call-back function. This write-up described what exactly array.map() method is? and how it works in JavaScript using some relevant examples.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.