Javascript Basics - Introduction to forEach()

Christine Harper — Sat, 16 Oct 2021 22:43:06 +0000

First, lets take a quick look at a basic array 👀

let array = [element0, element1, element2];

Each element in an array also has a corresponding index position. The first element in an array is at index 0, the second element is at index 1, and so on.

forEach() Syntax

We can use the forEach() method to execute a callback function for each non-empty element in an array. Let's look at the basic syntax of the forEach() method 🧐

array.forEach(function (element, index, array) {
  // do something for each element
});

The callback function takes up to three parameters:

element - refers to the current element at each iteration. This is a required parameter, but you can name it whatever you like!
index - this parameter is optional, but it refers to the index position of each element. Remember that the first index position in an array is 0
array - this parameter is optional and refers to the array that the elements that you are iterating over are from

forEach() In Action

Now let's see the forEach() method in action!

Let's pretend we have a class with a group of students. We will put their first names into an array 🍎

let classList = ["Linda", "Ainslie", "Tracey", "Rick"];

Now, let's use the forEach() method to iterate over this array and say 'Hello' to each student 🙋‍♀️

classList.forEach(function (student) {
  console.log(`Hello, ${student}!`);
});

output:

// Hello, Linda!
// Hello, Ainslie!
// Hello, Tracey!
// Hello, Rick!

In this example we are using the forEach() method on the classList array. The parameter 'student' refers to the student names in the array. During the first iteration, 'student' refers to the element 'Linda'. In the second iteration it refers to 'Ainslie', and so on. The callback function in this example will print 'Hello' and the student name in the console. The function is called for every student in the classList array. It runs sequentially in ascending order from the first element in the array to the last.

Now let's add another parameter and see how we can access the index position for each element in the array 📍

When you add the index parameter, it must be the second parameter passed into the callback function.

classList.forEach(function (student, index) {
  console.log(`Hello, ${student}! Your index number is: ${index}.`);
});

output:

// Hello, Linda! Your index number is: 0.
// Hello, Ainslie! Your index number is: 1.
// Hello, Tracey! Your index number is: 2.
// Hello, Rick! Your index number is: 3.

forEach and Arrow Functions

The forEach() method uses a very clean and concise syntax compared to a regular for loop. You will often see people use arrow functions passed in as the callback. This is how our example could be written using an arrow function.

classList.forEach((student, index) => {
  console.log(`Hello, ${student}! Your index number is: ${index}.`);
});

If you are only accessing the elements, you can tidy up the code even further 🧹

classList.forEach(student => console.log(`Hello, ${student}!`));

Special Characteristics of forEach()

The forEach() method syntax is a little easier to read and write than some of the other looping methods. There are some key differences to be aware of: 🕵️‍♀️

The following are some characteristics that are specific to forEach() :

loops over every non-empty element in an array
loops in ascending order from index 0 to the end of the array
you cannot break or end the loop early
it will not change the original array (unless your callback function executes an operation to do so)
it will always return undefined

Read more on MDN to become a forEach() wizard 🧙‍♀️

MDN - Array.prototype.forEach()

DEV Community: Christine Harper

Javascript Basics - Introduction to forEach()

forEach() Syntax

forEach() In Action

forEach and Arrow Functions

Special Characteristics of forEach()