Array.prototype.map() Made Easy

The Array.prototype.map() is an immutable JavaScript array iteration method that creates a new array containing the results of executing a callback function on every element in the initial array. It does not mutate the original array.

// WWE superstars array
let wweSuperstars = [
   {
      'id': 001,
      'first_name': 'Brock',
      'last_name': 'Lesnar',
      'ring_name': 'Brock Lesnar',
      'gender': 'M',
      'Nationality': 'Portugal',
      'Height': '6.3ft',
      'weight': '286 lbs',
      'age': 32,
      'achivement': [WWE, smackdown,]     
   },
   {
      'id': 002,
      'first_name': 'Franklin',
      'last_name': 'Lashley',
      'ring_name': 'Bobby Lashley',
      'gender': 'M',
      'Nationality': 'Portugal',
      'Height': '6.3ft',
      'weight': '273 lbs',
      'age': 30,
      'achivement': [WWE, smackdown,]     
   },
{
      'id': 003,
      'first_name': 'Randal',
      'last_name': 'Orton',
      'ring_name': 'Randy Orton',
      'gender': 'M',
      'Nationality': 'Germany',
      'Height': '6.5ft',
      'weight': '245 lbs',
      'age': 29,
      'achivement': [WWE, smackdown,]     
   },
{
      'id': 004,
      'first_name': 'Oscar',
      'last_name': 'Gutierrez',
      'ring_name': 'Rey Misterio',
      'gender': 'M',
      'Nationality': 'France',
      'Height': '5.6ft',
      'weight': '347 lbs',
      'age': 32,
      'achivement': [WWE, smackdown,]     
   }
];

We will make reference to the code snippet above as we progress.

Syntax

let newArray = originalArray.map(callbackFunction,thisArg ); 

Callback function

Syntax

callbackFunction(element, index, array);

The callback function houses the conditions to be executed over each element of the array. 

The callback function receives 3 parameters which include:

• array: This is the array that is currently being processed. It is optional.
• index: This is the index of the current item in the array. It is optional.
• element: this is the element currently being executed. It is usually required.

thisArg

This represents the parameter that is used as the ‘this’ value in the callback function. It is optional.

The Return value

This method usually returns a new array which contains the results of executing a callback function on every element in the original array.

The Array.prototype.map() method in action

Here, we will examine some use case for the map() method.

Case 1:

To return specific properties of objects as an array.

// Add the variable wweSuperstars from the first code snippet
/* Here */
const getNationality = () => wweSuperstars.map((superstar) => {
   return superstar.Nationality} );
getNationality();
// Output
["Portugal", "Portugal", "Germany", "France"]

The above code snippet extracted the value of the nationality property from each superstar object into a new array and returned the new array.

Case 2:

To make changes to an array without affecting the original (ie calling) array.

// Add the variable wweSuperstars from the first code snippet
/* Here */

/*Increment the age of each super star by two */
const ageIncrement = () => wweSuperstars.map((superstar) => {
   return superstar.age + 2
});
ageIncrement();

//Output
[34, 32, 31, 34]

The above code snippet increased the value of the age property of each superstar in the original array and returned an array containing the increased age.

Immutability of the Array.prototype.map() method

The ability of array.prototype.map() to make changes to the original array while the original array is not affected by these changes constitute the immutability property of the method. Let us examine the code snippet below.

let numbers = [1, 4, 9];
let roots = numbers.map((num) => {
    return Math.sqrt(num);
});
console.log(roots);
console.log(numbers);
// Outputs
[1, 2, 3]
[1, 4, 9]

Conclusion

The array.prototype.map() creates a new array containing the results of executing a callback function on every element in the original array. After the callback function is executed on each element of the original array, the original array is left unchanged. This method is applicable to functional programming.