How does this unexpected output comes?

This is due to hoisting. In javascript the variable declared with var shows hoisting. Hoisting is process in which all the declarations of variables are brought to the top of of the scope on java script. But note they are not assigned the value which is assigned below in code. let and const doesnot show this behaviour

console.log(x);
var x = 4;
console.log(y)
let y = 4

There's nothing unexpected in your code, it is behaving as it should.

console.log(i);

This log statement prints undefined because of a concept known as hoisting in javascript. When you define variables using var keyword, they are moved/hoisted to the top of the functional/local scope when javascript runs.

Now you might ask that if variable declaration is moved/hoisted to the top of the functional/local scope then why does logging i prints undefined? That's because only variable declarations are hoisted to the top, not the value of the variable. So when you log i before the loop, it gives you undefined because Javascript recognizes that variable i exists in this scope but isn't given a value yet.

Inside for loop is where variable i is initialized to value 0 and then loop executes twice and gives you 0 and 1.

Now you can also access variable i after the for loop and that is because of functional scope of var. What this means is that variables defined with keyword var are available globally if not defined in any function.

If you don't want this behavior, use let instead of var. let keyword provides block level scope which means that variables defined using let keyword are only available in the block (between curly braces) in which they are defined.

Declare the variable as let and that won't happen. Also check this

Due to variable hoisting, var declarations are physically moved to the top of their execution context's scope (in this case the global scope). Thus, your code is the same as:

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

In javascript inside loops use ler in place of var... then you can even use same name for variable and receive different results. Example below:

var x = 1;
 if (true) {
 var x = 2; // same variable
 console.log(x); // 2
 }
 console.log(x); // 2
 }
 function letTest() {
 let x = 1;
 if (true) {
 let x = 2; // different variable
 console.log(x); // 2
 }
 console.log(x); // 1
 }

• javascript