Having trouble understanding loops (for statements)

JavaScript
1

I just got to the “Iterate with JavaScript For Loops” challenge, and I am having a hard time understanding the concept of adding by an increment of one.
For the example, it says

var ourArray = [];
for (var i = 0; i < 5; i++) {
ourArray.push(i);
}
ourArray will now contain [0,1,2,3,4].

What I don’t understand, is why is there not a 5 in our array? From what I understand, you take the previous value and keep doing the loop until the middle expression is false. So, for the number 4; 4 < 5, which is TRUE, so from what I understand, this 4 should now be 4++, which now equals 5. Then loop then stops at 5, because 5 < 5 is FALSE. So why does our array only contain [0,1,2,3,4] and not 5? Am I misunderstanding this? I am very confused. Can someone clear it up for me please?

2

The loop stops at four because the condition 4 < 5 is fulfilled after the fourth iteration. So the loop breaks because 5 is not less than 5, 5 is equals to 5.

3

Oh ok, but the thing that confuses me is that the expression 4 < 5 is true, which is why I thought you had to continue with the loop onto the i++ part of it. In the FCC challenge, it say “The condition statement is evaluated at the beginning of every loop iteration and will continue as long as it evaluates to true. When condition is false at the start of the iteration, the loop will stop executing. This means if condition starts as false, your loop will never execute.”

Meaning, I thought that once you reach 5 < 5, you stop because that evaluate to false.

Or am I essentially suppose to go back to the [condition] expression after the [final-expression]) and evaluate it then?

So what I thought was after 4 < 5, you continue onto i++ part, and add 1, increasing it to 5. Then I thought you stop there

4

Yes the variable i actually did became equals 5 after the fourth iteration (4 < 5);

so
i = 5;

but
i < 5 = false;
so the loop breaks and function inside the braces

{
ourArray.push(i);
}

did not initialize, which is why ourArray does not contain 5.

5

Ok I think I get it. So, you essentially have to go back to the [condition] after you increment it by 1 to make sure that the expression is still true?
because 4 < 5, like you said, but then you continue onto i++, which makes the value 5. Which then makes the expression 5 < 5? So it is false? I did not understand/know that you pretty much have to go back to and double check that the expression is true after you do the i++ - and if it is not true, you disregard it.

Correct?

6

Think of it as it will not stop as long as condition is fulfilled. You got the result [0,1,2,3,4] because you have fulfilled the condition 5 times. on the 6th time the loop stopped(disregarded in you term) because the condition is not fulfilled.

7

Ah - so the condition is really just telling you how many times to fulfill it ?

8

Yes. and it can be tricky sometimes. If you really want to include 5. you can use
(var i = 0; i <= 5; i++)

which means less than or equal.
which makes 5 <= 5 TRUE

9

ahhh ok I think I get it now. So I think I had the order messed up, as I was doing the final condition before I executed the .push statement. I was doing the final condition before the .push, which was screwing me up

10

@ jester070993

Even though the for loop is written on one line you have to think of it like this (they just did that for convenience):

  1. make your variable (or don’t if you already have one) : Only do this once

  2. check the condition
    a- if the condition is false stop
    b-if the condition is true do the stuff in the scope

  3. increment your counter, repeat

So the increment is actually happening at the end of your loop even though it is not positioned there.
Some languages you do put the increment a the end of the loop scope, but this is tidy once you get used to it.

5 is not < than 5. Change the condition check to <= if you want the array to be 0,1,2,3,4,5

so the for loop:
creates i, and sets it equal to 0
tests 0 is less than 5, here 0 is i
puts 0 in the array, using push
increments i to 1 (i++)

tests 1 < 5, here 1 is i
puts 1 in the array, using push
increments to 2 (i++)

…same for 2, 3 and 4 (where those numbers are the value of i)

tests 5 < 5, here 5 is i
breaks the for loop

the array is [0,1,2,3,4]

As I said change to <= 5 as the condition check and you will get [0,1,2,3,4,5]

Play around with it a little, like
for (i = 4, i >= 0, i--)

this should reverse your array.

Its similar to a Do-While loop in a single line.

Beware of endless loops . . . infinity awaits.
As a testing piece you can always say if( i === 10) {break}
you can combine with OR (||) to bracket your loop range just in case on future loops
if( i === 10 || i === -10) {break}
in this manner you loop for whatever reason in more complex code will not runaway on i.
not likely to happen here but once you get more complex . . . . (think recursion) things can get a little troublesome.

-WWC

11

I’ll try to explain it as simple as possible

Lets see the skeleton of a for loop

for( initial value ; Condition to be satisfied ; increment/decrement counter)
{
Instructions to be executed if the Condition is satisfied;
}

You have a for loop
Now, the Instruction inside the for loop (ie. ourArray.push(i) ) gets executed only when the THE CONDITION ( ie. i<5) is true.

So, lets check the loop
When i = 0
0<5 :ballot_box_with_check:
The instruction inside for loop is executed
And you get [0]

When i = 1
1<5☑️
You get [0,1]

i = 2
2<5☑️
You get [0,1,2]

i =3
3<5☑️
You get [0,1,2,3]

i = 4
4<5☑️
You get [0,1,2,3,4]

i = 5
5<5❎(condition fail)
The instruction inside the for loop doesn’t get executed.
So what do we have?
We have [0,1,2,3,4]
That’s how a for loop works
That is why we don’t have 5 in the output.

Hope this helps