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?

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?

• javascript
• variables

• No. In the second case, it returns the local variable text, which is declared inside the function. (That's what makes it local.) But at the point the return is executed, the variable has not been assigned a value yet. – Joel Lee Commented Oct 12, 2016 at 18:21
• 4 Look up "variable hoisting" in JavaScript. – gen_Eric Commented Oct 12, 2016 at 18:22

4 Answers 4

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.

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.

It's due to hoisting.

Hoisting teaches that variable and function declarations are physically moved to the top of your code.

You can get samples and explanation here.

Your assignment,

var text = "bottom";

es after a return function, so it is not proper. It is an unreachable statement.

var text = "top";
function print() {
    return (text);
    //var text = "bottom";
    // The above assignment es after a return function,
    // so it is not proper. It is unreachable statement.
}
alert(print());
// Returns undefined