This is a very confusing behavior I came upon I cannot figure out:
var foo = 'outside';
function logIt(){
console.log(foo);
var foo = 'inside';
}
logIt();
That will yield undefined. Which is already unexplicable to me. But stranger is that this :
var foo = 'outside';
function logIt(){
console.log(foo);
}
logIt();
Will actually yield outside.
Why is this happening?
Because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top.
Hence your code is equivalent to:
var foo = 'outside';
function logIt(){
var foo;
console.log(foo);
foo = 'inside';
}
logIt();
and at the time of the call to console.log, foo is undefined.
This has to do with hoisting variables in Javascript.
var foo = 'outside';
function logIt(){
console.log(foo);
var foo = 'inside';
}
logIt();
will internally become:
var foo = 'outside';
function logIt(){
var foo;
console.log(foo);
foo = 'inside';
}
logIt();
and thus, foo will be undefined within the console.log :-)
You are looking to hoisting on javascript
When you write this:
var foo = 'outside';
function logIt(){
console.log(foo);
var foo = 'inside';
}
logIt();
The javascript will interpret the code like this:
var foo = 'outside';
function logIt(){
var foo; //undefined
console.log(foo);
foo = 'inside';
}
logIt();
the foo inside logIt() is declared as undefined before console.log(foo), that's why it's undefined.
On the second example, the console.log(foo) runs after you declare the global var foo = 'outside', that's why it prints outside.
As correctly mentioned by others, this is because of hoisting.
Hoisting is (to many developers) an unknown or overlooked behavior of JavaScript. If a developer doesn't understand hoisting, programs may contain bugs (errors). To avoid bugs, always declare all variables at the beginning of every scope.
So in your example it should be like this:
function logIt(){
foo = 'inside';
console.log(foo);
}
logIt();
for expected results.
