Learning JavaScript, Day 9 – For Loops

04 May, 2026

JavaScript cares not that it's a bank holiday! JavaScript demands your time!

(Look, as always, the first bank holiday of the year is cold and kinda damp, so I could either be outside being miserable, or I could be wrapped up in a cozy blanket on the couch, going through JavaScript.)

JavaScript Loops

Loops! Okay, let's see if I can get through loops without feeling utterly destroyed again, like I was with those Mammoth Club videos.

The For Loop

let text = "";
for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;

See, this is where I fell down with the last for demo. the i++. But here, W3Schools gives me the example and shows me how it works and I can copy/paste the text and see what's happening.

I'm feeling better about for loops.

It gets into Loop Scope, but I don't quite understand how one of the examples works.

let i = 5;
for (i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = i;

The result is 10, but I don't know how it gets that 10.

Okay, i is 5, initially. And then the for loop says that i is 0, and for all the times i is less than 10, it adds another 1 to that.

So I guess that the loop runs until it hits 9 and then stops, but adds one more, and that's how you get 10?

I tried adding in some of the bits from the previous example:

let i = 5;
let text = "";
for (i = 0; i < 10; i++) {
  text += i + "<br>";
}
document.getElementById("demo").innerHTML = i + "<br>";
document.getElementById("demo").innerHTML = text;

But that just gives me 0-9. And the initial 10 doesn't show up at all.

I think if I was a little more alive, I could figure this out, but since it's just supposed to be showing me that let outside the loop is everywhere, but let inside the loop stays inside the loop, I'm going to let it slide for right now.

The While Loop

In a way, this is exactly what I was doing before:

let text = "";
let i = 0;
while (i < 10) {
  text += "The number is " + i + "<br>";
  i++;
}
document.getElementById("demo").innerHTML = text;

I like how I just crashed my browser by trying to put in while (i = 0; i < 0). Whoops. But it was much less dramatic of a crash than JSBin, so, result.

The Do While Loop

This is a little weirder and I'll have to remember that, in this case, the code that needs to be executed comes before the condition.

JavaScript For Loop

Then we get a bit deeper into the for loop.

One of the things it points out is that you don't need to include the first expression in the for loop if you've already set the value.

So, like, let's say you want to list Pokémon.

const pokemon = [
	"Pikachu", 
	"Squirtle", 
	"Bulbasaur", 
	"Charmander", 
	"Magikarp"
];
let pokelength = pokemon.length;
let text = "";
for (let i = 0; i < pokelength; i++) {
	text += "I choose you, " + pokemon[i] + "!<br>";
}
document.getElementById("demo").innerHTML = text;

That gives you:

I choose you, Pikachu!
I choose you, Squirtle!
I choose you, Bulbasaur!
I choose you, Charmander!
I choose you, Magikarp!

But if you put in let i = 4 before let text="", and take out let i = 0:

const pokemon = [
	"Pikachu", 
	"Squirtle", 
	"Bulbasaur", 
	"Charmander", 
	"Magikarp"
];
let pokelength = pokemon.length;
let i = 4;
let text = "";
for (; i < pokelength; i++) {
	text += "I choose you, " + pokemon[i] + "!<br>";
}
document.getElementById("demo").innerHTML = text;

You get a different result:

I choose you, Magikarp!

You do have to remember to put in the ; to mark where the first expression would be. I briefly forgot that.

Apparently, you can also leave out the second expression (in this case i < pokelength), but if you do, you have to have a break, otherwise it'll crash your browser. Which I did again. Ha.

And you can leave out the third expression if you change the value in the loop. So I could do:

const pokemon = [
	"Pikachu", 
	"Squirtle", 
	"Bulbasaur", 
	"Charmander", 
	"Magikarp"
];
let pokelength = pokemon.length;
let text = "";
for (let i = 0; i < pokelength;) {
	text += "I choose you, " + pokemon[i] + "!<br>";
    i = i+ 2;
}
document.getElementById("demo").innerHTML = text;

And get:

I choose you, Pikachu!
I choose you, Bulbasaur!
I choose you, Magikarp!

It then points out that if you use var to define your variable outside and inside of the loop, it'll define it all the time, but if you use let, the value of let will only be what it is inside the loop.

Again, I'm still not entirely sure how the examples work, but, yeah, okay, I will remember that.

Day 9 — Results

• for can have three expressions in it - the one that comes before the code block, the condition to execute the code block, and the one that has to happen every time you execute the code block.
• It goes for (expr1; expr2; expr) { code }.
• If you declare a variable inside the loop using let or const, it's only visible inside the loop.
• If you just put something like i = 0 inside the loop, then it's valid outside the loop.
• while loops through code as long as a specified condition is met.
• do while has the code to be executed before the condition. So do { code } while (condition);
• You can leave out the first expression in a for loop if you define it elsewhere, but you have to keep the ; in to let the code know that it's not there.
• You can leave out the second expression, but then you have to put break inside the loop, otherwise it never ends.
• You can leave out the third expression if you change the value inside the loop.
• If you use var inside the loop, it affects the variable inside and outside the loop.
• If you use let inside the loop, it only affects the variable inside the loop.

I could do the in-depth while loops, but I am really not entirely awake and the exercises were like "What's the result of this block of code?" which made me do maths, and I am toooo tired for that right now. Don't make me try to remember i = 0; i <= 5; i++ I wanna have a naaaap....

Today's Sticker

Oh noooooo that little pink ball of fluff has started singing... zzzzzzzzzzz....

(I also discovered this very adorable official Pokétoon short called Jigglypuff's Song 🎶, and oh no my heart!)

#kate learns javascript #kate learns web development #programming