For and while loops confuse me ! especially nested loops

I really do not understand for and while loops even with the lessons. Can somebody explain to me in the most layman terms how they work and why we use them?

let counter = 0;
for (counter; counter < 10, counter = counter + 1){
  console.log(counter);
}

// output
0
1
2
3
4
5
6
7
8
9

A for loop is made of 3 parts:
1 - first you pick the variable that will be use to count each iteration of the loop. In the example, we use counter, which we had defined as being equal to 0.
2 - Second you pick a condition for the loop to stop: otherwise it would be infinite. In the example, we have counter < 10 which means once counter is 10 or higher, the loop will stop. Why 10 stops it? Because 10 < 10 is false! 10 is not smaller than 10, it’s equal to it.
3 - Third and last part, how to modify the counter after each loop iteration. Once the code inside the loop is run, this part will execute. In the example, we make counter = counter + 1, so we are increment the value of our counter by 1. Without this, we would never reach the stop condition of the second part of the loop definition.

You might say: I usually see this!

for (let i = 0; i < 10; i++)

If you pay attention, you’ll realize it’s all the same, just in a more compact form. First part declares the variable that will start counting and it’s starting value (in this case i starting at zero), second part states the stopping logic (keep going as long as i is smaller than 10), and the third part updates the counter value after each iteration (i++ is the short version of doing i = i + 1 )

Another note: all of the three pieces that make up the for loop definition are up to you! For example:

let listOfNumbers = [1,2,3,4,5,6,7];
for (let i = 0; i < listOfNumbers.length; i = i +2){
  console.log(listOfNumbers[i];
}

// output
1
3
5
6

Here I decided to start my counter at zero, but then I used the .length of the array of numbers to decide where to stop my loop. Since the array has 7 elements, listOfNumbers.length equals 7, and that second statement can be understood as i < 7. The third part increases my counter by 2 every loop. That’s why the output skips every other number.

It can help to write it down step by step:

1st iteration: i = 0
check condition: 0 < 7 ? yes, so run the code inside the loop
console.log(listOfNumbers[0];
loop if finished, run i = i + 2;

2nd iteration: i = 2
check condition: 2 < 7 ? yes, so run the code inside the loop
console.log(listOfNumbers[2];
loop if finished, run i = i + 2;

3rd iteration: i = 4
check condition: 4 < 7 ? yes, so run the code inside the loop
console.log(listOfNumbers[4];
loop if finished, run i = i + 2;

4th iteration: i = 6
check condition: 6 < 7 ? yes, so run the code inside the loop
console.log(listOfNumbers[6];
loop if finished, run i = i + 2;

5th iteration: i = 8
check condition: 8 < 7 ? No, exit the loop without running code
2 Likes

why do we use loops?

Because we don’t like repeating code thousands or millions of times! Image that we work at Amazon and our boss wants to know how many users bought something yesterday. Can you imagine checking one by one through millions of records? Better to have loops do that work for us! Loops can repeat our logic again and again as many times as necessary.

It also makes it easier to maintain and update, since we have a single piece of code that keep repeating with our loop. Think about a factory making screws: would you rather have to change every screw one by one when a new spec comes, or change the machine that is looping through the process so that the change is carried out to everything. That’s the sort of logic with loops.

1 Like

while loops

You can think of a while loop like a for loop that only has the second part, the one that has the condition to stop. You don’t care how many times it takes, or you simply don’t know. When you use a while loop all you care is that something keeps happening until a condition is met.

let hungry = true;
while (hungry){
  // keep eating
  if (full === true) {
    hungry = false;
  }
}

The biggest problem with while loops is how easy it is to make them infinite (they never stop). Since it doesn’t have anything updating the condition automatically, it is up to you to build it into the logic of your code. In my example, I used an if statement to check if I’m full. If I am, I change the hungry condition to false, and that will make the while loop stop (because the loop will while the condition in parenthesis remains true).

An example when while loop would be useful? Image that I give you a paragraph and tell you to replace every the in the text with a dah. You don’t know how many times you’ll find the, so you can’t give a for loop a condition to stop. But you can tell a while loop something like this:

while (notAtTheEndOfText){
  // logic to search and replace
}

Of course, the stopping condition would be more complicated than notAtTheEndOfText but I used it so you get an idea of what would work.

2 Likes