Why this output 3 instead of 2?

JavaScript
#1 
var printNumTwo;
for (var i = 0; i < 3; i++) {
  if(i === 2){
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 3

I understand that there is only one i in this snippet, and it is a global one.
But why does it return 3?
I thought the loop stopped at 2?
If the loop stopped at 2 why the global i is three?

2 Likes
#2

The for loop runs before the console.log(printNumTwo()) line, so after the for loop is finish i = 3, so when you execute the function printNumTwo, it returns the value of global value of i.

Why would it stop at 2? You have nothing in your code which would stop the loop.

1 Like
#3

ah… i see.

for(var i = 0, i<3;i++)

carries out like this:

i === 0, is it less than 3? yes i ===1 now
i === 1, is it less than 3? yes i ===2 now
i === 2, is it less than 3? yes i ===3now

then stopped.

is this correct?

2 Likes
#4

You could add a break statement after defining the printNumTwo function and it would stop the loop at 2 and return the value 2.

1 Like
#5

i see. thanks!
(20 characters)

#6

Hi i have a similar doubt.

Wont the return statement act as a break statement inside the function?

And the value of printNumTwo being stored when i === 2 so when we do console.log(printNumTwo) wont it be saved as 2?

1 Like
#7

i guess because the return is inside the anonymous function it wont break out from the for loop. but if their is a return statement in the if statement too , i++ will not happen one more time

#8

sometimes it is difficult to get all the logic behind all these snippet isnt it?

I feel it sometimes cos some stuff I just cant get it to work. :wink:

#9

Only if the function is executed. Just assigning a function definition to a variable does not activate the return statement.

#10

thinking with a fresher mind always helps :slight_smile:

1 Like
#11

so in the above example, the function will get executed when i === 2 but it will only break out of the function right and continue along… however if we add a break statement in the if statement after the function passes, then it breaks out of the for loop as well. Can we somehow make it break out of the for loop my defining a break or return inside the function ? i think thats what im confused about

#12

No, the function will not get executed until the for loop finishes. When i ===2, the function definition for printNumTwo is created. If you add a break statement on the line after the function definition, then yes it will stop the loop after i ===2 and the value 2 will be returned by the function.

Putting a break inside the printNumTwo function definition will not affect the outer for loop.

1 Like
#13

so basically when the for loop breaks then the function gets executed and thats why it returns value as 3.

#14

If the for loop was different

var printNumTwo;
for (var i = 0; i < 6; i++) {
  console.log('i='+i)
  if(i === 2){
    printNumTwo = function() {
      console.log("printNumTwo is executed")
      return i;
    };
    break;
  }
}
console.log(printNumTwo()); // displays 2

In the above code, the break statement prevents any further iteration of the for loop variable i, so 2 gets returned.

#15

I don’t understand the meaning of this line of code " printNumTwo = function(); "
Sir i don’t understand the behaviors of loop.
Please comment on my understanding of for loop whether i understood correct or not.
for(var i = 0 ; i < 3 ; i++)

  • List item
  1. First " i" initialize to 0;
  2. After than i checked with 3 whether less then or not if condition is true then it start executing code of inside the FOR loop.
  3. After the completion on code inside the for loop.The value of " i " variable is incremented by " i++ ".
#16

Based on the first code:

var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3

First Iteration
i = 0
i < 3 // 0 < 3 --> true
.push(i) // --> [0]
i++; // now i = 1

Second Iteration
i = 1
i < 3 // 1 < 3 --> true
.push(i) // --> [0, 1]
i++; // now i = 2

Third Iteration
i = 2
i < 3 // 2 < 3 --> true
.push(i) // --> [0, 1, 2]
i++; // now i = 3

Fourth Iteration
i = 3
i < 3 // 3 < 3 --> false
//There is not a .push(i), the condition was false

So the code ends and you can note that the value of i is 3.

About printNumTwo = function(); I recommend you to read about function declaration and function expressions.

#17

In this snippet,

printNumTwo = function() {
      return i;
    };

is printNumTwo a function?
Cuz, i only know that functions can be created by:

funtion printNumTwo()
{return i;}

are these two the same thing?

1 Like
#18