This question already has answers here:
Function declarations inside if/else statements?
(4 answers)
What are the precise semantics of block-level functions in ES6?
(2 answers)
Closed 11 months ago.
Based on my current knowledge, I faced something really unexpected in Javascript.
Consider this simple code:
foo();
if(true){
function foo(){
console.log(i);
}
}
foo();
I know that variable and function declarations will be hoisted by the Js engine at the creation phase. In this example the function foo will be hoisted and when creation phase is done. The engine will start to run the code line by line, at the first line of the code a function called foo should be invoked. We have that function, because it was hoisted before right? the problem is here a TypeError will be thrown which says that foo is not a function.
And when I remove the if block everything works well. I think it's somehow related to the block scopes but don't know how exactly and why it behaves like this.
What's going on here?
I know that function declarations should not be placed in blocks.
Related
This question already has answers here:
What are the precise semantics of block-level functions in ES6?
(2 answers)
Function declaration in block moving temporary value outside of block?
(1 answer)
Closed 7 months ago.
I have a doubt regarding how the function declaration are invoked in JavaScript.
I have read somewhere that function declaration can be accessed anywhere within the function it was declared on.
Lets say I declare a function within a block of code so it will be accessible anywhere or maybe outside the block as well.
But when I try to invoke the function before the block of code, I get an TypeError. But this error is not happening when I invoke the function after the block of code. Please explain why the function is not getting invoked before the block of code.
function globalFunc() {
//..
// ..
funcName(); // not accessible - TypeError
{
function funcName() {
console.log("Hey");
}
}
funcName(); // accessible
}
globalFunc();
This question already has answers here:
var functionName = function() {} vs function functionName() {}
(41 answers)
Closed 2 years ago.
What is the difference between this (a 'standalone' function):
function standaloneFunction () {
console.log('standaloneFunction runs, success')
}
standaloneFunction()
...and this (a function inside a variable):
let variableFunction = function variableFunction () {
console.log('function inside let has same name as the variable, runs? - yep, does.')
}
variableFunction()
Is it a problem that the variable and the function share the same name?
it doesnt seem so - i speculate this is because it has something to do how variables
and functions are saved in memory? Functions in their entirety, and variables only their declaration?
When i do console.log(this), i can't find the 'variableFunction' in the execution
context of 'this' - however, 'standaloneFunction' does appear.
Have you, as a beginner, also asked yourself such questions? Am i being too picky about such details?
Should i already use es6 syntax?
Please also don't hold back with any advice regarding articulating my question.
Thanks to everyone who has taken their time to read this.
The first is a function declaration, which will be hoisted. The second is a named function expression, but I think an anonymous function expression would be better in this case since there’s no need to name the function, e.g. let variableFunction = function() {…}.
Please see What is the difference between a function expression vs declaration in JavaScript?
This question already has answers here:
var functionName = function() {} vs function functionName() {}
(41 answers)
Closed 7 years ago.
In javascript, what's the purpose of assigning variable to function declaration?
var test = function(){console.log("Hello world")}
over
function test(){ console.log("Hello world")
Also, I don't understand the code below does not work. Is it because hoisting does not care about variable assignment? (cares only about variable declaration)
vartest();
var vartest = function(){
console.log("Hello var function")
}
The first part is not answerable. There's no "single purpose" and there are varied use cases for this.
The second part is simpler. Hoisting can be described as "pulling up declarations". This means that variables and functions are effectively always declared at the top of their scope. That does not mean they are assigned values at the top. Values are assigned at the original location of the "pre-hoisting" declaration. However, since named functions are not assigned a value, the hoisting effectively moves the declaration and implementation as a whole to the top of the scope.
This does not happen for functions assigned to variables, and hence the code "does not work".
This question already has answers here:
Why can I use a function before it's defined in JavaScript?
(7 answers)
Closed 9 years ago.
I am no JavaScript expert, but I found some code like this
a();
function a(){
alert('a');
}
and I was surprised to find it works (I think something like that will not work in Python). I expected that the function a can't be executed before being created. How does interpreter work and why functions can be called before declaration?
This happens because of variable hoisting.
See this answer for more info
JavaScript 'hoisting'
Some docs about this:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting
If you type it like this, it won't work:
a();
a = function(){
alert('a');
}
Code that is within functions and objects will be run whenever that
function or object is called. If it is called from code that is
directly in the head or body of the page then its place in the
execution order is effectively the spot where the function or object
is called from the direct code.
See the reference here.
And in our case the function will give the error as you can see the example here.
It's because function a() is declared via Function Declaration syntax, and Function Declaration are executed right after the script is parsed. With other syntax, Function Expression, like this:
var b = function(){
alert('b');
}
it won't work (see example).
More info: http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/
This question already has answers here:
Closed 12 years ago.
Possible Duplicates:
“Usual” functions vs function variables in JavaScript
What do you call this JavaScript syntax, so I can research it?
Is there a fundamental difference between
function foo()
{
things();
}
and
var foo = function()
{
things();
}
Or is function ... just syntactical sugar?
Thanks in advance.
They are different (but produce similar results). Basically, the first is an actual named function. The second is a regular variable declaration with an anonymous function attached to it. There are some subtle differences...they are summed up nicely here:
JavaScript Function Declaration Ambiguity (Be sure to read the comments too...more good info there)