explanation on javascript variables inside a function

Question

I am learning javascript and came across a topic which mentions that the variables declared inside a function is available anywhere inside the function and javascript puts the variable definition at the top like in the below example:

var functionScope=function(){
for (var i=0; i< 10; i++){//code inside this loop}
return i;
}
console.log(functionScope()); //prints 10

The javascript actually turns the above function to the below:

var functionScope=function(){
  var i;
  for ( i=0; i< 10; i++){//code inside the for loop}
  return i;
  }
console.log(functionScope()); //prints 10

Since javascript is interpreted language, it executes line by line. How will it know that it should pull the variable to the top of the function after it has tried accessing the variable. When it tries to access the variable it should tell as undefined right?

Also if I go by the theory that the variables will be placed at the top of the function and can be accessed anywhere then the below code should print 10, but why the below code prints undefined?

var functionScope=function(){
  console.log('The value os i is '+i);
  var i = 20;
}
console.log(functionScope());

Could someone explain where my understanding is wrong?

One more doubt: Typically in Java, if I had to print the value of i outside the for loop, i would get an error, but in javascript does the variable still accessible outside outside the for loop as in case of fist example where the variable is defined inline inside the for loop. Am i missing something here?

The *variable* itself is hoisted. Its *value* isn't. Prior to the assignment, `i` exists but is `undefined`. — Frédéric Hamidi, Jul 30 '15 at 14:54
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions — wiretext, Jul 30 '15 at 14:54
As @FrédéricHamidi has pointed out, there is a difference between the varialbe being available (the var declaration hoisted) and it having a value other then `undefined`. It's the declaration thats hoisted not the asignment. — atmd, Jul 30 '15 at 14:55
@FrédéricHamidi : so you mean that in my third example also, the variable will be hoisted? — zilcuanu, Jul 30 '15 at 15:05

score 2 · Answer 1 · answered Jul 30 '15 at 15:07

var functionScope=function(){
for (var i=0; i< 10; i++);
    return i
}
console.log(functionScope()); //prints 10

This is only a bad indentation. Because of the ; at the end of for, it doesn't includes the return i statement into the loop.

There is the well indented one to help you understand what really happens:

var functionScope=function() {
    for (var i=0; i< 10; i++) 
        /* do nothing */;
    return i
}

score 1 · Accepted Answer · edited May 23 '17 at 11:43

With var, you tell the JS that the variable is not global, and it'll be aviable only inside the function.

With =, you can set the variable's value.

var i; for (i = 0; ... and for (var i = 0; ... is the same.

In the third example, you don't have i inside the function. In this case, the JS'll try to find it as a global variable, outside the function. If you've set window.i = 1, it'll print The value os i is 1, otherwise it'll generate an error, because i is not defined nowhere.

var i = 0;
var fn = function() {
    i = 1; //window.i = 1;
};
console.log(i); //prints 1


var i = 0;
var fn = function() {
    var i = 1; //fn.i = 1;
}
console.log(i); //prints 0


var fn = function() {
    var i = 1; //fn.i = 1;
}
console.log(i); //ReferenceError: i is not defined

var i;
var fn = function() {
    var i = 1; //fn.i = 1;
}
console.log(i) //prints undefined

As Sebastien C. has already told you, your example code dosn't do what you want it to do. for (var i=0; i< 10; i++); means for (var i=0; i< 10; i++) {/*do nothing*/}. If you remove the ;, you'll notece your function will return 0, because the return keyword stops the function, and it return the value, no other operations will be executed, your loop will run only once.

Also, you should use ++i.

score 0 · Answer 3 · answered Jul 30 '15 at 16:53

Yes Javascript is interpreted and whenever is finds a var declared/undeclared, it declares it and then performs the operations or in technical terms it does var hoisting. So now the variable is declared, but is undefined.

So any operation done on it (other than assignment) will result in its value being undefined only. eg;

{
    x++ ; 
    var x = 10 ;
    console.log(x);
}

will print 10. So you can think of it as

{
    var x = undefined; \\variable hoisted at beginning of block 
    x++ ; 
    x = 10 ;
    console.log( x ); \\ x = 10
}

explanation on javascript variables inside a function

3 Answers3