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?
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
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.
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, ie
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/
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.