javascript tutorial - [Solved-5 Solutions] Var functionName = function() {} vs function functionName() {} - javascript - java script - javascript array
Problem:
Explain Var functionName = function() {} vs function functionName() {} .
var functionOne = function() {
// Some code
};
function functionTwo() {
// Some code
}click below button to copy the code. By JavaScript tutorial team
Solution 1:
// TypeError: undefined is not a function
functionOne();
var functionOne = function() {
console.log("Hello!");
};
Run code snippet
And, a function declaration:
// Outputs: "Hello!"
functionTwo();
function functionTwo() {
console.log("Hello!");
}
This also means you can't conditionally define functions using function declarations:
if (test) {
// Error or misbehavior
function functionThree() { doSomething(); }
}click below button to copy the code. By JavaScript tutorial team
The above actually defines functionThree irrespective of test's value — unless use strict is in effect, in which case it simply raises an error.
Solution 2:
functionTwo();
function functionTwo() {
}click below button to copy the code. By JavaScript tutorial team
Why no error? We were always taught that expressions are executed from top to bottom(??)
Because:
- Function declarations and variable declarations are always moved
(hoisted)invisibly to the top of their containing scope by the JavaScript interpreter. Function parameters and language-defined names are, obviously, already there. ben cherry - This means that code like this:
functionOne(); --------------- var functionOne;
| is actually | functionOne();
var functionOne = function(){ | interpreted |-->
}; | like | functionOne = function(){
--------------- };click below button to copy the code. By JavaScript tutorial team
- Notice that the assignment portion of the declarations were not hoisted. Only the name is hoisted.
- But in the case with function declarations, the entire function body will be hoisted as well:
functionTwo(); --------------- function functionTwo() {
| is actually | };
function functionTwo() { | interpreted |-->
} | like | functionTwo();
--------------
click below button to copy the code. By JavaScript tutorial team
Solution 3:
(function(){
var exports = {};
function privateUtil() {
...
}
exports.publicUtil = function() {
...
};
return exports;
})();click below button to copy the code. By JavaScript tutorial team
Solution 4:
An illustration of when to prefer the first method to the second one is when we need to avoid overriding a function's previous definitions.
With
if (condition){
function myfunction(){
// Some code
}
}click below button to copy the code. By JavaScript tutorial team
This definition of myfunction will override any previous definition, since it will be done at parse-time.
While
if (condition){
var myfunction = function (){
// Some code
}
}click below button to copy the code. By JavaScript tutorial team
does the correct job of defining myfunction only when condition is met.
Solution 5:
An important reason is to add one and only one variable as the "Root" of your namespace...
var MyNamespace = {}
MyNamespace.foo= function() {
}