Code executing after return statement in javascript? - Stack Overflow

admin管理员组

文章数量:1406942

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:

1

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:

10

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

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:

1

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:

10

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

• javascript
• return
• evaluation

Share Improve this question Follow asked Apr 25, 2017 at 17:52 Marcin WasilewskiMarcin Wasilewski 73511 gold badge1010 silver badges2626 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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./JavaScript-Scoping-and-Hoisting.html

tl;dr it's due to how function expressions and function declarations work (also, function hoisting): https://javascriptweblog.wordpress./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 bees 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./2010/07/06/function-declarations-vs-function-expressions/

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.

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 javascriptStack Overflow