This content originally appeared on Go Make Things and was authored by Go Make Things
JavaScript provides a handful of methods and techniques for looping over arrays and elements and doing things with them. So… which approach should you use, and why?
Today, we’re going to look at the different ways you can loop over things with vanilla JS, and when and why to choose one over the other.
Let’s dig in!
An example array
For today’s article, lets use an array of sandwiches as an example.
let sandwiches = ['turkey', 'tuna', 'ham', 'pb&j'];
We’ll loop over it and log each item to the console, but in a real site or application, you might want to manipulate the data in some way.
The for loop
You can use a for loop to iterate over arrays, NodeLists, and other array-like objects. This is the old-school way to loop over things.
// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
for (let i = 0; i < sandwiches.length; i++) {
console.log(i); // index
console.log(sandwiches[i]); // value
}
- In the first part of the loop, before the first semicolon, we set a counter variable (typically
i, but it can be anything) to0. - The second part, between the two semicolons, is the test we check against after each iteration of the loop. In this case, we want to make sure the counter value is less than the total number of items in our array. We do this by checking the
.lengthof our array. - Finally, after the second semicolon, we specify what to run after each loop. In this case, we’re adding
1to the value ofiwithi++.
We can then use i to grab the current item in the loop from our array.
The for...of loop
A more modern approach, you can use for...of to loop through iterable objects. That includes strings, arrays, and other array-like objects such as NodeLists, HTMLCollections, and HTMLFormControlsCollection, but not plain objects ({}).
In a for...of loop, you define a variable to represent the current item of the iterable that you’re looping over. Inside the block (the stuff between curly brackets), you can use that variable to reference the current item.
// logs "turkey", "tuna", "ham", "pb&j"
for (let sandwich of sandwiches) {
console.log(sandwich);
}
Skipping and ending loops
You can skip to the next item in a for or for...of loop using continue, or end the loop altogether with break.
// logs "turkey", "tuna", "pb&j"
for (let sandwich of sandwiches) {
// Skip to the next item in the loop
if (sandwich === 'ham') continue;
console.log(sandwich);
}
// Logs "turkey", "tuna"
for (let sandwich of sandwiches) {
// Skip to the next item in the loop
if (sandwich === 'ham') break;
console.log(sandwich);
}
Here’s a demo of continue and break.
The Array.forEach() and NodeList.forEach() methods
The Array.forEach() and NodeList.forEach() methods provide a simpler way to iterate over arrays and NodeLists while still having access to the index.
You pass a callback function into the forEach() method. The callback itself accepts three arguments: the current item in the loop, the index of the current item in the loop, and the array itself. All three are optional, and you can name them anything you want.
// logs 0, "turkey", 1, "tuna", 2, "ham", 3, "pb&j"
sandwiches.forEach(function (sandwich, index) {
console.log(index); // index
console.log(sandwich); // value
});
Here’s a demo of the Array.forEach() method.
Unlike with for and for...of loops, you can’t end a forEach() callback function before it’s looped through all items. You can return to end the current loop (like you would with continue), but there’s no way to break the loop.
// Skip "ham"
// logs "turkey", "tuna", "pb&j"
sandwiches.forEach(function (sandwich, index) {
if (sandwich === 'ham') return;
console.log(sandwich);
});
Here’s a demo of skipping items in an Array.forEach() loop.
Which method should you use, and why?
In most cases, most of the time, I use a for...of loop. It’s simple and straightforward, and easy to type.
There are a few situational exceptions to that, however…
- If I need the index of the item, I’ll use the
Array.forEach()orNodeList.forEach()method. - If I need the index and want to end the loop early once a condition is met, I’ll use a
forloop.
I try to avoid for loops unless there’s a compelling reason to use them. They’re hard to read. They’re hard to write. They’re just messy.
The humble for...of loop is the real workhorse of my code bases!
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2022-01-10T15:30:00+00:00) What’s the best way to loop over arrays and elements in JavaScript?. Retrieved from https://www.scien.cx/2022/01/10/whats-the-best-way-to-loop-over-arrays-and-elements-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.