Learn how to use the forEach method in JS!
Ustariz Enzo
Posted on December 20, 2021
Hey fellow creators,
The forEach method is really handy when you’re working with arrays or nodelists.
It allows you to run a callback function for each element in those containers.
Let’s learn how to use it in less than a minute!
If you prefer to watch the video version, it's right here :
1. How to use it.
To use it, you need to feed it with a callback function, which can take up to three parameters.
Those parameters are:
- The current value
- The index
- And the array/nodelist that you’re working with.
const array = [1, 2, 3];
array.forEach((current, index, arr) => {
console.log(current, index, arr);
});
Take a look in your console/terminal and you’ll see:
2. Let’s create three buttons to have a real example.
In an HTML file, create three buttons:
<button data-action="modify">Modify</button>
<button data-action="delete">Delete</button>
<button data-action="update">Update</button>
In your JS file, select the buttons:
const buttons = document.querySelectorAll('button');
The .queryAll method returns a nodelist, and the nodelists also have access to the forEach method in their prototype.
Thus, we can use it to attach an event listener to each button :
buttons.forEach(btn => {
btn.addEventListener('click', (e) => {
alert(e.target.getAttribute
('data-action'))
})
});
This is a basic example but you now know how useful this method is!
You can easily avoid code repetition.
Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool
See you soon!
Enzo.
Posted on December 20, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.