Videos
Learning JavaScript and came across function expressions. The thing is, they just seem like standard functions. I don’t really even see how they’re “anonymous” since they have a variable name instead of a function name. The only different I can see is that function declarations are hoisted, whereas function expressions are not.
So then what’s even the point of them then? Are they just for making a function that is used only for a small scope of code? Or am I just missing something obvious about them?
They're actually really similar. How you call them is exactly the same.The difference lies in how the browser loads them into the execution context.
Function declarations load before any code is executed.
Function expressions load only when the interpreter reaches that line of code.
So if you try to call a function expression before it's loaded, you'll get an error! If you call a function declaration instead, it'll always work, because no code can be called until all declarations are loaded.
Example: Function Expression
alert(foo()); // ERROR! foo wasn't loaded yet
var foo = function() { return 5; }
Example: Function Declaration
alert(foo()); // Alerts 5. Declarations are loaded before any code can run.
function foo() { return 5; }
As for the second part of your question:
var foo = function foo() { return 5; } is really the same as the other two. It's just that this line of code used to cause an error in safari, though it no longer does.
Function Declaration
function foo() { ... }
Because of function hoisting, the function declared this way can be called both after and before the definition.
Function Expression
Named Function Expression
var foo = function bar() { ... }Anonymous Function Expression
var foo = function() { ... }
foo() can be called only after creation.
Immediately-Invoked Function Expression (IIFE)
(function() { ... }());
Conclusion
Douglas Crockford recommends to use function expression in his «JavaScript: The Good Parts» book because it makes it clear that foo is a variable containing a function value.
Well, personally, I prefer to use Declaration unless there is a reason for Expression.
Along with that very good answer, the only advantage I can see is dynamically changing a function call.
For example this code :
function foo(){
console.log('foo');
}
function bar(){
console.log('bar');
}
var myFn = foo;
myFn();
setInterval(function(){
if(myFn === foo) myFn = bar;
else myFn = foo;
}, 5000);
setInterval(function(){
myFn()
}, 6000);
It will never log the same thing since you reassign a global variable, every innerscope function will change while this code :
function foo(){
console.log('foo');
}
setInterval(function(){
function foo(){
console.log('Changed foo');
}
foo()
}, 5000)
setInterval(function(){
foo()
}, 5000)
Will log 2 different things. You can only change the current scope function, not the global.
My Experiment: function expression we need to use when use that function in different scopes. For example.
function outer(){
function inner(){
}
}
outer();
inner();// Error ...calling inner..will not be found..
-this will not work. But
var inner;
function outer(){
inner=function(){
}
}
outer();
inner();// will work
-this will work