por In JavaScript, there are many functions that make it easier for us to execute various actions. Under this category, There are the methods that allow us to manipulate the elements of a list or object array. Among the most popular are the methods map, reduce, filter and forEach. In this post, we will teach you how to write the forEach method in JavaScript so you can use it in your own projects.
What is the forEach method in JavaScript?
In our post about the forEach method in JavaScript we have explained that this method tells us that, given a array any, we apply the method and insert a function. The function that is inserted inside the parentheses of the method will be executed once for each of the elements of our array. This means that the forEach method allows us to pass any function for each of the elements of a array.
Particularities of the forEach JavaScript method
The particularity of this method is that, unlike methods such as map and filter, this does not return us a new array with the manipulated elements. To do this, we must insert a command as part of the function console.log, responsible for painting on the screen. Below, we give you two examples.
First example:
[1, 2, 3].forEach(val => console.log(val))
Second example:
const array1 = [‘a’, ‘b’, ‘c’];
array1.forEach(element => console.log(element.toUpperCase()));
As you can see, we can write the forEach method in JavaScript by calling array by name or by inserting it directly. But there are still more options and, below, we present them to you.
How to write forEach method in JavaScript?
By checking the Mozilla Developer Network page about the feature array.prototype.forEachwe will see that the syntax it proposes is the following:
arr.forEach(function callback(currentValue, index, array) {
// your iterator
}[, thisArg]);
So first there’s a array original, then the method and finally a callback. Remember that we call callback to any function that is used as a parameter. This callback will be formed by a current value, which in our case is written as elements in an example and val in the other one. Until then, this is the same as what we have done before.
Now, What this syntax adds to us are the parameters index and array. Keep in mind that these parameters are optional, which is why our examples work without them. The parameter index refers to the order of the elements or index of our array. For its part, the parameter array refers to the element on which we are applying the forEach method, that is, the array original.
In Visual Studio Code, when we start writing the forEach method in JavaScript, the assistant of the software It will also list the parameters of this syntax. Now that you know these optional parameters a little better, it’s time to test them by adding them in a function:
setAwayTeams ( ) {
this.matchDaySchedule.forEach(matchDay => {
matchDay.forEach(function (currentValue, index) {
if (index === 0) {
match.away = this.teams(this.teams.length -1).name
}
The previous function uses the new parameter index to create a function where, if the index is equal to zero, an action will happen. This is done with the help of the keyword if. This way, we can insert other parameters when writing the forEach method in JavaScript and use them to guide its behavior. In this case, what we are saying is that an action will be available only for the first element of the array, to which position zero is attributed.
To simplify this function, we can use variables. So, the final code would look like the one you see below:
setAwayTeams ( ) {
const teamNames = this.teams.map (team => team.name);
let maxAwayTeams = this.teams.length – 1;
this.matchDaySchedule.forEach(matchDay => {
matchDay.forEach(function (match, index) {
if (index === 0) {
match.away = teamNames [maxAwayTeams]
}
We recommend using variables to define complex values in forEach JavaScriptas they can help us maintain flexible code and simplify our actions.
How to know more about the forEach method in JavaScript?
After reading this post, you know exactly what are the different ways to write the forEach method in JavaScript and you have taken a big step on your way to mastering this programming language. Now, The next step is to dedicate yourself completely to learning and practicing its development. To do this, we recommend our Full Stack Web Development Bootcamp, where You will learn everything you need to become an expert in web development in a few months, including programming languages such as JavaScript, HTML and CSS. Dare to enroll!