Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hoisting of JS variables declared without 'var'

I am trying to get my head around hoisting and scopes in JavaScript, and am trying to figure out what exactly happens in this block of code. console.log(outside) and console.log(local) both log undefined, as I expected, as outside is declared but not initialised, and the declaration of local is hoisted to the top of the function. But why is typeof global equal to 'undefined'. Isn't omitting var inside a function the same as declaring the variable in global scope - in which case wouldn't it be hoisted?

var outside;
(function() {
    i = 2;
    if (i == 1) {
        var local = 'local';
        global = 'global';
    }
    // Demonstrates that local variables are hoisted but global variables are not.
    console.log(outside); // undefined
    console.log(local); // undefined
    console.log(global); // Uncaught ReferenceError: global is not defined. (i.e. typeof global === 'undefined')
})();

http://jsfiddle.net/ffjiang/sYvbL/

like image 891
a3onstorm Avatar asked Dec 14 '22 21:12

a3onstorm


2 Answers

First off, ONLY variables defined with var are hoisted.

Assigning to a variable that has not been previously declared creates a global of that name at the moment that the assignment occurs.

Trying to read a variable that has not been previously declared causes a reference error unless you prefix it with a containing object such as window.global in which case it would return the same as any other property of an object that doesn't yet exist, undefined.

Your code is basically equivalent to this (with one added console.log() statement):

var outside;      // declared as a global
(function() {
    var local;    // the declaration of this variable is hoisted to here
    i = 2;
    if (i == 1) {
        local = 'local';
        global = 'global';   // creates a global variable only when this line is executed
    }
    console.log(outside);        // undefined
    console.log(local);          // undefined
    console.log(window.global);  // undefined        
    console.log(global);         // Uncaught ReferenceError, no symbol of this name is found
})();

That means both outside and local are defined at the time you try to use them so there is no reference error. Neither was intialized so their value is undefined. global is not defined when you try to reference it because your assignment to it was not executed so it does not exist. There is no hoisting for the creation of global variables with the use of var. Those variables are only created when and if the code that assigns to them is actually executed.

like image 157
jfriend00 Avatar answered Dec 17 '22 10:12

jfriend00


Becouse you тot assigned a value to outside (it is undefined)

var outside = 5; // <=outside is 5
(function() {
    i = 2;

    if (i == 2) { // Condition is not satisfied. So variables are not declared. Replace to i==2;
        var local = 'local';
        global = 'global';
    }
    // Demonstrates that local variables are hoisted but global variables are not.
    console.log(outside); // 5
    console.log(local); // local
    console.log(global); // global
    return true
})();
like image 33
SlyBeaver Avatar answered Dec 17 '22 09:12

SlyBeaver