Code executing after return statement in javascript?

Question

I found this short JavaScript snippet in the web:

var foo = 1;
function bar() {
    foo = 10;
    return;
    function foo() {}
}
bar();
console.log(foo);

I would expect the contents after return statement in function bar() to be disregarded, and the variable foo to equal 10 at the end. To my surprise however, the console outputs something very different:

Now, when I remove the line after return statement

var foo = 1;
function bar() {
    foo = 10;
    return;
}
bar();
console.log(foo);

The console prints out, as expected:

Can anyone explain me what causes foo to return 1 in the former version of the code?

Dave Newton · Accepted Answer · 2017-04-25 17:56:32Z

6

Function declarations are hoisted to the top of their containing context. You're essentially creating a var foo at the top of the bar function.

The foo manipulated in bar is local to that function and doesn't affect the global context's foo.

http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

answered Apr 25, 2017 at 17:56

Dave Newton

161k27 gold badges264 silver badges311 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:17:52Z

2

tl;dr it's due to how function expressions and function declarations work (also, function hoisting): https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

More detailed response:

Putting the following console.log's in the code will help you visualize what is happening, and I think answer your question.

var foo = 1;
console.log('0', foo)
function bar() {
    console.log('1', foo)
    foo = 10;
    console.log('2', foo)
    return;
    console.log('3', foo)
    function foo() {}
    console.log('4', foo)
}
console.log('5', foo)
bar();
console.log('6', foo)

The output is as follows:

'0' 1
'5' 1
'1' function foo() {}
'2' 10
'6' 1

So to your suspicion, console.log('3',foo) and console.log('4',foo) never get called after the return statement, which was expected. Your question now is probably "Why is my console.log('1',foo) assigned to the function foo() {}", which can be answered with the following SO question which describes function declaration vs. function expressions, i.e.

function foo(){}

vs

var foo = function(){}

Why can I use a function before it's defined in Javascript?

Basically when bar is executed, the immediate definition of foo becomes function(){}, but the key concept here is this definition of foo is local to within the bar() function, and outside of bar's scope it is still assigned to 1.

Another good read on function declarations and expressions: https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Apr 25, 2017 at 18:12

Lance Whatley

2,4551 gold badge15 silver badges16 bronze badges

2 Comments

Marcin Wasilewski Over a year ago

I accepted this as the correct answer because it's the most comprehensive. Thanks!

Dave Newton Over a year ago

@MarcinWasilewski I'd reword that to it's the longest.

charlietfl · Accepted Answer · 2017-04-25 18:06:26Z

2

It is due to hoisting.

Compiler will basically turn that into:

function bar() {
    function foo() {}
    foo = 10;
    return;       
}

So there is a local foo before the assignment and you only overwrite the local. The function foo() would then also be gone.

edited Apr 25, 2017 at 18:06

answered Apr 25, 2017 at 17:57

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

user7391763 · Accepted Answer · 2017-04-25 17:57:16Z

0

This is because the code is converted to;

var foo = 1;
function bar() {
    var foo;
    foo = 10;
    return;
    function foo() {}
}
bar();
console.log(foo);

This is because JavaScript always moves variable declarations and not initializations to the top of the scope.

answered Apr 25, 2017 at 17:57

user7391763

Collectives™ on Stack Overflow

Code executing after return statement in javascript?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related