Loops
📚 What are loops in JavaScript? They repeat a block of code. A classic `for` loop looks like `for (let i = 0; i < n; i++)` and runs a counted number of times. You can also loop arrays with `for...of` or use `while` when you want to keep going until something changes.
Appy Says…
JavaScript has five types of loops — more than Python. The most modern and cleanest are for...of and .forEach(). Knowing when to use which one is a mark of experience.
Loops in JavaScript
JavaScript has several loop types. The two you'll use most in modern code:
- •
for (let i = 0; i < n; i++)— classic counter loop - •
for (const item of array)— loop through every item (cleaner, preferred for arrays) - •
array.forEach(item => { ... })— modern functional style (same idea as for...of) - •
while (condition)— repeat until condition is false - •
for (const key in object)— loop through an object's keys
for vs for...of — index vs item
Imagine a playlist. for (let i = 0; i < playlist.length; i++) is like saying 'give me song at position 0, then position 1, then position 2…'. for (const song of playlist) is like saying 'give me each song, one at a time' — cleaner and less error-prone.
Real-World Examples
- •Rendering a list of posts:
posts.forEach(post => renderCard(post)) - •Calculating cart total:
let total = 0; for (const item of cart) { total += item.price; } - •Checking each notification:
for (const notif of notifications) { if (!notif.read) showBadge(); } - •Countdown timer:
for (let i = 10; i > 0; i--) { tick(i); }
Key Facts
- •
breakexits any loop;continueskips to the next iteration - •
array.map(fn)loops and returns a new array — used constantly in React - •
array.filter(fn)loops and returns items where fn returns true - •
array.reduce(fn, initial)loops to compute a single value (like a total) - •These array methods (
map,filter,reduce) are considered modern best practice over raw loops
Remember
In modern JavaScript / React code, you'll see .map() far more often than for loops. It's the go-to for transforming a list of data into a list of UI elements. Get comfortable with it early.
What You Learned
- •
for (let i = 0; i < n; i++)— classic counter loop - •
for (const item of array)— preferred for iterating arrays - •
array.forEach(item => { })— modern functional style - •
while (condition)— repeat until condition is false - •
map / filter / reduce— powerful array methods used in real apps
Key Facts
- →
breakexits any loop;continueskips to the next iteration - →
array.map(fn)loops and returns a new array — used constantly in React - →
array.filter(fn)loops and returns items where fn returns true - →
array.reduce(fn, initial)loops to compute a single value (like a total) - →These array methods (
map,filter,reduce) are considered modern best practice over raw loops
Real-World Examples
Remember
In modern JavaScript / React code, you'll see .map() far more often than for loops. It's the go-to for transforming a list of data into a list of UI elements. Get comfortable with it early.
Quick Quiz
In for (let i=0; i<3; i++), how many times does it run?