Why is My Global Variable Undefined in JavaScript?

Surprised that Global Variable Has Undefined Value in JavaScript?

Have you ever encountered a situation where a global variable unexpectedly returns an undefined value in JavaScript? Consider this perplexing example:

var value = 10;

function test() {
    //A
    console.log(value);
    var value = 20;

    //B
    console.log(value);
}

test();

The output of this code surprises many:

undefined
20

Why the Global Variable is Undefined

The root cause of this puzzle lies in a fundamental concept of JavaScript known as variable hoisting. When the JavaScript engine interprets code, it initially scans the entire code block and "hoists" all variable declarations to the top. However, only the declarations are hoisted, not the assignment.

In the example above, when the function test is executed, the global variable value is not accessed at any point. Instead, a new local variable value is declared and assigned. This local variable shadows the global variable, resulting in an undefined value for the console.log(value) call at point A.

Explanation

To illustrate this further, let's rewrite the code as if the hoisting had occurred:

// Variable declarations hoisted to the top of the function
var value = undefined;
var value = 20;

function test() {
    //A
    console.log(value);

    //B
    console.log(value);
}

Now, it's clear why the first console.log call returns undefined. The local variable value has not yet been assigned.

Another Example

To emphasize the concept of hoisting, consider the following code:

var test = 'start';

function end() {
    test = 'end';
    var test = 'local';
}

end();
alert(test);

This code alerts the value 'start,' not 'end' or 'local.' This is because the variable test was hoisted to the top of the end function, shadowing the global variable.

Functions are Hoisted Too

Hoisting not only applies to variables but also to functions. The following code illustrates this:

test("Won't work!");

test = function(text) { alert(text); }

This code throws a reference error because when test("Won't work!") is called, the test variable has been declared but not assigned the function. Only proper function declaration syntax ensures complete hoisting.

The above is the detailed content of Why is My Global Variable Undefined in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!