I am learning JS and i am curious about why a function can be called before its defined & yet run fine. I understand that its due to hoisting wherein the code is scanned upfront to bring in declared variables & functions in scope.
If it were just brining the declarations of these entities in scope, why doesn't a function call also return undefined(or something similar) when being called before its definition - like variables do?
As VLAZ pointed out in the comment, variables definition are hoisted as well. Consider this example:
console.log(a) // undefined a = 2 console.log(a) // 2 var a console.log(b) // ReferenceError: b is not definedWe can say that undefined is about a value of variable a. Function declarations are hoisted in the same way, but function expressions are not:
foo() // foo bar() // TypeError: bar is not a function function foo () { console.log('foo') } var bar = function () { console.log('bar') }The difference is declaration with var is a VariableDeclaration, while declaration with function key word is a FunctionDeclaration.
The FunctionDeclaration is hoisted all together, and unlike VariableDeclaration, it has a body field, which contains the body of a function. You can spot this kind of differences using ESLint parser.
This is why:
someFunc(); function someFunc(){ console.log('someFunc'); } // hoisted as FunctionDeclaration var someOtherFunc = () => {console.log('someOtherFunc');}; // not hoisted because the value of the variable is a function expression var someNewFunc = function () {console.log('someNewFunc');}; // not hoisted because the value of the variable is a function expression someOtherFunc(); someNewFunc(); 
var declaration is hoisted to the top of the enclosing scope, const does not. Both are undefined until the assignment is executed
const which isn't in the question
const declarations are hoisted. Not initialisations. The reason myVar = 5; let myVar throws an error is because it knows that let myVar exists further down in scope. That information comes from hoisting the declaration. It's the initialisation phase that is not hoisted and only occurs at the line let myVar. This is why the error message reads can't access lexical declaration myVar' before initialization` - it's not initialised. Were it not declared at all, the error message would be myVar is not defined.I have found a good explanation of why the variable is undefined at the point when it is hoisted which may look like a different behaviour if you compare it to how a function declaration is hoisted:
"JavaScript only hoists declarations, not initializations" MDN website:
However JavaScript only hoists declarations, not initializations! This means that initialization doesn't happen until the associated line of code is executed, even if the variable was originally initialized then declared, or declared and initialized in the same line.
var x = 3 x -> hoisted, becuse the JS engine come across a declarion (reserve the memory for the variable) but during the hoisting the variable won't be intislaized which means the value won't be assigned (remain undefined)
If you compare it to a function declaration,
function a() = { ... } this doesn't have an initialization (the function isn't called), this is just a declaration.
undefinedinstead ofReferenceError: <variable> is not defined. The assignment not processed until the actualvar variable = "some value"line.vardeclaration is hoisted, the assignment is not.