Why loops
A loop runs the same lines again and again, so you do not have to copy them. This for loop adds 1, 2 and 3 to a total. Each pass through a loop is called a round, or an iteration.
Before the loop
Before the loop, let makes a variable called total and stores 0 in it. The loop will add to this box in every round, so it must start at 0.
The for line holds three parts, split by semicolons. The first, let i = 1, runs once, before anything else. It makes a counter, i, that starts at 1.
Round one
The second part is the check. It runs before every round. i is 1, and 1 <= 3 is true, so the body runs: the lines between the curly braces.
Line 3 runs. The engine reads total (0) and i (1), adds them, and stores 1 back in total. That is all the body does in one round.
At the closing brace the round is over. The third part, i++, adds 1 to i, so i is 2. Then the loop jumps back up to the check.
More rounds
2 <= 3 is true: total becomes 3 and i becomes 3. 3 <= 3 is still true: total becomes 6 and i becomes 4. The same lines run every time; only the values change.
Leaving the loop
Now 4 <= 3 is false, so the body is skipped and the loop ends. The engine carries on after the closing brace. i was made in the for line, so it is gone now.
console.log prints 6, because 1 + 2 + 3 = 6. One line in the body did all the adding. Change the 3 to 100 and the same loop adds 1 to 100: 5050.
If the check never becomes false, the loop never stops. Forget i++ and i stays 1, so 1 <= 3 is true forever and the page stops responding. A while loop works the same way: check, body, repeat.
What happens
// step 1/10 · repeat
loop runs the same lines again and again
round one pass through the body
(also called an iteration)
this one adds 1, 2 and 3 to total
kinds for, while, do...while, for...of
The order of a for loop is: the start once; then the check; if true, the body and then the update; then the check again. MDN and the ECMAScript specification (ForBodyEvaluation) describe the same order. Because i is made with let in the for line, it only exists inside the loop. JavaScript even makes a fresh copy of i for every round (CreatePerIterationEnvironment in the specification), so code saved in one round keeps that round's i. The figure shows one box.