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 ๐งโโ๏ธ
Top comments (1)
Great post, you can also include pros and cons of foreach loop over other loops.