In this tutorial, you will learn how to apply the forEach and map methods to JavaScript arrays. This method provides an easy technique for looping over each item in a JavaScript array without creating a formal for loop.

Table of Contents

You can skip to a specific section of this JavaScript tutorial using the table of contents below:

• What is the JavaScript forEach Method?
• How to Create a Function Directly Inside the forEach Method
• What is the JavaScript map Method?
• The Differences Between the forEach and map Methods in JavaScript
• Final Thoughts

What is the JavaScript forEach Method?

The JavaScript forEach method allows you to easily loop over every item in a JavaScript array and apply a different function to those items.

The forEach method actually takes in a different function as its argument. This child function is applied to every item of the JavaScript array. This child function is often called the callback function.

To see an example of the forEach method in action, let's first create a basic function called logToConsole that takes a single argument and logs that argument to the console:

function logToConsole(item){

	console.log(item);

}

Next, let's apply logToConsole to every element within the following integers array:

const integers = [0, 1, 2, 3, 4];

integers.forEach(logToConsole);

This will log every item of the array to the console on a separate line, like this;

0

1

2

3

4

How to Create a Function Directly Inside the forEach Method

In the previous example, we used the forEach method to refer to a logToConsole function that we created previously.

This is not the most efficient way to use the forEach method, at least not for basic functions like logToConsole. Instead, we can actually pass the logToConsole function (refactored as an arrow function) directly into the forEach method, like this:

const integers = [0, 1, 2, 3, 4];

integers.forEach(item => console.log(item));

This code has the same output as before:

0

1

2

3

4

It is important to note that the item keyword in that arrow function is actually arbitrary. You can replace item with whatever keyword you'd like.

As an example, the following code has exactly the same functionality:

const integers = [0, 1, 2, 3, 4];

integers.forEach(x => console.log(x));

In summary, the forEach method is a useful tool for applying a function - referred to as the callback function - to every item within a JavaScript array. The forEach method itself does not return anything. It is used only to call the functionality of a different function within your JavaScript program.

What is the JavaScript map Method?

The JavaScript map method is often compared to an industrial machine on an assembly line. It takes in an input, performs some work on it, and returns an output.

To be more specific, the map method is used to apply an outside function to every item in a JavaScript array. The method returns a new array of the same length, where every item is equal to the output of the callback function applied to the corresponding item in the original array.

Let's see a few examples of the map method in action. To start, here's how you could use the map method to divide every item of an array by 5, and store the new values in a new array of the same length:

const multiplesOfFive = [5, 10, 15, 20];

multiplesOfFive.map(int => int/5);

//Returns [1, 2, 3, 4]

Let's consider a new array that stores the first name of everyone in my family. The map method would allow us to easily add our family's last name to everyone's

const names = ['Nicholas', 'Natalie', 'Melissa', 'Kelli', 'Keri', 'Kristi'];

names.map(name => name + ' McCullum');

//Returns ["Nicholas McCullum", "Natalie McCullum", "Melissa McCullum", "Kelli McCullum", "Keri McCullum", "Kristi McCullum"]

Note - yes, I really do have 5 sisters.

It is also possible to chain together multiple map methods if you want to apply more than one operation to every item in a JavaScript array.

As an example, let's return to our earlier example where we divided an array of integers by 5. Suppose that you wanted to add another step of dividing each integer by 10 (ignore the fact that you could simply multiple by 0.5 for a moment).

Here's how you could chain together multiple map methods to achieve this functionality:

const multiplesOfFive = [5, 10, 15, 20];

multiplesOfFive.map(int => int/5).map(int => int/10);

//Returns [0.1, 0.2, 0.3, 0.4]

It is common syntax to spread the map methods over different lines to create more readable code. Here is an example:

const multiplesOfFive = [5, 10, 15, 20];

multiplesOfFive


    .map(int => int/5)


    .map(int => int/10);

//Returns [0.1, 0.2, 0.3, 0.4]

The Differences Between the forEach and map Methods in JavaScript

The map method is similar to the forEach method in that they are both applied to JavaScript arrays. They also each accept callback functions.

The forEach and map methods also have one important difference.

Unlike the forEach method, the map method actually does return a data structure. More specifically, it generates a new array of the same length as the original array. Every item in the new array holds the output of the callback function applied to the corresponding item in the original array.

In summary, the forEach method is useful when you need to apply a function to every item in an array. The map method is better if you need to save those output values in a new array.

Final Thoughts

In this tutorial, you learned two new methods that can be used to iterate over JavaScript arrays: the forEach method and the map method.

Here is a brief summary of what you learned in this lesson:

• How to use the map method to apply a callback function to every item in an array
• How to use the map method to generate a new array whose values are the output of a callback function when applied to the corresponding item in the original array
• How to chain together multiple map methods to apply advanced logic to the items in a JavaScript array
• Why some developers prefer to chain together map methods on separate lines
• The important differences between the forEach method and the map method.