I am studying the execution context from Javascript. But i dont understand why the "function foo" not will be over written by the "var foo".
I hope someone can explain this,
thank you for your respons.
function ace() {
console.log(typeof foo); // function pointer
console.log(typeof bar); // undefined
var foo = 'hello',
bar = function() {
return 'world';
};
function foo() {
return 'hello';
}
var foo = 'hello';
}
ace();
why the "function foo" not will be over written by the "var foo".
foo is overwritten at the line where foo is re-defined
function ace() {
console.log(typeof foo); // function pointer
console.log(typeof bar); // undefined
var foo = 'hello',
bar = function() {
return 'world';
};
function foo() {
return 'hello';
}
var foo = 'hello';
console.log(foo);
try {
foo()
} catch(e) {
console.log("catch:", e.message)
}
}
ace();
But i dont understand why the "function foo" not will be over written by the "var foo".
The var declaration does not overwrite the function declaration. They both declare the same variable, and because of the function declaration it is initialised with a function. It is only the assignment that will overwrite the value.
If you take hoisting into account, your script will behave like
function ace() {
var foo, bar;
var foo = function() {
return 'hello';
}
var foo;
console.log(typeof foo); // function
console.log(typeof bar); // undefined
foo = 'hello';
bar = function() {
return 'world';
};
console.log(typeof foo); // string
foo = 'hello';
}
ace();
Related
I have a function foo:
function foo() {
return 'foo';
}
While foo got executed is there a way to know if foo was called inside object declaration ? I want to distinguish these two cases:
var bar = {
prop1: foo()
}
var var1 = foo();
Here's one approach demonstrating the suggestions in the comments and assuming you'd rather call bar.prop1 instead of bar.prop1().
function foo (ctx) {
console.log(ctx == window)
return 'foo'
}
class Bar {
get prop1() {
return foo(this)
}
}
var var1 = foo(this);
var bar = new Bar();
bar.prop1;
Why does the following code return just an empty string:
var a = {
name:"321",
foo: function(){
console.log(name);
}
}
a.foo();
because you haven't scoped name to anything so it's looking for a global variable.
try replacing
console.log(name);
with
console.log(this.name);
you can use this keyword like this - console.log(this.name); .In result of your code, you see an empty string and not a undefined error because window.name variable already exists and has nothing to do with the name variable in your object
Following comments on Rich Linnell answer:
foo is for the object's function scope exemple, and bar for callbacks's scopes.
Code:
var foo = "global",
bar = "global",
a = {
foo: (callback) => {
// var foo = 'local';
console.log('foo: ' + foo);
callback();
}
};
(() => {
// var bar = "parent";
a.foo(() => {
// var bar = "local";
console.log('bar: ' + bar);
});
})();
I don't understand why the value of foo is undefined in the following code:
var foo = 1;
function bar() {
if (false) {
var foo = 10;
}
alert("Foo is " + foo);
}
bar();
Result : Foo is undefined.
https://jsfiddle.net/yk7ae9b0/
Whereas these variations behave as expected.
var foo = 1;
function bar() {
if (true) {
var foo = 10;
}
alert("Foo is " + foo);
}
bar();
Result : Foo is 10
var foo = 1;
function bar() {
if (false) {
// var foo = 10;
}
alert("Foo is " + foo);
}
bar();
Result: Foo is 1
Any help will be really appreciated.
Your var foo is not defined where you think it is. Variables in JavaScript are scoped to the function that uses them, not to the block where they are declared. As such, the code you had:
function bar() {
if (false) {
var foo = 10;
}
alert(foo);
}
Is actually interpreted by the JS engine as if it were written as:
function bar() {
var foo;
if (false) {
foo = 10;
}
alert(foo); // foo was never assigned a value!
}
So, when the alert triggers, you have an undefined variable foo that shadows the global foo you declared outside your function.
(This also affects things like for(var i=...) ... -- that var i is function scoped, and will be a declared variable everywhere inside the function, not just inside your for-loop)
Can anyone explain to me why if statement inside of bar has foo us undefined?
var foo = 1;
function bar() {
if (!foo) {
var foo = 10;
}
alert(foo);
}
bar();
// This foo is at the global level.
var foo = 1;
function bar() {
// the compiler puts in this line:
var foo;
if (!foo) {
// and the var here doesn't matter.
foo = 10;
}
alert(foo);
}
bar();
The given code will be parsed like this:
var foo = 1;
function bar() {
var foo;
if (!foo) {
foo = 10;
}
alert(foo);
}
bar();
The local foo is hoisted to the top of the function since JS only has function scope and no block scope. The "hoisted" variable will take precedence over the foo defined outside the function, which is why the variable is undefined in your if statement.
Don't first class functions mean that they behave as variables? Clearly they don't behave exactly like variables though, since this:
console.log(foo);
var foo = 'bar';
...doesn't work, whereas this:
console.log(foo());
function foo() {
return('bar');
}
...does.
That said, this:
console.log(foo());
var foo = function() { return 'bar'; };
doesn't work, which is more consistent.
What gives?
What you're experiencing is called hoisting. When using a function declaration like:
function foo() {}
foo will be moved to the top of the closest scope (function).
On the other hand when you use a function expression or function assignment like:
var foo = function() {}
the variable foo will be moved to the top but the assignment will occur when is needed.
Learn more
Because you don't compare the same thing. In your example - you compare function declaration function foo()... with variable declaration and assignment in var foo = 'bar';
A more correct comparison would be of:
console.log(foo);
var foo = 'bar';
with
console.log(foo());
var foo = function() {
return 'bar';
}
The functional declaration is interpreted differently due to the way hoisting works. Hoisting moves all declarations to the top of the closest scope, while leaving assignments in their place.
Function declaration is special in that sense, since it's both declaration and expression/assignment in one statement and thus hoisted together.
As an example: you can look at expressions like:
console.log(foo);
var foo = 'bar';
as this:
var foo;
console.log(foo); //prints undefined
foo = 'bar';
and
console.log(foo());
var foo = function() {
return 'bar';
}
as this:
var foo;
console.log(foo());
foo = function() {
return 'bar';
}
Function declarations are automatically bumped to top of the scope in JS
console.log(foo());
function foo() {
return('bar');
}
is actually interpreted as
function foo() {
return('bar');
}
console.log(foo());
the second bit of code is working that way, because foo is variable, not a function (it just happens to have an anonymous function as a value). Variables are also bumped to top, so
console.log(foo());
var foo = function() { return 'bar'; };
becomes
var foo; //empty variable
console.log(foo()); //undefined
foo = function() { return 'bar'; }; //creates a function without name and assigns it to foo
Function declaration and variable declaration will always be moved to the top of their scope.
console.log(foo());
function foo() {
return 'bar';
}
is interpreted as:
function foo() {
return 'bar';
}
console.log(foo());
console.log(foo());
var foo = function () {
return 'bar';
};
is interpreted as:
var foo;
console.log(foo());
foo = function () {
return 'bar';
};