for loop might be a bit long to write, but it has a lot of excellent properties:
- Works with
continuestatements for better looping control.
- Both initial and increment expressions can do multiple things.
- Condition is not limited to iterable size.
- Fast across various scenarios.
Let's break the script down to five steps each
for loop follows:
- Execute initial expression (
let i = 0in the above example).
- Evaluate the condition (
i < array.length). If it is false - the loop terminates. If true:
- The statement within the loop is executed (
- Finally, the increment expression will evaluate (
- The loop goes back to step 2 until it is false.
If in doubt of which loop to use, pick the classic. To optimize speed, cache the length used for condition:
This loop is blazing fast for very small iterables. From martech perspective, it is a fantastic tool to iterate over NodeLists/HTMLCollections when working with DOM. Works great for working with outputs of API calls. Worth also using for operating on split-string-arrays (for example comma-separated strings).
It has many qualities that set it apart from the classic
It can iterate over key-value paired iterators (for example map or even object - thanks to
It can catch array values along with indexes:
It can destructure object on the go:
In this example,
for...of loop not only iterates over objects within an array but also automatically destructures them by getting the value of the
name key. Thanks to it, the
console.log will be printing the names in one line.
Thanks to existance of special function variable
for...of can loop over undefined amount of arguments.
for...in loop is a good idea when you want to loop over object prototype methods and properties. Any other scenario? Not worth it. Don't use it. Just don't.
forEach iterates directly over an array. It applies function to each item but does not return anything.
It differs from other loops:
- No need to define an iteration variable.
- In the callback function, we can leverage up to three optional parameters for an array: item, index, array.
- Because it uses a callback function, the logic is block scoped.
In most scenarios, the
for...of loop will be a better choice.
while loop executes its statement as long as the condition evaluates to true.
To break out of
while loop, there must be logic within it that will change the condition to false (or a
while loop is the best option for iterating over big arrays.
while, but the code runs once before evaluating the condition.
Perfect when you need to run an API call, check whether there are more pages of outcomes and act accordingly.
You Should Know
As you can see, in the first line we added a label for the first
for loop. Then, in the statement within the second
for loop, we used
break followed by the label. Once executed, it will break both for loops, even if there were still iterations in the main one. The same approach works with the