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?

score 6 · Answer 1 · answered Apr 25 '17 at 17:56

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

charlietfl · Answer 2 · 2017-04-25T18:06:26.967

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 '17 at 18:06

answered Apr 25 '17 at 17:57

charlietfl

170,828
13
121
150

score 2 · Accepted Answer · edited May 23 '17 at 12:17

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/

I accepted this as the correct answer because it's the most comprehensive. Thanks! — Marcin Wasilewski, Apr 25 '17 at 23:41

score 0 · Answer 4 · answered Apr 25 '17 at 17:57

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.

Code executing after return statement in javascript?

4 Answers4