Local and global variables inside a JavaScript function

Question

I am learning JavaScript global and local variables, but I am confused on this particular function.

var text = "top";
function print() {
    return (text);
}
print();
// Returns 'top'

I understands why it returns top. var text is a global variable. print() function has access to it and returns text, thus returning 'top'.

var text = "top";
function print() {
    return (text);
    var text = "bottom";
}
print();
// Returns undefined

I have a basic knowledge of global and local variables (or so I thought). I know that the function print has access to its own local plus global variables.

I don't understand why this returns undefined. To my understanding, the line return text; retrieves global variable text, which it has access to (as shown on the first code block). After returning text = 'top', it also declares its own local variable with the same name but different value, 'bottom'. The local variable bottom, to my knowledge, ought to sit there because it wasn't called earlier.

Why didn't it show top (or even shows bottom), but instead shows undefined?

Answer 1

JavaScript hoists your variable declaration such that your code is functionally the following:

var text = "top";
function print() {
    var text;
    return (text);
    // Unreachable code below
    text = "bottom";
}
print();
// Returns undefined

Since text, as declared in your function, is not yet defined when you hit return(text), and text="bottom" is unreachable, print() returns undefined.

See What is the scope of variables in JavaScript? for more. This question relates to case 7.

Answer 2

This is to do with variable hoisting

The code in your second example is executed in this order:

1. Declare global variable text
2. Set value of global variable text to "top"
3. Declare function print
4. Call function print
5. Declare local variable text (due to hoisting)
6. Return value of local variable text (undefined at this point)
7. Set value of local variable text to "bottom"

It is executed as if it were written like this:

var text = "top";
function print() {
    var text;
    return (text);
    text = "bottom";
}
print();

As you can see, the value of text is returned before actually being defined, and therefore it is undefined.