Anatomy of the Map Method in JavaScript with Practice Problems

Explainer¶

The .map() method is used to create a new array with the results of calling a provided function on every element in the calling array. It's particularly useful for transforming each element of an array in the same way, without mutating the original array. This post breaks down the .map() method step by step to help you better understand how it works.

Example #1: Using the Map Method with an Array of Numbers¶

Let's use a simple example of doubling all the numbers in an array:

const numbers = [1, 2, 3, 4, 5];
 
const doubled = numbers.map((number) => {
  return number * 2;
});
 
console.log(doubled); // Output: [2, 4, 6, 8, 10]

Now, let's break it down in pseudo-code:

Initialize:

• numbers = [1, 2, 3, 4, 5]
• map function starts
• new empty array created to store results

First iteration:

• currentValue = 1 (first element)
• Operation: 1 * 2 = 2
• 2 is added to the new array

Second iteration:

• currentValue = 2 (second element)
• Operation: 2 * 2 = 4
• 4 is added to the new array

Third iteration:

• currentValue = 3
• Operation: 3 * 2 = 6
• 6 is added to the new array

Fourth iteration:

• currentValue = 4
• Operation: 4 * 2 = 8
• 8 is added to the new array

Fifth iteration:

• currentValue = 5
• Operation: 5 * 2 = 10
• 10 is added to the new array

End of array reached:

• New array [2, 4, 6, 8, 10] is returned as the result of .map()

Finally, our doubled array contains [2, 4, 6, 8, 10].

The .map() method creates a new array with the results of calling a provided function on every element in the array. It doesn't change the original array, which makes it a pure function and useful in functional programming paradigms.

Example #2: Using the Map Method with an Array of Strings¶

Here is another example, this time using an array of strings:

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
 
const upperCaseFruits = fruits.map((fruit) => {
  return fruit.toUpperCase();
});
 
console.log(upperCaseFruits); // Output: ['APPLE', 'BANANA', 'CHERRY', 'DATE', 'ELDERBERRY']

Now, let's break this down step by step in pseudo-code:

Initialize:

• fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry']
• map function starts
• new empty array created to store results

First iteration:

• currentValue = 'apple'
• Operation: 'apple'.toUpperCase() = 'APPLE'
• 'APPLE' is added to the new array

Second iteration:

• currentValue = 'banana'
• Operation: 'banana'.toUpperCase() = 'BANANA'
• 'BANANA' is added to the new array

Third iteration:

• currentValue = 'cherry'
• Operation: 'cherry'.toUpperCase() = 'CHERRY'
• 'CHERRY' is added to the new array

Fourth iteration:

• currentValue = 'date'
• Operation: 'date'.toUpperCase() = 'DATE'
• 'DATE' is added to the new array

Fifth iteration:

• currentValue = 'elderberry'
• Operation: 'elderberry'.toUpperCase() = 'ELDERBERRY'
• 'ELDERBERRY' is added to the new array

End of array reached:

• New array ['APPLE', 'BANANA', 'CHERRY', 'DATE', 'ELDERBERRY'] is returned as the result of .map()

Finally, upperCaseFruits now contains ['APPLE', 'BANANA', 'CHERRY', 'DATE', 'ELDERBERRY']

This example demonstrates how .map() can be used to transform each element of an array in the same way. It's a versatile method that can perform any kind of transformation on each element of an array.

Practice Problems¶

Here are 5 practice problems to help you learn how to use the .map() function, arranged from easiest to more complex. The first problem includes a function stub to get you started.

1. Square Numbers: Create a new array with the square of each number in the original array.

const numbers = [1, 2, 3, 4, 5];
 
function squareNumbers(arr) {
  return arr.map((number) => {
    // Your code here
  });
}
 
console.log(squareNumbers(numbers)); // Expected output: [1, 4, 9, 16, 25]

2. Convert Temperatures: Convert an array of Celsius temperatures to Fahrenheit.

3. Extract Property: Given an array of objects, create a new array containing just the value of a specific property from each object.

4. Format Names: Given an array of names in the format "lastname, firstname", create a new array with the names in the format "Firstname Lastname".

5. Calculate Ages: Given an array of objects representing people with their birth years, create a new array with their ages as of the current year.

These problems will help you practice using .map() in various scenarios, from simple transformations to more complex data manipulations. Try to solve them on your own, and if you need hints or solutions, feel free to ask!