por JavaScript methods They are functions that belong to a specific object. Therefore, they are a very important part of functional programming, which is based on using functions to create more efficient and automatic code. In this post, We will teach you what the forEach method is and how to use it in JavaScript to manipulate the content of a array.
Do arrays have methods?
In our post on JavaScript objects we have introduced you to the idea that practically every element in this programming language acts as an object, since it is part of the prototype chain and has functions that accompany it. Therefore, the arraysalso known as lists of elements, have methods. These methods are very useful when it comes to browsing, adding, filtering and modifying your elements.
If you want to know more about how the methods of a arraywe invite you to read our post about arrays and functional programming. Next, we will explain how one of them works: the forEach method in JavaScript.
How does the forEach method work in JavaScript?
Like the other methods that we can execute for a arraywhich you can read about in this post by Vincent Will, The forEach method allows us to execute an action for all the elements that make up our list or array.
So what does the forEach method in JavaScript do? Well, this method tells us that, given a array any, we apply the method and insert a function. The function that is inserted will be executed once for each of the elements of our array. Here is an example:
[1, 2, 3].forEach(val => console.log(val))
What we are executing in the previous method is that, given the array which contains elements 1, 2 and 3, We create a function that paints each of these values. This is a way to go through the elements of a array in a functional way, instead of using a loop for. The difference between these two options is that the loop for allows us to stop the repetition with the command break. In a forEach we have no control over the route.
Keep in mind that when we insert a function as the parameter of a method, we are entering the territory of callback. If you don’t know anything about this territory or just want a refresher, we invite you to read our posts on what callbacks are and how to use them in JavaScript.
inside our callback, we must define a arrow function that tells us that for each element or value a certain function will be created. The way you write this function is irrelevant, but we have done it with the => symbol. We present another example in the following lines of code:
const array1 = [‘a’, ‘b’, ‘c’];
array1.forEach(element => console.log(element.toUpperCase()));
What the previous function does is, given the array 1 that we call just before the method, a function will be applied in which each of its elements is painted in uppercase. As you see, we can name the element with any word we want. In these cases we have used elements either valbut you can choose the one that best suits your project.
In this case, the function causes each element to be painted in uppercase using the command console.log and the method object.toUpperCase. So the result of this code will be the following lines of code:
>’A’
>’B’
>’C’
Something that we must keep in mind when using the forEach method in JavaScript is that this does not return any value. Therefore, if, for example, we have the following constant matched to a forEach method, we will not get any value:
const array2 = array1.forEach(element => console.log(element.toUpperCase()));
When painting this constant using the command console.log(array2) we will get a result undefined, because this method never returns values to us.
What is the next step?
Now that you know how the forEach method works in JavaScript, we invite you to take the next step on your path to mastering this programming language with the Full Stack Web Development Bootcamp. In this intensive training, you will also learn to master other programming languages, such as CSS and HTML, so that In a few months you will become an expert in web development. What are you waiting for to go one step further and sign up? Do it now!