The JavaScript for..of loop
THE AHA STACK MASTERCLASS
Now open with 50% off launch discount!
The for...of
loop is my favorite way to loop in JavaScript.
It combines the conciseness of forEach
loops with the ability to break.
The syntax is this:
const list = ['a', 'b', 'c']
for (const item of list) {
console.log(item)
}
You can break at any point in time using break
:
const list = ['a', 'b', 'c']
for (const item of list) {
console.log(item)
if (item === 'b') break
}
You can skip an iteration using continue
:
const list = ['a', 'b', 'c']
for (const item of list) {
if (item === 'b') continue
console.log(item)
}
You can get the index of an iteration using entries()
:
const list = ['a', 'b', 'c']
for (const [index, value] of list.entries()) {
console.log(index) //index
console.log(value) //value
}
Notice the use of const
. The for..of
loop creates a new scope in every iteration, so we can safely use that instead of let
.
→ Get my JavaScript Beginner's Handbook
I wrote 20 books to help you become a better developer:
- Astro Handbook
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- TypeScript Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux Commands Handbook
- C Handbook
- JavaScript Handbook
- CSS Handbook
- Node.js Handbook