Why is the *i* value always *5* - JS?

With this example you would see approximately what happens with the function.

for (var i = 0; i < 5; i++) {
console.log(i);
 setTimeout(function() { 
    console.log('TimeOut: ' + i); 
 },i * 1000 );
}

The only thing I did was put a console.log()outside the function setTimeoutand add a stringto the one that exists inside said function to differentiate.

If we review what the console spits out at us, we can see that it is first painted:

14:55:01.689 0
14:55:01.689 1
14:55:01.689 2
14:55:01.689 3
14:55:01.689 4

To later spit:

14:55:01.691 TimeOut: 5
14:55:02.698 TimeOut: 5
14:55:03.690 TimeOut: 5
14:55:04.690 TimeOut: 5
14:55:05.696 TimeOut: 5

Having the browser console timer activated also allows us to see when each console output is executed.

Reviewing this we can see that the function setTimeouttakes longer to launch for the first time than it takes for the loop to go through the entire loop, so when it accesses the variable iit already has a value of 5.

The best way to understand what happens is to reproduce the execution manually:

for (var i = 0; i < 5; i++) { // durante 5 veces ...
  setTimeout(function() {     // ... colocamos en la cola de eventos por tiempo...
    console.log(i);           // ... una función que imprime el valor de i ...
  },i * 1000 );               // ... con un segundo entre cada función.
}

And a second later, with i equal to 5 (which is when the loop is done), its value is printed.

And a second later, with i equal to 5 (which is when the loop is done), its value is printed.

And a second later, ... well, we already know what happens.

This happens because a function closure has been created: i is an external variable to the anonymous function that has been passed to setTimeout, so it remains in memory with the last existing value.

Why is i shared between the 5 functions? Well, you have to understand that the use of varentails a special behavior : The compiler "uploads" the declaration to the beginning of the block:

//equivalente a tu código
var i;
for (i = 0; i < 5; i++) {
 setTimeout(function() { 
    console.log(i); 
 },i * 1000 );
}

Instead, if you used let, in each iteration you would be working with a different instance :

for (let i = 0; i < 5; i++) {
 //en cada iteración se genera una variable i con un valor distinto!
 setTimeout(function() { 
    console.log(Date(),'->',i); // es una variable distinta para cada función
 },i * 1000 );
}

Another solution, in case you can't use let (doesn't work in IE10), is to use the following:

for (var i = 0; i < 5; i++) {

 setTimeout(function(param1, param2) { 
    console.log(param1, param2); 
 },i * 1000, 'Pasando 2 parámetros',i );
}

The function setTimeoutallows defining the parameters with which the callback function will be called :

setTimeout(funcion[, retraso, parametro1, parametro2, ...]);

To answer you must know two things:

• JavaScript is single threaded , and _{as our Trauma Guru explains} , Javascript executes the entire file .jsand puts asynchronous functions in its event queue ; that is to say that the code executed in the first instance is for (var i = 0; i < 5; i++){ }and in the Javascript event queue it remains five timessetTimeout(function() { console.log('TimeOut: ' + i); },i * 1000 );

• By declaring the type variable varit has another type of scope. for which the last value will be #5, and when executing the setTimeoutfrom the event queue i already has the value #5

for (var i = 0; i< 5; i++){
}
console.log(i);

I will modify the code a little, for practical purposes you can understand why 5

function ejecutatimeOut(){
    setTimeout(function() { 
      console.info(`TimeOut ${i}`);
      
   },i  * 1000 );
 
 }
var i = 0;

for (i = 0; i < 5; i++) {

}

console.log("valor de i=" , i); // la variable ya esta en 5
ejecutatimeOut()
ejecutatimeOut()
ejecutatimeOut()
ejecutatimeOut()
ejecutatimeOut()

The solution to this question I invite you to read this answer:

How to run a timeout waiting for the above event?

By declaring the variable with var, forits value is being overwritten. Try with a let:

    for (let i = 0; i < 5; i++) {
     setTimeout(function() { 
        console.log(i); 
     },i * 1000 );
    }

You can make a function that returns another function.

This function receives the argument i, and it is transferred to the function inside, although that function does not receive any argument.

Lastly, the argument for that function to be generated is passed .

for (var i = 0; i < 5; i++) {
  setTimeout( // La i se transpasa hacia abajo
    (function(i){ // ----------+
      return function(){ //    ‖
         console.log(i); // <--+
      }
    })(i), // Aquí se le pasa el argumento.
    i * 1000 );
}