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?

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, Oct 12 '16 at 18:21

score 6 · Accepted Answer · edited Oct 15 '20 at 20:08

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.

score 2 · Answer 2 · answered Oct 12 '16 at 18:23

This is to do with variable hoisting

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

Declare global variable text
Set value of global variable text to "top"
Declare function print
Call function print
Declare local variable text (due to hoisting)
Return value of local variable text (undefined at this point)
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.

score 0 · Answer 3 · edited Oct 15 '20 at 20:12

0

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.

edited Oct 15 '20 at 20:12

Peter Mortensen

30,738
21
105
131

answered Oct 12 '16 at 18:25

Mayday

4,680
5
24
58

score -1 · Answer 4 · edited Oct 15 '20 at 20:10

-1

Your assignment,

var text = "bottom";

comes 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 comes after a return function,
    // so it is not proper. It is unreachable statement.
}
alert(print());
// Returns undefined

edited Oct 15 '20 at 20:10

Peter Mortensen

30,738
21
105
131

answered Oct 12 '16 at 18:23

Jerry Okafor

3,710
3
17
26

To reassign the the value "bottom" to text, it has to come before the return statement so that it can be reachable. – Jerry Okafor Oct 12 '16 at 18:25

Local and global variables inside a JavaScript function

4 Answers4

Linked