JavaScript词汇范围和变量寿命

Question

I was curious why this works:

function doThis(){
    counter = 0;
    return counter;
};

console.log(counter); // returns "reference error: can't find variable"

which makes sense, as the variable does not exist outside of the function. But if I make a function that self executes:

(function doThis(){
    counter = 0;
    return counter;
})();

console.log(counter); // returns 0

How come the variable counter still exists? It's not a closure, there's nothing that seems to be referencing this variable from the outside, so shouldn't it be destroyed by garbage collection?

Answer 1

You are creating it as a global as you haven't included var before the variable name.

The function in the first example hasn't been invoked so the variable has not been created yet, in the second one it has so that is why you get 0

What your code should be doing is:

function doThis(){
    var counter = 0;
    return counter;
};

Answer 2

First edit them so that it is instantly clear what's happening (no leaving out var hacks):

function doThis(){
    window.counter = 0;
    return counter;
};

console.log(window.counter); // returns undefind

And:

(function doThis(){
    window.counter = 0;
    return counter;
})();

console.log(window.counter); // returns 0

Can you now see what's happening? The function defines a global variable so of course it's not available until the function is called. window refers to the [object global] in browsers.

This is the reason you always want to use either global.something OR var something , so that it's very clear to anyone whether you intend to use global or local variable. If you used var in the OP, the variable would be local.

Answer 3

Since you are not declaring it with "var" it gets assigned to the global scope which is visible out side of the function. In the first example you are not executing the function so the counter is never defined where as in the second example you invoke the function and counter gets assigned to the global scope

Answer 4

In the first example you haven't called the function and so counter doesn't exist yet (because the code inside the function hasn't executed yet). In the second example, you have defined a function literal and you are self-invoking it. The code inside the function execute and counter is now defined.

Furthermore counter is a global variable because you haven't defined it using var and so it is visible to the scope outside the function. It's the same as doing window.counter = 0 .

Now if you had done the following:

(function doThis(){
    var counter = 0; //notice the var
    return counter;
})();

counter would still be undefined because it is local to the scope of the function.

So to recap:

• In the first example counter is undefined because the code hasn't run yet. If you actually call the function, you will get the same behavior as the second example.
• In the second example counter is defined and is a global variable (basically the same as window.counter ) and it is defined because the code inside the function was executed when you defined it and self-invoked it.
• In the third example counter is unknown to the global scope because it is local to the function inside which it was defined (because var was used).

Answer 5

As you know, in JavaScript, if you declare a variable without "var" keyword, it will be added to the global scope(window object).

But if a variable is declared within a function without using "var" keyword, it won't be added to the global scope(window object) until that particular function is invoked. In JavaScript, you have to understand about execution context creation.

when the complete JS file is interpreted, the the memory is allocated for all the functions and variables(hoisting). Please note that all the variables which are declared outside of the functions are added to the global scope(window object).

Execution phase:

As JS code execution is synchronous(only one line at a time) and single threaded, an execution stack is created and the "global execution context" is pushed to the execution stack. If a function invocation is encountered in the execution, "function execution context" is created for the corresponding function and pushed to the same stack.

Now during function execution, JS engine parse the code and if it come across a variable, the memory is allocated and if the variable is declared without "var" keyword, it will add this particular variable to the global scope. otherwise that particular variable will be part of function scope(local scope).

Now let's check your code snippets:

function doThis(){
    counter = 0;
    return counter;
};

console.log(counter); // returns "reference error: can't find variable"

in this example, as the doThis() function is never executed, variable "counter " is not allocated any memory and not part of any scope(global/local). hence in the console log, you see a reference error.

(function doThis(){
    counter = 0;
    return counter;
})();

console.log(counter); // returns 0

As its a self invoking function, "counter" variable will be allocated memory and moved to the global scope(window object). hence you can see the value of the "counter" variable in the console log.