JavaScript for Kids: Loops Tutorial

I hope you learned something in our conditionals tutorial. Now, let's learn about loops in JavaScript! Loops are like a merry-go-round that keeps spinning until we say stop.

1. FOR LOOP: When you know exactly how many times you want to do something

Let's count to 5

console.log("Counting to 5:"); 

for (let i = 1; i <= 5; i++) 
{   
	console.log(i); 
}

We are using the console this time to display messages. In codepen.io, you can find it in the lower left corner of the editor. Click on the "Console" tab to open it.

The code above will output:

Counting to 5:
12345

Here's what happened:

for (let i = 1; i <= 5; i++) 

This line is where we set up the for loop. As you notice, there are three conditions separated with semicolon ";".

1. The first condition is we declare the variable "i" and set to 1. That's where the counting starts.

2. Second, we set a condition so that when the i variable is less than or equal to five keep running it.

3. Lastly, we set the incremental value "i++". This means that every loop, increase i with one.

{   
	console.log(i); 
}

The code above is called every loop. The value of i will be printed to the console, increment with one and repeat until the second condition "i <= 5" is met.

Imagine this as a car on a round track, every time a loop is completed, it picks up one passenger until there are five passengers in the car.

2. WHILE LOOP: When you want to keep doing something until a condition is met.

Let's play a guessing game

console.log("Guessing game time!");
let secretNumber = 7; 
let guess = 0;
let attempts = 0;

while (guess !== secretNumber) {
  guess = Math.floor(Math.random() * 10) + 1; // Generate a random guess between 1 and 10
  attempts++;
  console.log("I guessed: " + guess);
}

console.log("Yay! I found the secret number " + secretNumber + " in " + attempts + " tries!");

Here's the breakdown:

We assigned values to the variables

let secretNumber = 7; 
let guess = 0;
let attempts = 0;

The code below runs to loop. It will check for the guess number until it matches the secretNumber;

while (guess !== secretNumber) {
  guess = Math.floor(Math.random() * 10) + 1; // Generate a random guess between 1 and 10
  attempts++;
  console.log("I guessed: " + guess);
}

When the guess number is now equals 7 the loop will stop. Notice we are using Math.floor() and Math.random(). These are special JavaScript Math functions. We will cover thesse more on our next lessons.

While loops are blocking in nature. The code after the closing bracket of the loop will not run until the loop condition becomes false and the loop terminates. This means that if the loop condition never becomes false, the code after the loop will never execute, potentially causing an infinite loop.

Things to remember:

FOR loops:

• It's like counting: "I'm going to jump 5 times!" You know exactly how many times you'll do it.

• We use it when we know exactly how many times we want to repeat something.

• In our example, we counted to 5.

WHILE loops:

• It's like saying: "I'll keep cleaning my room until it's tidy." You don't know exactly how long it will take.

• We use it when we want to keep doing something until a certain condition is met.

• In our examples, we played a guessing game and did a countdown.

Homework:

Write a countdown to blast off using while loop. Write your answers in the comment section and don't forget to share!