What is the difference between a function expression vs declaration in JavaScript

Question

What is the difference between the following lines of code     Function declaration function foo     return 5       Anonymous function expression var foo   function     return 5       Named function expression var foo   function foo     return 5       What is a named anonymous function expression    What is a declared function    How do browsers deal with these constructs differently    What do the responses to a similar question  var functionName   function      vs function functionName       not get exactly right

User · Answer

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  Crockford recommends to use function expression 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

User · Answer

Though the complete difference is more complicated  the only difference that concerns me is when the machine creates the function object  Which in the case of declarations is before any statement is executed but after a statement body is invoked  be that the global code body or a sub-function s   and in the case of expressions is when the statement it is in gets executed  Other than that for all intents and purposes browsers treat them the same   To help you understand  take a look at this performance test which busted an assumption I had made of internally declared functions not needing to be re-created by the machine when the outer function is invoked  Kind of a shame too as I liked writing code that way

User · Answer

Regarding 3rd definition   var foo   function foo     return 5      Heres an example which shows how to use possibility of recursive call   a   function b i       if  i gt 10        return i        else       return b   i          console log a 5        outputs 11 console log a 10       outputs 11 console log a 11       outputs 11 console log a 15       outputs 15   Edit  more interesting example with closures   a   function c     return function b i     if  i gt c       return i        return b   i        d   a 5   console log d 3       outputs 6 console log d 8       outputs 8

User · Answer

The first statement depends on the context in which it is declared    If it is declared in the global context it will create an implied global variable called  foo  which will be a variable which points to the function  Thus the function call  foo    can be made anywhere in your javascript program    If the function is created in a closure it will create an implied local variable called  foo  which you can then use to invoke the function inside the closure with  foo     EDIT   I should have also said that function statements  The first one  are parsed before function expressions  The other 2   This means that if you declare the function at the bottom of your script you will still be able to use it at the top  Function expressions only get evaluated as they are hit by the executing code   END EDIT  Statements 2  amp  3 are pretty much equivalent to each other  Again if used in the global context they will create global variables and if used within a closure will create local variables  However it is worth noting that statement 3 will ignore the function name  so esentially you could call the function anything  Therefore  var foo   function foo     return 5      Is the same as   var foo   function fooYou     return 5

User · Answer

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

[javascript] What is the difference between a function expression vs declaration in JavaScript?

Function Declaration

Function Expression

Immediately-Invoked Function Expression (IIFE)

Conclusion

Examples related to javascript