Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 2 · 4 / 12Loops
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Loops
01 / 10Overview

Loops

You'll learn to repeat code with for, for...of and while, and to count how many times a loop runs.

Why it mattersAdding up marks, checking every message, printing every player: any job done "for each" item needs a loop.
about 90 min·needs: Values and variables, Making decisions with if
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Article
Loops: while and forjavascript.info · 15 min · English
MMamun's noteRead "The while loop" and "The for loop". Skim do…while. Skip labels; you won't need them.
Video
Modern JavaScript Tutorial #3: Control flowYouTube · Net Ninja · 16 min · English
MMamun's noteWatch 1:28–17:32, on for loops and while loops. Stop when he moves on to if statements.
ArticleOptional
Arrays: loopsjavascript.info · 5 min · English
MMamun's noteRead only the "Loops" section. It shows for...of, the loop you'll use most with lists.
VideoOptional
JavaScript Bangla tutorial #35: for loopYouTube · Learn with Sumit · 24 min · Bangla
MMamun's noteIn Bangla. A full lesson on the for loop. Watch it if the three parts inside the brackets still feel confusing.
03 / 10

See it step by step

Watch a for loop count, check and add, round by round.

sum0
sum.js
1let sum = 0;
2for (let i = 1; i <= 3; i++) {
3 sum = sum + i;
4 console.log(i, sum);
5}
6console.log("done", sum);
sum starts at 0. The loop has not started yet.
Step 1 / 12
04 / 10

Explanation

You want to do the same thing many times: add up 30 students' marks, or print every player in a team. Copying the same line 30 times is slow and easy to get wrong. A loop repeats a block of code for you.

The classic loop is for. It has three parts inside the brackets, split by ;:

for (let i = 1; i <= 3; i++) {
  console.log(i);
}
// 1, then 2, then 3

Read it like a cricket over counter. Start at i = 1. Keep going while i <= 3 is true. After each round, do i++, which adds 1 to i. Each round is called an iteration.

Often you have a list of values in square brackets, called an array: [70, 85, 60]. You'll meet arrays properly soon. To visit each item, for...of is the easiest loop:

for (const mark of [70, 85, 60]) {
  console.log(mark);
}

while is the simplest loop: while (balance > 0) { ... } repeats as long as the condition is true. Make sure something inside changes, or it never stops.

People often make an off-by-one mistake: the loop runs one time too many or too few. i < 5 stops before 5; i <= 5 includes 5. When you count from 0, use <. When you count from 1, use <=.

Later you'll see map and filter. They are loops with a job already built in: make a new list, or keep some items. In React you'll use them more than for, but they work the same way underneath.

When you read a loop, find three things: where it starts, when it stops, and what changes each round.

Words to recognise
loopforfor...ofwhilei++iterationoff-by-onearray
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
const runs = [4, 6, 1, 0, 4, 6];
Mentor note · line 1
Runs from each ball of one over, in a list called an array. runs.length is 6.
2let total = 0;
3
for (let i = 0; i < runs.length; i++) {
total = total + runs[i];
6}
7console.log(total); // 21
8
for (const ball of runs) {
10 if (ball === 6) console.log("Six!");
11}
12
13let wickets = 0;
while (wickets < 10) wickets = wickets + 1;
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1for (let i = 0; i < 3; i++) {
2  console.log(i);
3}
What does this print?
DrillFind the bug2 / 2
This loop should add 1 + 2 + 3 + 4 + 5, so sum ends at 15 and the loop runs 5 times. Fix the code so both checks pass.
1
2
3
4
5
6
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3How many times does for (let i = 0; i < 5; i++) run?
  2. 2 / 3In for (const name of ["Tamim", "Liton"]), what is name in the second round?
  3. 3 / 3let n = 3; while (n > 0) { n = n - 1; } What is n after the loop?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Loops?

10 / 10

Done

You can now
Read a for loop and say how many times it runs and what each variable holds at the end.
Next: Functions in, values out Back to Phase 2
On this page
  1. 01Loops
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Loops
01 / 10Overview

Loops

You'll learn to repeat code with for, for...of and while, and to count how many times a loop runs.

Why it mattersAdding up marks, checking every message, printing every player: any job done "for each" item needs a loop.
about 90 min·needs: Values and variables, Making decisions with if
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Article
Loops: while and forjavascript.info · 15 min · English
MMamun's noteRead "The while loop" and "The for loop". Skim do…while. Skip labels; you won't need them.
Video
Modern JavaScript Tutorial #3: Control flowYouTube · Net Ninja · 16 min · English
MMamun's noteWatch 1:28–17:32, on for loops and while loops. Stop when he moves on to if statements.
ArticleOptional
Arrays: loopsjavascript.info · 5 min · English
MMamun's noteRead only the "Loops" section. It shows for...of, the loop you'll use most with lists.
VideoOptional
JavaScript Bangla tutorial #35: for loopYouTube · Learn with Sumit · 24 min · Bangla
MMamun's noteIn Bangla. A full lesson on the for loop. Watch it if the three parts inside the brackets still feel confusing.
03 / 10

See it step by step

Watch a for loop count, check and add, round by round.

sum0
sum.js
1let sum = 0;
2for (let i = 1; i <= 3; i++) {
3 sum = sum + i;
4 console.log(i, sum);
5}
6console.log("done", sum);
sum starts at 0. The loop has not started yet.
Step 1 / 12
04 / 10

Explanation

You want to do the same thing many times: add up 30 students' marks, or print every player in a team. Copying the same line 30 times is slow and easy to get wrong. A loop repeats a block of code for you.

The classic loop is for. It has three parts inside the brackets, split by ;:

for (let i = 1; i <= 3; i++) {
  console.log(i);
}
// 1, then 2, then 3

Read it like a cricket over counter. Start at i = 1. Keep going while i <= 3 is true. After each round, do i++, which adds 1 to i. Each round is called an iteration.

Often you have a list of values in square brackets, called an array: [70, 85, 60]. You'll meet arrays properly soon. To visit each item, for...of is the easiest loop:

for (const mark of [70, 85, 60]) {
  console.log(mark);
}

while is the simplest loop: while (balance > 0) { ... } repeats as long as the condition is true. Make sure something inside changes, or it never stops.

People often make an off-by-one mistake: the loop runs one time too many or too few. i < 5 stops before 5; i <= 5 includes 5. When you count from 0, use <. When you count from 1, use <=.

Later you'll see map and filter. They are loops with a job already built in: make a new list, or keep some items. In React you'll use them more than for, but they work the same way underneath.

When you read a loop, find three things: where it starts, when it stops, and what changes each round.

Words to recognise
loopforfor...ofwhilei++iterationoff-by-onearray
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
const runs = [4, 6, 1, 0, 4, 6];
Mentor note · line 1
Runs from each ball of one over, in a list called an array. runs.length is 6.
2let total = 0;
3
for (let i = 0; i < runs.length; i++) {
total = total + runs[i];
6}
7console.log(total); // 21
8
for (const ball of runs) {
10 if (ball === 6) console.log("Six!");
11}
12
13let wickets = 0;
while (wickets < 10) wickets = wickets + 1;
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1for (let i = 0; i < 3; i++) {
2  console.log(i);
3}
What does this print?
DrillFind the bug2 / 2
This loop should add 1 + 2 + 3 + 4 + 5, so sum ends at 15 and the loop runs 5 times. Fix the code so both checks pass.
1
2
3
4
5
6
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3How many times does for (let i = 0; i < 5; i++) run?
  2. 2 / 3In for (const name of ["Tamim", "Liton"]), what is name in the second round?
  3. 3 / 3let n = 3; while (n > 0) { n = n - 1; } What is n after the loop?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Loops?

10 / 10

Done

You can now
Read a for loop and say how many times it runs and what each variable holds at the end.
Next: Functions in, values out Back to Phase 2
On this page
  1. 01Loops
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read

You want to do the same thing many times: add up 30 students' marks, or print every player in a team. Copying the same line 30 times is slow and easy to get wrong. A loop repeats a block of code for you.

The classic loop is for. It has three parts inside the brackets, split by ;:

for (let i = 1; i <= 3; i++) {
  console.log(i);
}
// 1, then 2, then 3

Read it like a cricket over counter. Start at i = 1. Keep going while i <= 3 is true. After each round, do i++, which adds 1 to i. Each round is called an iteration.

Often you have a list of values in square brackets, called an array: [70, 85, 60]. You'll meet arrays properly soon. To visit each item, for...of is the easiest loop:

for (const mark of [70, 85, 60]) {
  console.log(mark);
}

while is the simplest loop: while (balance > 0) { ... } repeats as long as the condition is true. Make sure something inside changes, or it never stops.

People often make an off-by-one mistake: the loop runs one time too many or too few. i < 5 stops before 5; i <= 5 includes 5. When you count from 0, use <. When you count from 1, use <=.

Later you'll see map and filter. They are loops with a job already built in: make a new list, or keep some items. In React you'll use them more than for, but they work the same way underneath.

When you read a loop, find three things: where it starts, when it stops, and what changes each round.

Words to recognise
loopforfor...ofwhilei++iterationoff-by-onearray

You want to do the same thing many times: add up 30 students' marks, or print every player in a team. Copying the same line 30 times is slow and easy to get wrong. A loop repeats a block of code for you.

The classic loop is for. It has three parts inside the brackets, split by ;:

for (let i = 1; i <= 3; i++) {
  console.log(i);
}
// 1, then 2, then 3

Read it like a cricket over counter. Start at i = 1. Keep going while i <= 3 is true. After each round, do i++, which adds 1 to i. Each round is called an iteration.

Often you have a list of values in square brackets, called an array: [70, 85, 60]. You'll meet arrays properly soon. To visit each item, for...of is the easiest loop:

for (const mark of [70, 85, 60]) {
  console.log(mark);
}

while is the simplest loop: while (balance > 0) { ... } repeats as long as the condition is true. Make sure something inside changes, or it never stops.

People often make an off-by-one mistake: the loop runs one time too many or too few. i < 5 stops before 5; i <= 5 includes 5. When you count from 0, use <. When you count from 1, use <=.

Later you'll see map and filter. They are loops with a job already built in: make a new list, or keep some items. In React you'll use them more than for, but they work the same way underneath.

When you read a loop, find three things: where it starts, when it stops, and what changes each round.

Words to recognise
loopforfor...ofwhilei++iterationoff-by-onearray