Different programming languages support similar data structures and different ways to interact with those data structures. For example, arrays in JavaScript can be manipulated using different methods. One of those methods is the map ()function.

In this article, we'll learn how to use the map() function to iterate through an array of elements.

Let's get started.

Basics of the map() method

The map method is a function that expects another function as an input and returns a new array containing the transformed values. The input function determines what the transformed values will be.

This means that each item inside the original array will go through the transformation to form the new array.

Here is the syntax for the map() method.

const newArray = originalArray.map((element, index, array) => { /* Define the transformation */ });
  • newArray : This captures the new array after transformation.

  • originalArray : The array to be mapped.

  • .map(): This is the map method that takes in another function.

  • element: This is the current element that is being processed in the array

  • () => {}: This is the function that goes inside the map function. Inside the function body, you define the transformation that each item will go through.

    Note: The map() method passes the current element, the index of the current element, and the array as the arguments to the function inside.

Let's see it in action.

Usage and Examples.

Example 1: Doubling Each Element

Let's say we have an array of 5 numbers as shown below.

let numbers = [3, 56, 2, 48, 5]

We want to double each of these numbers. We can use the map() method to achieve it easily.

using the map()method syntax, this is how that function will look like.

let numbers = [3, 56, 2, 48, 5]

const results = numbers.map((number)=> {
    return number * 2
})

console.log(results)

as you can see from the example above, we have taken the numbers array and used the map() method on it. The map() method iterates through each number in the numbers array and for each item (number) in the numbers array, it gets passed as an input into the function inside the map() method.

This means that each number is an input into the function inside the map() function. Each of those numbers is then multiplied by two to double it. The output of the map() method is then captured by the results variable which can then be logged into the console.

When you log results into the console, you will notice that it is a new array with the numbers from the first array doubled.

Output:

Img 1.png

Map() VS forEach

The map() method and forEach loop are not very far off. We can achieve the same thing as above using the forEach loop. Let's see it in action and note the differences.

let numbers = [3, 56, 2, 48, 5]

const newArray = []
numbers.forEach((number) => {
    newArray.push(number * 2)
})
console.log(newArray);

Img.png

As you can see, using the two methods, we can achieve the same thing. So what is the difference between the two and where should each be used?

Differences between forEach and Map()

As you can see, using the forEach method, we have to create an empty array and push the items into the empty array manually which requires more steps. This is because forEach loop does not create a new array automatically like the map() method does. The purpose of the forEach is to iterate over an array and perform some action on each element without the intention of creating a new array. Here is an example.

Example 1:

let numbers = [3, 56, 2, 48, 5]

numbers.forEach((number) => {
    console.log(number)
})

Output:

Img 2.png

As you can see, when we log number into the console, each number is printed in a new line. The map() method would return the same thing. However, consider this next example.

Example 2:

//forEach

let numbers = [3, 56, 2, 48, 5]

console.log (numbers.forEach((number) => {
    return number
}))

This example returns undefined as shown in the output.

Img 3.png

Here is the same example using the map() method

// map()

let numbers = [3, 56, 2, 48, 5]

console.log (numbers.map((number) => {
    return number
}))

Rather than returning undefined, it returns an array as shown below.

Img 4.png

That is the difference between the two methods. forEach does not return an array while the map() method does.

it is up to you now to know which one suits your case more and apply it.

Summary

To summarize the whole thing, the map() method is a very powerful tool for transforming elements in an array. The return value is another array that has gone through the transformation. Alternatively, you can use the forEach loop to get an array as an output, but this requires more steps. It is up to you to know when to use which.

If you found the article helpful, consider subscribing and sharing the article.

Thank you for reading : )

Table of Contents
Great! Next, complete checkout for full access to GeekBits.
Welcome back! You've successfully signed in.
You've successfully subscribed to GeekBits.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info has been updated.
Your billing was not updated.