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
– Joel Lee, Commented Oct 12, 2016 at 18:21

Peter Mortensen · Accepted Answer · 2020-10-15 20:08:25Z

6

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.

edited Oct 15, 2020 at 20:08

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 12, 2016 at 18:22

Kevin L

1,0773 gold badges13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Monger · Accepted Answer · 2016-10-12 18:23:46Z

2

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.

answered Oct 12, 2016 at 18:23

James Monger

10.8k9 gold badges65 silver badges99 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2020-10-15 20:12:47Z

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, 2020 at 20:12

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 12, 2016 at 18:25

Mayday

5,2165 gold badges27 silver badges65 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2020-10-15 20:10:32Z

-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, 2020 at 20:10

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 12, 2016 at 18:23

Jerry Okafor

4,1623 gold badges21 silver badges29 bronze badges

1 Comment

Jerry Okafor Over a year ago

To reassign the the value "bottom" to text, it has to come before the return statement so that it can be reachable.

Collectives™ on Stack Overflow

Local and global variables inside a JavaScript function

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related