This question already has an answer here:
Why JavaScript function declaration behave differently in chrome and safari? [duplicate]
(1 answer)
Closed 5 years ago.
In a book You Don't Know JS: Scope & Closures There is this sample of code I don't understand fully.
"Function declarations that appear inside of normal blocks typically hoist to the enclosing scope, rather than being conditional as this code implies:"
foo(); // "b"
var a = true;
if (a) {
function foo() { console.log( "a" ); }
}
else {
function foo() { console.log( "b" ); }
}
What does it mean? How is it even possible? Is the conditional not working?
It's happening because function declarations are moved to the top of the file by the javascript parser. That's what they mean by hoisting. The last declaration of foo overwrites the first when they are hoisted.
Related
This question already has answers here:
Javascript - Precedence in hoisting
(2 answers)
Closed 5 months ago.
Recently, I received this interview question, I know it's weird to declare var name and function name the same, but the code runs without errors, and I don't know how to explain this behavior, hence the question.
In the Chrome console, the following code logs 1:
var foo = function () {
console.log(1)
}
function foo() {
console.log(2)
}
foo()
And the following code logs 2:
function foo() {
console.log(1)
}
function foo() {
console.log(2)
}
foo()
Why are the results not the same?
Function declarations, including the assignment of their values, are hoisted. Variable assignments are not.
In the first case, the function declaration for foo is hoisted so is overwritten by the variable assignment even though that appears earlier in the source order.
This question already has answers here:
What is the scope of variables in JavaScript?
(27 answers)
Learning JavaScript: Lexical Versus Dynamic Scoping
(3 answers)
What is lexical scope?
(21 answers)
Closed 8 months ago.
I am trying to learn JS internals.I am currently trying to print message "yo" both times using the two console.logs. I tried using call,bind or apply to see if it will help but it still doesn't. On the execution stack it places func2 execution context above the func1 execution context. So, I was hoping it would take the func2.
var a = 'hello';
function func1() {
console.log(a);
}
function func2() {
var a = 'yo';
func1();
console.log(a);
}
func2();
I know that if we put it as a nested function it will work.
var a = 'hello';
function func2() {
var a = 'yo';
function func1() {
console.log(a);
}
func1();
console.log(a);
}
func2();
Is there a way to print the internal message without declaring a function inside like the 2nd example without passing a variable to func1?
I think the reason why the first is not working is because this refers to the window but slightly confused due to Execution Context placed over the Execution Stack.
This question already has answers here:
Order of hoisting in JavaScript
(2 answers)
Closed 6 years ago.
I came to know 'Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter.' -- JavaScript Scoping and Hoisting.
But which one hoisted first?
As a result of someone asked me at SegmentFault, I should give him a exact answer.
function test() {
return foo;
var foo = true;
function foo(){}
}
console.log(typeof test()) // function
functions are hoisted first
See here for more informations
This question already has answers here:
What are the precise semantics of block-level functions in ES6?
(2 answers)
Closed 6 years ago.
I read Kyle's I don't know JS and came to know that function declarations will hoist first before the var. So in the below code
<script>
foo();
var a = true;
if ( a ) {
function foo() { console.log( "a" ); }
}else {
function foo() { console.log( "b" ); }
}
foo();
</script>
foo should be hoisted first and should print "b" as output for the first foo(), right? or am I missing anything?
Explanation or a link to understand to the code and hoisting in different scenario's would be a great help.
Hoisting (in the way that you're expecting here) will only work when there is a precedential order of things that is unambiguous. In this case, because your function is defined inside an if block, hoisting it will not happen as you expect it to.
This will work:
foo();
var a = true;
function foo() { console.log( "a" ); }
foo();
Because it removes from the equation your if statement.
This question already has answers here:
var functionName = function() {} vs function functionName() {}
(41 answers)
What is the difference between a function expression vs declaration in JavaScript? [duplicate]
(5 answers)
Closed 8 years ago.
I couldnT find an answer easily, so even if this question is a dupe, the answers donT come up using these keywords.
I want to know the difference between the different way of declaring functions in a sample app.js
var foo = function()
{
//..
}
function bar()
{
//..
}
var baz= function()
{
//..
}
function qux()
{
//..
}
// other??
I m also not clear about the scope where I can use each function. Thanks!
There are four ways to create a function in JavaScript.
Function declaration
This will create a variable foo in the current scope and assign a named function to it.
function foo () {
}
Function declarations are hoisted so it doesn't matter where, in the applicable scope, you put them. It is considered good coding practise to define them before you use them though.
Anonymous function expression
This will create a function without a name and use it in an expression. In this example it is assigned to the variable something.
something = function () {
};
Named function expression
This is the same as an anonymous function expression except that it has a name, creates a variable of that name in the scope of itself and is horribly broken in older versions of Internet Explorer.
something = function foo () {
};
Function constructor
Do not use function constructors. They are eval by another name. You can read about them on MDN if you're interested.