The map function in JavaScript can be used to create a new array based on another array while running a process on each element of the copied array. For example, you could use the map function to multiply every number in a list and then return a list of the new results.

The map function has one parameter which is another function with one parameter. The anonymous function is executed on every element in the array, the parameter within the anonymous function will be each element in the array. The return statement of the anonymous function returns the new value that will be added to the new array after the map operation.

The below code snippet shows an array of numbers 1 to 5 in a variable called 'myNumbers'. The map function is then called on this array and it returns each element multiplied by 2. This means the 'result' variable will contain an array containing the number: 2, 4, 6, 8, and 10. The original array 'myNumbers' will not be affected by the map operation and will still contain the same numbers.

var myNumbers = [1, 2, 3, 4, 5];
var result = myNumbers.map(function(i){ return i * 2 });
// result = [2, 4, 6, 8, 10];

The parameter of the map function does not need to be an anonymous function. You can define a function elsewhere in the code and then pass that into the map function. In the below code snippet a function has been assigned the variable 'myFunc' and then this function is passed into the map function.

var myNumbers = [1, 2, 3, 4, 5];
var myFunc = function(i){ return i * 2; }
var result = myNumbers.map(myFunc);

The map function does not need to return a multiple of each element of the array, it doesn't even need to interact with the elements in the array. The below snippet uses the map function on the 'myNumbers' array but inner function only returns the number '3' for each iteration. This means the array returned from the map function, and the value of the 'result' variable, will contain a list of 5 numbers but the value of all the numbers will be the number '3'.

var myNumbers = [1, 2, 3, 4, 5];
var myFunc = function(i){ return 3; }
var result = myNumbers.map(myFunc);
// result = [3, 3, 3, 3, 3];

The map function can be used on any type of array that contains any type of variables. The example below shows using the map function on an array of objects. Each object has three fields, 'firstName', 'lastName', and 'age'. The map function is used to combine the 'firstName' and 'LastName' fields into one field called 'fullName'. This means the result of the map function will be a new array with three objects that only have two fields, 'fullName' and 'age'.

var people = [
{firstName: 'John', lastName: 'Smith', age: 32},
{firstName: 'Jane', lastName: 'Doe', age: 27},
{firstName: 'Peter', lastName: 'Hammond', age: 65},
];
var myFunc = function(i){
fullName = i.firstName + ' ' + i.lastName;
return {fullName: fullName, age: i.age};
}
var result = people.map(myFunc);

Below is the result of the above map function, as you can see the 'firstName' and 'lastName' fields are not included as they were not returned from the inner function. This shows how you can use the map function to manipulate objects and create new objects from them. Remember, the map function does not affect the original array and returns a new array with the modified values.

[
{fullName: 'John Smith', age: 32},
{fullName: 'Jane Doe', age: 27},
{fullName: 'Peter Hammond', age: 65}
]

This article was originally posted on https://acroynon.com/