The map method in JavaScript

'map' is a method in JavaScript to process elements in an array.

var arrayOne = [1,2,3,4,5,6];
//an array defined to process using map method

Consider the above array 'arrayOne'. we are going to multiply an integer value 5 to every element in the array. We can do this by using the 'map' method.

The map method accepts a custom function as its parameter and this function processes the array elements. The custom function gets executed for every element in the array. let's define a function for the map method.

function processArray() {
    console.log('custom function executed')
   //custom function defined, for now we are just logging a text in the console to see how it works
}

Now we are going to use the above function in the map method.

var arrayOne = [1,2,3,4,5,6]
//array defined

function processArray() {
    console.log('function executed')
}
//custom function defined, for now, we are just logging a text in the console to see how it works

arrayOne.map(processArray)
//Calling the map method and passing a custom function to the map method as a parameter.

Run the above script and check the browser console. You will see that the function is executed six times as we have six elements in the array. So the custom function runs for every element in the array.

Now we have to get the array element value in the custom function to process it. How the function gets the array element? The custom function receives a few parameters and the first parameter is the array element value. Let's add a parameter in the custom function and output it into the console.

function processArray(arrayElementValue) {
    console.log(arrayElementValue)
}

If you update the 'processArray' function and run the script, you will see all the array values in the console.

So we get every array element value in the custom function to process it. How do we return the processed value? simple, just use the return statement. see the following example

function processArray(arrayElementValue) {
    var updatedValue = arrayElementValue * 5;
    return updatedValue ;
}

Now the script returns a new value after processing the received value. Next, we need to collect all the processed values in a new array, so let's do that

var arrayOne = [1,2,3,4,5,6];
// Array defined

function processArray(arrayElementValue) {
    var updatedValue = arrayElementValue * 5;
    return updatedValue ;
}
//defined a custom function to update the array values (multiply with 5)

var updatedArray = arrayOne.map(processArray)
//updated array is assigned to new array

console.log(updatedArray)
//logging updatedArray to console

Now we get the processed array output in the console

We can simplify the above code in the following way

var arrayOne = [1,2,3,4,5,6]
var newArray = arrayOne.map(function processArray(arrayElementValue) {
    return arrayElementValue * 5;
})
console.log(newArray)

We can further simplify in the following way using ES6 syntax

var array_one = [1,2,3,4,5,6]
var newArray = array_one.map(arrayElementValue=> arrayElementValue * 5)
console.log(newArray)

map function syntax

array.map(function(arrayElementValue, arrayElementIndex, array), thisValue)

In addition to the array element value, the custom function receives the array index value and the array itself as parameters.

var arrayOne = [1,2,3,4,5,6]
function processArray(arrayElementValue, arrayElementIndex, theArray) {
    console.log(' Array element index: ' arrayElementIndex + ' arrayElementValue: '+arrayElementValue);
    return arrayElementValue * 5;
}
var newArray = arrayOne.map(processArray)
console.log(newArray)

arrayElementValue is the value of the array element, arrayElementIndex is the index of arrayElementValue in the array and theArray is the original array we are processing (arrayOne)

In addition to the custom function, the map method has an optional parameter. This parameter allows us to pass a specific value (object, variable, etc...) to the processing function.

Suppose we have to multiple every element with a specific value, we can use the optional parameter to pass this value to the processing function

The second parameter can be accessed in the custom function using the 'this' keyword. see the following example where we are passing a value to the custom function.

var arrayOne = [1,2,3,4,5,6]
var updatedArray = array_one.map(function(arrayElementValue) {
    // console.log(this)
    return this + arrayElementValue;
},10)
console.log(updatedArray)

In the following code example, we are passing an object to the custom function and updating each array element.

var arrayMonths = ['May', 'June',  'July']
var updatedAarray = arrayMonths .map(function(elementValue) {
    return this.start + elementValue + this.end
},{ start: 'Hello ', end: ' !' })
console.log(updatedAarray)

Hope you like this articles, Have a good day