var functionName function vs function functionName

Question

I ve recently started maintaining someone else s JavaScript code  I m fixing bugs  adding features and also trying to tidy up the code and make it more consistent   The previous developer used two ways of declaring functions and I can t work out if there is a reason behind it or not   The two ways are   var functionOne   function            Some code        function functionTwo            Some code     What are the reasons for using these two different methods and what are the pros and cons of each  Is there anything that can be done with one method that can t be done with the other

User · Answer

In computer science terms  we talk about anonymous functions and named functions  I think the most important difference is that an anonymous function is not bound to an name  hence the name anonymous function  In JavaScript it is a first class object dynamically declared at runtime   For more information on anonymous functions and lambda calculus  Wikipedia is a good start  http   en wikipedia org wiki Anonymous function

User · Answer

In JavaScript there are two ways to create functions    Function declaration   function fn      console log  Hello      fn      This is very basic  self-explanatory  used in many languages and standard across C family of languages  We declared a function defined it and executed it by calling it   What you should be knowing is that functions are actually objects in JavaScript  internally we have created an object for above function and given it a name called fn or the reference to the object is stored in fn  Functions are objects in JavaScript  an instance of function is actually an object instance  Function expression   var fn function      console log  Hello      fn      JavaScript has first-class functions  that is  create a function and assign it to a variable just like you create a string or number and assign it to a variable  Here  the fn variable is assigned to a function  The reason for this concept is functions are objects in JavaScript  fn is pointing to the object instance of the above function  We have initialized a function and assigned it to a variable  It s not executing the function and assigning the result    Reference  JavaScript function declaration syntax  var fn   function      vs function fn

User · Answer

In computer science terms  we talk about anonymous functions and named functions  I think the most important difference is that an anonymous function is not bound to an name  hence the name anonymous function  In JavaScript it is a first class object dynamically declared at runtime   For more information on anonymous functions and lambda calculus  Wikipedia is a good start  http   en wikipedia org wiki Anonymous function

User · Answer

You can t use the  bind   method on function declarations  but you can on function expressions  Function declaration   x000D   x000D  function x       console log this    bind  string    x   x000D   x000D   x000D   Function expression   x000D   x000D  var x   function       console log this    bind  string    x   x000D   x000D   x000D

User · Answer

EugeneLazutkin gives an example where he names an assigned function to be able to use shortcut   as an internal reference to itself  John Resig gives another example - copying a recursive function assigned to another object in his Learning Advanced Javascript tutorial  While assigning functions to properties isn t strictly the question here  I recommend actively trying the tutorial out - run the code by clicking the button in the upper right corner  and double click the code to edit to your liking   Examples from the tutorial  recursive calls in yell     Tests fail when the original ninja object is removed   page 13   var ninja        yell  function n        return n  gt  0   ninja yell n-1     a     hiy             assert  ninja yell 4      hiyaaaa    A single object isn t too bad  either        var samurai     yell  ninja yell     var ninja   null    try      samurai yell 4      catch e      assert  false   Uh  this isn t good  Where d ninja yell go           If you name the function that will be called recursively  the tests will pass   page 14   var ninja        yell  function yell n        return n  gt  0   yell n-1     a     hiy             assert  ninja yell 4      hiyaaaa    Works as we would expect it to        var samurai     yell  ninja yell     var ninja        assert  samurai yell 4      hiyaaaa    The method correctly calls itself

User · Answer

The difference is that functionOne is a function expression and so only defined when that line is reached  whereas functionTwo is a function declaration and is defined as soon as its surrounding function or script is executed  due to hoisting      For example  a function expression    x000D   x000D     TypeError  functionOne is not a function x000D  functionOne    x000D   x000D  var functionOne   function     x000D    console log  Hello     x000D     x000D   x000D   x000D    And  a function declaration       x000D   x000D     Outputs   Hello   x000D  functionTwo    x000D   x000D  function functionTwo     x000D    console log  Hello     x000D    x000D   x000D   x000D    Historically  function declarations defined within blocks were handled inconsistently between browsers  Strict mode  introduced in ES5  resolved this by scoping function declarations to their enclosing block    x000D   x000D   use strict       x000D       note this block  x000D    function functionThree     x000D      console log  Hello     x000D      x000D    x000D  functionThree       ReferenceError x000D   x000D   x000D

User · Answer

I m listing out the differences below    A function declaration can be placed anywhere in the code  Even if it is invoked before the definition appears in code  it gets executed as function declaration is committed to memory or in a way it is hoisted up  before any other code in the page starts execution   Take a look at the function below   function outerFunction         function foo            return 1            return foo        function foo            return 2          alert outerFunction        Displays 2   This is because  during execution  it looks like -  function foo         The first function declaration is moved to top     return 1    function foo         The second function declaration is moved to top     return 2    function outerFunction         return foo      alert outerFunction       So executing from top to bottom                            the last foo   returns 2 which gets displayed   A function expression  if not defined before calling it  will result in an error  Also  here the function definition itself is not moved to the top or committed to memory like in the function declarations  But the variable to which we assign the function gets hoisted up and undefined gets assigned to it   Same function using function expressions   function outerFunction         var foo   function            return 1            return foo        var foo   function            return 2          alert outerFunction        Displays 1   This is because during execution  it looks like   function outerFunction        var foo   undefined     var foo   undefined      foo   function           return 1           return foo        foo   function          This function expression is not reachable       return 2          alert outerFunction        Displays 1  It is not safe to write function declarations in non-function blocks like if because they won t be accessible   if  test        function x     doSomething         Named function expression like the one below  may not work in Internet nbsp Explorer browsers prior to version 9   var today   function today    return new Date

User · Answer

Expression in JS   Something that returns a value  Example  Try out following in chrome console   a   10 output   10   1   3  output   4   Declaration Statement  Something that does not return a value  Example   if  1  gt  2        do something       here  1 2  is an expression but the  if  statament is not  Its not returning anything      Similarly  we have Function Declaration Statement vs Function Expression  Lets take an example      test js  var a   10      function expression var fun expression   function        console log  Running function Expression          funciton expression  function fun declaration        console log  Running function Statement        Important   What happens when JavaScript engines runs the above js file    When this js runs following things will happen    Memory will be created variable  a  and  fun expression   And memory will be created for function statement  fun declaration   a  will be assigned  undefined    fun expression  will be assigned  undefined    fun declaration  will be in the memory in its entirety    Note  Step 1 and 2 above are called  Execution Context - Creation Phase       Now suppose we update the js to      test js  console log a     output  udefined  No error  console log fun expression      output  undefined  No error  console log fun expression       output  Error  As we trying to invoke undefined   console log fun declaration       output  running function statement   As fun declaration is already hoisted in the memory     var a   10      function expression var fun expression   function        console log  Running function expression         function declaration  function fun declaration        console log  running function declaration      console log a       output  10 console log fun expression      output  Running function expression console log fun declaration      output  running function declaration   The output mentioned above in the comments  should be useful to understand the different between function expression and function statement declaration

User · Answer

A function declaration and a function expression assigned to a variable behave the same once the binding is established   There is a difference however at how and when the function object is actually associated with its variable  This difference is due to the mechanism called variable hoisting in JavaScript   Basically  all function declarations and variable declarations are hoisted to the top of the function in which the declaration occurs  this is why we say that JavaScript has function scope     When a function declaration is hoisted  the function body  follows  so when the function body is evaluated  the variable will immediately be bound to a function object  When a variable declaration is hoisted  the initialization does not follow  but is  left behind   The variable is initialized to undefined at the start of the function body  and will be assigned a value at its original location in the code   Actually  it will be assigned a value at every location where a declaration of a variable with the same name occurs     The order of hoisting is also important  function declarations take precedence over variable declarations with the same name  and the last function declaration takes precedence over previous function declarations with the same name   Some examples     var foo   1  function bar       if   foo        var foo   10     return foo    bar      10   Variable foo is hoisted to the top of the function  initialized to undefined  so that  foo is true  so foo is assigned 10  The foo outside of bar s scope plays no role and is untouched    function f       return a     function a    return 1      var a   4    function a    return 2   f        2  function f       return a    var a   4    function a    return 1     function a    return 2   f        2   Function declarations take precedence over variable declarations  and the last function declaration  sticks    function f       var a   4    function a    return 1      function a    return 2      return a    f      4   In this example a is initialized with the function object resulting from evaluating the second function declaration  and then is assigned 4   var a   1  function b       a   10    return    function a       b    a    1   Here the function declaration is hoisted first  declaring and initializing variable a  Next  this variable is assigned 10  In other words  the assignment does not assign to outer variable a

User · Answer

Another difference that is not mentioned in the other answers is that if you use the anonymous function  var functionOne   function            Some code      and use that as a constructor as in  var one   new functionOne      then one constructor name will not be defined  Function name is non-standard but is supported by Firefox  Chrome  other Webkit-derived browsers and IE 9    With   function functionTwo            Some code   two   new functionTwo      it is possible to retrieve the name of the constructor as a string with two constructor name

User · Answer

Difference function declaration and function expression   Javascript has first class functions  This means that they can be treated just like any other variable  Functions can be passed as arguments in a function  be returned from a function  and can be stored in variables   However storing function in a variable  function expression  isn t the only way to create a function  this can also be done via a function declaration  Here are the key differences    Function expressions can be anonymous whereas a function declaration must have a name   Both have a name property which is used to identify the function  A function expression s name property is the name of the variable which it is bound to  whereas the name of a function declaration is simply the given name  Function declarations are hoisted whereas  function expressions are not  Only the variable is hoisted to have the value of undefined    Here is an example    x000D   x000D  try   x000D    functionOne    x000D    catch  e    x000D    console log  i cant run because im not hoisted    x000D    x000D   x000D  functionTwo    x000D   x000D     function expression  does not get hoisted x000D  let functionOne   function randomName     x000D         Some code x000D     x000D   x000D     function declaration  gets hoisted x000D  function functionTwo     x000D     console log  I get hoisted    x000D    x000D   x000D  try   x000D    randomName       this isn t the proper name  it is functionOne x000D    catch  e    x000D    console log  You cant call me with randomName my name is function one    x000D    x000D   x000D   x000D

User · Answer

First I want to correct Greg  function abc     is scoped too  mdash  the name abc is defined in the scope where this definition is encountered  Example   function xyz      function abc           abc is defined here            but not here   Secondly  it is possible to combine both styles   var xyz   function abc        xyz is going to be defined as usual  abc is undefined in all browsers but Internet nbsp Explorer  mdash  do not rely on it being defined  But it will be defined inside its body   var xyz   function abc         xyz is visible here      abc is visible here      xyz is visible here    abc is undefined here   If you want to alias functions on all browsers  use this kind of declaration   function abc      var xyz   abc    In this case  both xyz and abc are aliases of the same object   console log xyz     abc      prints  true    One compelling reason to use the combined style is the  name  attribute of function objects  not supported by Internet nbsp Explorer   Basically when you define a function like  function abc      console log abc name      prints  abc    its name is automatically assigned  But when you define it like  var abc   function      console log abc name      prints      its name is empty  mdash  we created an anonymous function and assigned it to some variable   Another good reason to use the combined style is to use a short internal name to refer to itself  while providing a long non-conflicting name for external users      Assume really long external scoped is    really long external scoped name   function shortcut n        Let it call itself recursively    shortcut n - 1                 Let it pass itself as a callback    someFunction shortcut                In the example above we can do the same with an external name  but it ll be too unwieldy  and slower     Another way to refer to itself is to use arguments callee  which is still relatively long  and not supported in the strict mode    Deep down  JavaScript treats both statements differently  This is a function declaration   function abc       abc here is defined everywhere in the current scope      We can call it here abc       Works     Yet  it is defined down there  function abc         We can call it again abc       Works   Also  it hoisted through a return statement      We can call it here abc       Works return  function abc       This is a function expression   var xyz   function        xyz here is defined from the point of assignment      We can t call it here xyz       UNDEFINED        Now it is defined xyz   function         We can call it here xyz       works   Function declaration vs  function expression is the real reason why there is a difference demonstrated by Greg   Fun fact   var xyz   function abc      console log xyz name      Prints  abc    Personally  I prefer the  function expression  declaration because this way I can control the visibility  When I define the function like  var abc   function        I know that I defined the function locally  When I define the function like  abc   function        I know that I defined it globally providing that I didn t define abc anywhere in the chain of scopes  This style of definition is resilient even when used inside eval    While the definition  function abc        depends on the context and may leave you guessing where it is actually defined  especially in the case of eval    mdash  the answer is  It depends on the browser

User · Answer

This is just two possible ways of declaring functions  and in the second way  you can use the function before declaration

User · Answer

I use the variable approach in my code for a very specific reason  the theory of which has been covered in an abstract way above  but an example might help some people like me  with limited JavaScript expertise   I have code that I need to run with 160 independently-designed brandings  Most of the code is in shared files  but branding-specific stuff is in a separate file  one for each branding   Some brandings require specific functions  and some do not  Sometimes I have to add new functions to do new branding-specific things  I am happy to change the shared coded  but I don t want to have to change all 160 sets of branding files   By using the variable syntax  I can declare the variable  a function pointer essentially  in the shared code and either assign a trivial stub function  or set to null   The one or two brandings that need a specific implementation of the function can then define their version of the function and assign this to the variable if they want  and the rest do nothing  I can test for a null function before I execute it in the shared code   From people s comments above  I gather it may be possible to redefine a static function too  but I think the variable solution is nice and clear

User · Answer

The two code snippets you ve posted there will  for almost all purposes  behave the same way   However  the difference in behaviour is that with the first variant  var functionOne   function        that function can only be called after that point in the code   With the second variant  function functionTwo     the function is available to code that runs above where the function is declared   This is because with the first variant  the function is assigned to the variable foo at run time  In the second  the function is assigned to that identifier  foo  at parse time   More technical information  JavaScript has three ways of defining functions    Your first snippet shows a function expression  This involves using the  function  operator to create a function - the result of that operator can be stored in any variable or object property  The function expression is powerful that way  The function expression is often called an  anonymous function   because it does not have to have a name  Your second example is a function declaration  This uses the  function  statement to create a function  The function is made available at parse time and can be called anywhere in that scope  You can still store it in a variable or object property later  The third way of defining a function is the  Function    constructor  which is not shown in your original post  It s not recommended to use this as it works the same way as eval    which has its problems

User · Answer

In computer science terms  we talk about anonymous functions and named functions  I think the most important difference is that an anonymous function is not bound to an name  hence the name anonymous function  In JavaScript it is a first class object dynamically declared at runtime   For more information on anonymous functions and lambda calculus  Wikipedia is a good start  http   en wikipedia org wiki Anonymous function

User · Answer

Another difference that is not mentioned in the other answers is that if you use the anonymous function  var functionOne   function            Some code      and use that as a constructor as in  var one   new functionOne      then one constructor name will not be defined  Function name is non-standard but is supported by Firefox  Chrome  other Webkit-derived browsers and IE 9    With   function functionTwo            Some code   two   new functionTwo      it is possible to retrieve the name of the constructor as a string with two constructor name

User · Answer

In light of the  named functions show up in stack traces  argument  modern JavaScript engines are actually quite capable of representing anonymous functions   As of this writing  V8  SpiderMonkey  Chakra and Nitro always refer to named functions by their names  They almost always refer to an anonymous function by its identifier if it has one   SpiderMonkey can figure out the name of an anonymous function returned from another function  The rest can t   If you really  really wanted your iterator and success callbacks to show up in the trace  you could name those too        forEach function iterator          But for the most part it s not worth stressing over   Harness  Fiddle    use strict    var a   function          throw new Error           b   function b             throw new Error               c   function d             throw new Error               e             f  a          g  b          h  c          i  function                  throw new Error                       j  function j                 throw new Error                       k  function l                 throw new Error                         m    function              return function                  throw new Error                             n    function              return function n                 throw new Error                             o    function              return function p                 throw new Error                          console log  a  b  c  concat Object keys e  reduce function  values  key        return values concat e key            concat  m  n  o   reduce function  logs  func         try           func          catch  error            return logs concat  func name      func name     n                                Trace  n                               error stack              Need to manually log the error object in Nitro                join   n n       V8  func name   Trace  Error     at a  http   localhost 8000 test js 4 11      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  b Trace  Error     at b  http   localhost 8000 test js 7 15      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  d Trace  Error     at d  http   localhost 8000 test js 10 15      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name   Trace  Error     at a  http   localhost 8000 test js 4 11      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  b Trace  Error     at b  http   localhost 8000 test js 7 15      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  d Trace  Error     at d  http   localhost 8000 test js 10 15      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name   Trace  Error     at e i  http   localhost 8000 test js 17 19      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  j Trace  Error     at j  http   localhost 8000 test js 20 19      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  l Trace  Error     at l  http   localhost 8000 test js 23 19      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name   Trace  Error     at http   localhost 8000 test js 28 19     at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  n Trace  Error     at n  http   localhost 8000 test js 33 19      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  p Trace  Error     at p  http   localhost 8000 test js 38 19      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27 test js 42   SpiderMonkey  func name   Trace  a http   localhost 8000 test js 4 5  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  b Trace  b http   localhost 8000 test js 7 9  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  d Trace  d http   localhost 8000 test js 10 9  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name   Trace  a http   localhost 8000 test js 4 5  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  b Trace  b http   localhost 8000 test js 7 9  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  d Trace  d http   localhost 8000 test js 10 9  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name   Trace  e i http   localhost 8000 test js 17 13  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  j Trace  j http   localhost 8000 test js 20 13  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  l Trace  l http   localhost 8000 test js 23 13  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name   Trace  m lt   lt  http   localhost 8000 test js 28 13  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  n Trace  n http   localhost 8000 test js 33 13  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  p Trace  p http   localhost 8000 test js 38 13  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   Chakra  func name  undefined Trace  Error    at a  http   localhost 8000 test js 4 5     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at b  http   localhost 8000 test js 7 9     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at d  http   localhost 8000 test js 10 9     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at a  http   localhost 8000 test js 4 5     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at b  http   localhost 8000 test js 7 9     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at d  http   localhost 8000 test js 10 9     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at e i  http   localhost 8000 test js 17 13     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at j  http   localhost 8000 test js 20 13     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at l  http   localhost 8000 test js 23 13     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at Anonymous function  http   localhost 8000 test js 28 13     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at n  http   localhost 8000 test js 33 13     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at p  http   localhost 8000 test js 38 13     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    Nitro  func name   Trace  a http   localhost 8000 test js 4 22 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  b Trace  b http   localhost 8000 test js 7 26 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  d Trace  d http   localhost 8000 test js 10 26 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name   Trace  a http   localhost 8000 test js 4 22 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  b Trace  b http   localhost 8000 test js 7 26 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  d Trace  d http   localhost 8000 test js 10 26 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name   Trace  i http   localhost 8000 test js 17 30 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  j Trace  j http   localhost 8000 test js 20 30 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  l Trace  l http   localhost 8000 test js 23 30 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name   Trace  http   localhost 8000 test js 28 30 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  n Trace  n http   localhost 8000 test js 33 30 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  p Trace  p http   localhost 8000 test js 38 30 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33

User · Answer

The difference is that functionOne is a function expression and so only defined when that line is reached  whereas functionTwo is a function declaration and is defined as soon as its surrounding function or script is executed  due to hoisting      For example  a function expression    x000D   x000D     TypeError  functionOne is not a function x000D  functionOne    x000D   x000D  var functionOne   function     x000D    console log  Hello     x000D     x000D   x000D   x000D    And  a function declaration       x000D   x000D     Outputs   Hello   x000D  functionTwo    x000D   x000D  function functionTwo     x000D    console log  Hello     x000D    x000D   x000D   x000D    Historically  function declarations defined within blocks were handled inconsistently between browsers  Strict mode  introduced in ES5  resolved this by scoping function declarations to their enclosing block    x000D   x000D   use strict       x000D       note this block  x000D    function functionThree     x000D      console log  Hello     x000D      x000D    x000D  functionThree       ReferenceError x000D   x000D   x000D

User · Answer

This is called a Function Expression   var getRectArea   function width  height        return width   height      console log  Area of Rectangle      getRectArea 3 4       This should return the following result in the console      Area of Rectangle  12   This is called a Function Declaration   var w   5  var h   6   function RectArea width  height       declaring the function   return area   width   height                                        note you do not need   after    RectArea w h                          calling or executing the function console log  Area of Rectangle      area      This should return the following result in the console      Area of Rectangle  30   Hope this helps explain what is the difference between Function Expression and Function Declaration and how to use them   Thanks

User · Answer

In light of the  named functions show up in stack traces  argument  modern JavaScript engines are actually quite capable of representing anonymous functions   As of this writing  V8  SpiderMonkey  Chakra and Nitro always refer to named functions by their names  They almost always refer to an anonymous function by its identifier if it has one   SpiderMonkey can figure out the name of an anonymous function returned from another function  The rest can t   If you really  really wanted your iterator and success callbacks to show up in the trace  you could name those too        forEach function iterator          But for the most part it s not worth stressing over   Harness  Fiddle    use strict    var a   function          throw new Error           b   function b             throw new Error               c   function d             throw new Error               e             f  a          g  b          h  c          i  function                  throw new Error                       j  function j                 throw new Error                       k  function l                 throw new Error                         m    function              return function                  throw new Error                             n    function              return function n                 throw new Error                             o    function              return function p                 throw new Error                          console log  a  b  c  concat Object keys e  reduce function  values  key        return values concat e key            concat  m  n  o   reduce function  logs  func         try           func          catch  error            return logs concat  func name      func name     n                                Trace  n                               error stack              Need to manually log the error object in Nitro                join   n n       V8  func name   Trace  Error     at a  http   localhost 8000 test js 4 11      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  b Trace  Error     at b  http   localhost 8000 test js 7 15      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  d Trace  Error     at d  http   localhost 8000 test js 10 15      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name   Trace  Error     at a  http   localhost 8000 test js 4 11      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  b Trace  Error     at b  http   localhost 8000 test js 7 15      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  d Trace  Error     at d  http   localhost 8000 test js 10 15      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name   Trace  Error     at e i  http   localhost 8000 test js 17 19      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  j Trace  Error     at j  http   localhost 8000 test js 20 19      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  l Trace  Error     at l  http   localhost 8000 test js 23 19      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name   Trace  Error     at http   localhost 8000 test js 28 19     at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  n Trace  Error     at n  http   localhost 8000 test js 33 19      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27  func name  p Trace  Error     at p  http   localhost 8000 test js 38 19      at http   localhost 8000 test js 47 9     at Array reduce  native      at http   localhost 8000 test js 44 27 test js 42   SpiderMonkey  func name   Trace  a http   localhost 8000 test js 4 5  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  b Trace  b http   localhost 8000 test js 7 9  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  d Trace  d http   localhost 8000 test js 10 9  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name   Trace  a http   localhost 8000 test js 4 5  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  b Trace  b http   localhost 8000 test js 7 9  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  d Trace  d http   localhost 8000 test js 10 9  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name   Trace  e i http   localhost 8000 test js 17 13  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  j Trace  j http   localhost 8000 test js 20 13  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  l Trace  l http   localhost 8000 test js 23 13  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name   Trace  m lt   lt  http   localhost 8000 test js 28 13  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  n Trace  n http   localhost 8000 test js 33 13  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   func name  p Trace  p http   localhost 8000 test js 38 13  http   localhost 8000 test js 47 9  http   localhost 8000 test js 54 1   Chakra  func name  undefined Trace  Error    at a  http   localhost 8000 test js 4 5     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at b  http   localhost 8000 test js 7 9     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at d  http   localhost 8000 test js 10 9     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at a  http   localhost 8000 test js 4 5     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at b  http   localhost 8000 test js 7 9     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at d  http   localhost 8000 test js 10 9     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at e i  http   localhost 8000 test js 17 13     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at j  http   localhost 8000 test js 20 13     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at l  http   localhost 8000 test js 23 13     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at Anonymous function  http   localhost 8000 test js 28 13     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at n  http   localhost 8000 test js 33 13     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    func name  undefined Trace  Error    at p  http   localhost 8000 test js 38 13     at Anonymous function  http   localhost 8000 test js 47 9     at Global code  http   localhost 8000 test js 42 1    Nitro  func name   Trace  a http   localhost 8000 test js 4 22 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  b Trace  b http   localhost 8000 test js 7 26 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  d Trace  d http   localhost 8000 test js 10 26 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name   Trace  a http   localhost 8000 test js 4 22 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  b Trace  b http   localhost 8000 test js 7 26 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  d Trace  d http   localhost 8000 test js 10 26 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name   Trace  i http   localhost 8000 test js 17 30 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  j Trace  j http   localhost 8000 test js 20 30 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  l Trace  l http   localhost 8000 test js 23 30 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name   Trace  http   localhost 8000 test js 28 30 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  n Trace  n http   localhost 8000 test js 33 30 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33  func name  p Trace  p http   localhost 8000 test js 38 30 http   localhost 8000 test js 47 13 reduce  native code  global code http   localhost 8000 test js 44 33

User · Answer

An illustration of when to prefer the first method to the second one is when you need to avoid overriding a function s previous definitions   With  if  condition       function myfunction               Some code             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           does the correct job of defining myfunction only when condition is met

User · Answer

One important point to note is  -  let there are two functions  -  sum 1 2    const sum   function first  second      return first   second      In above case  it will give error that sum is not defined  but  sum 1 2    function sum first  second      return first   second      This function will not any error as Hoisting will take place in this case

User · Answer

In terms of code maintenance cost  named functions are more preferable    Independent from the place where they are declared  but still limited by scope   More resistant to mistakes like conditional initialization  you are still able to override if wanted to   The code becomes more readable by allocating local functions separately of scope functionality  Usually in the scope the functionality goes first  followed by declarations of local functions  In a debugger you will clearly see the function name on the call stack instead of an  anonymous evaluated  function    I suspect more PROS for named functions are follow  And what is listed as an advantage of named functions is a disadvantage for anonymous ones   Historically  anonymous functions appeared from the inability of JavaScript as a language to list members with named functions         member function        How do I make  this member  a named function

User · Answer

Both are different ways of defining a function  The difference is how the browser interprets and loads them into an execution context    The first case is of function expressions which loads only when the interpreter reaches that line of code  So if you do it like the following  you will get an error that the functionOne is not a function   functionOne    var functionOne   function            Some code      The reason is that on the first line no value is assigned to functionOne  and hence it is undefined  We are trying to call it as a function  and hence we are getting an error   On the second line we are assigning the reference of an anonymous function to functionOne   The second case is of function declarations that loads before any code is executed  So if you do like the following you won t get any error as the declaration loads before code execution   functionOne    function functionOne           Some code

User · Answer

Another difference between both function is functionOne can be used as a variable that can hold multiple functions within and functionTwo holds some block of code that gets executed all when called  Please check below       var functionOne    function           return             sayHello  function                    console log  say hello                         redirectPage function  url                   window location href    url                              You have a choice which function to be called  e g functionOne sayHello or functionOne  redirectPage  And if you call functionTwo then whole block of code will get executed

User · Answer

I m adding my own answer just because everyone else has covered the hoisting part thoroughly   I ve wondered about which way is better for a long while now  and thanks to http   jsperf com now I know       Function declarations are faster  and that s what really matters in web dev right

User · Answer

Availability  scope  of the function  The following works because function add   is scoped to the nearest block   x000D   x000D  try     console log  Success     add 1  1      catch e      console log  ERROR      e      function add a  b     return a   b    x000D   x000D   x000D   The following does not work because the variable is called before a function value is assigned to the variable add   x000D   x000D  try     console log  Success     add 1  1      catch e      console log  ERROR      e      var add function a  b     return a   b    x000D   x000D   x000D   The above code is identical in functionality to the code below  Note that explicitly assigning add   undefined is superfluous because simply doing var add  is the exact same as var add undefined   x000D   x000D  var add   undefined   try     console log  Success     add 1  1      catch e      console log  ERROR      e      add   function a  b     return a   b    x000D   x000D   x000D   The following does not work because var add  begins an expression and causes the following function add   to be an expression instead of a block  Named functions are only visible to themselves and their surrounding block  As function add   is an expression here  it has no surrounding block  so it is only visible to itself   x000D   x000D  try     console log  Success     add 1  1      catch e      console log  ERROR      e      var add function add a  b     return a   b    x000D   x000D   x000D     function  name  The name of a function function thefuncname     is thefuncname when it is declared this way   x000D   x000D  function foobar a  b     console log foobar name   x000D   x000D   x000D    x000D   x000D  var a   function foobar       console log a name   x000D   x000D   x000D   Otherwise  if a function is declared as function      the function name is the first variable used to store the function   x000D   x000D  var a   function      var b    function    return function          console log a name   console log b name   x000D   x000D   x000D   If there are no variables set to the function  then the functions name is the empty string   quot  quot     x000D   x000D  console log  function      name          x000D   x000D   x000D   Lastly  while the variable the function is assigned to initially sets the name  successive variables set to the function do not change the name   x000D   x000D  var a   function      var b   a  var c   b   console log a name   console log b name   console log c name   x000D   x000D   x000D    Performance  In Google s V8 and Firefox s Spidermonkey there might be a few microsecond JIST compilation difference  but ultimately the result is the exact same  To prove this  let s examine the efficiency of JSPerf at microbenchmarks by comparing the speed of two blank code snippets  The JSPerf tests are found here  And  the jsben ch testsare  found here  As you can see  there is a noticable difference when there should be none  If you are really a performance freak like me  then it might be more worth your while trying to reduce the number of variables and functions in the scope and especially eliminating polymorphism  such as using the same variable to store two different types    Variable Mutability  When you use the var keyword to declare a variable  you can then reassign a different value to the variable like so   x000D   x000D   function         use strict       var foobar   function         initial value     try           foobar    Hello World       new value         console log   no error           catch error            console log  ERROR      error message             console log foobar  window foobar         x000D   x000D   x000D   However  when we use the const-statement  the variable reference becomes immutable  This means that we cannot assign a new value to the variable  Please note  however  that this does not make the contents of the variable immutable  if you do const arr       then you can still do arr 10     quot example quot   Only doing something like arr    quot new value quot  or arr      would throw an error as seen below   x000D   x000D   function         use strict       const foobar   function         initial value     try           foobar    Hello World       new value         console log   no error           catch error            console log  ERROR      error message             console log foobar  window foobar         x000D   x000D   x000D   Interestingly  if we declare the variable as function funcName      then the immutability of the variable is the same as declaring it with var   x000D   x000D   function         use strict       function foobar         initial value     try           foobar    Hello World       new value         console log   no error           catch error            console log  ERROR      error message             console log foobar  window foobar         x000D   x000D   x000D       quot   quot  The  quot nearest block quot  is the nearest  quot function  quot   including asynchronous functions  generator functions  and asynchronous generator functions   However  interestingly  a function functionName      behaves like a var functionName   function      when in a non-closure block to items outside said closure  Observe   Normal var add function       x000D   x000D  try        typeof will simply return  undefined  if the variable does not exist   if  typeof add      undefined         add 1  1      just to prove it     console log  Not a block       else if add   undefined      this throws an exception if add doesn t exist     console log  Behaves like var add function a b  return a b           catch e      console log  Is a block      var add function a  b  return a   b  x000D   x000D   x000D    Normal function add       x000D   x000D  try        typeof will simply return  undefined  if the variable does not exist   if  typeof add      undefined         add 1  1      just to prove it     console log  Not a block       else if add   undefined      this throws an exception if add doesn t exist     console log  Behaves like var add function a b  return a b          catch e      console log  Is a block      function add a  b     return a   b    x000D   x000D   x000D    Function   x000D   x000D  try        typeof will simply return  undefined  if the variable does not exist   if  typeof add      undefined         add 1  1      just to prove it     console log  Not a block       else if add   undefined      this throws an exception if add doesn t exist     console log  Behaves like var add function a b  return a b          catch e      console log  Is a block       function          function add a  b         return a   b              x000D   x000D   x000D    Statement  such as if  else  for  while  try catch finally  switch  do while  with    x000D   x000D  try        typeof will simply return  undefined  if the variable does not exist   if  typeof add      undefined         add 1  1      just to prove it     console log  Not a block       else if add   undefined      this throws an exception if add doesn t exist     console log  Behaves like var add function a b  return a b          catch e      console log  Is a block            function add a  b         return a   b          x000D   x000D   x000D    Arrow Function with var add function     x000D   x000D  try        typeof will simply return  undefined  if the variable does not exist   if  typeof add      undefined         add 1  1      just to prove it     console log  Not a block       else if add   undefined      this throws an exception if add doesn t exist     console log  Behaves like var add function a b  return a b          catch e      console log  Is a block            gt        var add function a  b         return a   b              x000D   x000D   x000D    Arrow Function With function add     x000D   x000D  try        typeof will simply return  undefined  if the variable does not exist   if  typeof add      undefined         add 1  1      just to prove it     console log  Not a block       else if add   undefined      this throws an exception if add doesn t exist     console log  Behaves like var add function a b  return a b          catch e      console log  Is a block            gt        function add a  b         return a   b              x000D   x000D   x000D

User · Answer

I prefer defining function as variable   let first   function x      return x 0       Instead of   function first                 Because i can use expressions and decorators when defining the function  For example   let safe   function f     try  f         let last   safe function x  return x 0       Also with ES6 its much shorter    let last   x   gt  x 0                function last x        return x 0              let last   safe x   gt  x 0

User · Answer

This is just two possible ways of declaring functions  and in the second way  you can use the function before declaration

User · Answer

Here s the rundown on the standard forms that create functions   Originally written for another question  but adapted after being moved into the canonical question    Terms    ES5  ECMAScript 5th edition  2009 ES2015  ECMAScript 2015  also known as  ES6     The quick list    Function Declaration  Anonymous  function Expression  which despite the term  sometimes create functions with names  Named function Expression Accessor Function Initializer  ES5   Arrow Function Expression  ES2015    which  like anonymous function expressions  don t involve an explicit name  and yet can create functions with names  Method Declaration in Object Initializer  ES2015   Constructor and Method Declarations in class  ES2015     Function Declaration  The first form is a function declaration  which looks like this   function x         console log  x        A function declaration is a declaration  it s not a statement or expression  As such  you don t follow it with a    although doing so is harmless    A function declaration is processed when execution enters the context in which it appears  before any step-by-step code is executed  The function it creates is given a proper name  x in the example above   and that name is put in the scope in which the declaration appears   Because it s processed before any step-by-step code in the same context  you can do things like this   x       Works even though it s above the declaration function x         console log  x        Until ES2015  the spec didn t cover what a JavaScript engine should do if you put a function declaration inside a control structure like try  if  switch  while  etc   like this   if  someCondition        function foo            lt       HERE THERE                             lt       BE DRAGONS     And since they re processed before step-by-step code is run  it s tricky to know what to do when they re in a control structure   Although doing this wasn t specified until ES2015  it was an allowable extension to support function declarations in blocks  Unfortunately  and inevitably   different engines did different things   As of ES2015  the specification says what to do  In fact  it gives three separate things to do    If in loose mode not on a web browser  the JavaScript engine is supposed to do one thing If in loose mode on a web browser  the JavaScript engine is supposed to do something else If in strict mode  browser or not   the JavaScript engine is supposed to do yet another thing   The rules for the loose modes are tricky  but in strict mode  function declarations in blocks are easy  They re local to the block  they have block scope  which is also new in ES2015   and they re hoisted to the top of the block  So    use strict   if  someCondition        foo                     Works just fine     function foo             console log typeof foo       undefined    foo  is not in scope here                             because it s not in the same block     Anonymous  function Expression  The second common form is called an anonymous function expression   var y   function          console log  y         Like all expressions  it s evaluated when it s reached in the step-by-step execution of the code   In ES5  the function this creates has no name  it s anonymous   In ES2015  the function is assigned a name if possible by inferring it from context  In the example above  the name would be y  Something similar is done when the function is the value of a property initializer   For details on when this happens and the rules  search for SetFunctionName in the the specification nbsp  mdash  it appears all over the place    Named function Expression  The third form is a named function expression   NFE     var z   function w         console log  zw        The function this creates has a proper name  w in this case   Like all expressions  this is evaluated when it s reached in the step-by-step execution of the code  The name of the function is not added to the scope in which the expression appears  the name is in scope within the function itself   var z   function w         console log typeof w       function     console log typeof w           undefined    Note that NFEs have frequently been a source of bugs for JavaScript implementations  IE8 and earlier  for instance  handle NFEs completely incorrectly  creating two different functions at two different times  Early versions of Safari had issues as well  The good news is that current versions of browsers  IE9 and up  current Safari  don t have those issues any more   But as of this writing  sadly  IE8 remains in widespread use  and so using NFEs with code for the web in general is still problematic    Accessor Function Initializer  ES5    Sometimes functions can sneak in largely unnoticed  that s the case with accessor functions  Here s an example   var obj         value  0      get f             return this value             set f v            this value   v           console log obj f              0 console log typeof obj f        number    Note that when I used the function  I didn t use     That s because it s an accessor function for a property  We get and set the property in the normal way  but behind the scenes  the function is called   You can also create accessor functions with Object defineProperty  Object defineProperties  and the lesser-known second argument to Object create   Arrow Function Expression  ES2015    ES2015 brings us the arrow function  Here s one example   var a    1  2  3   var b   a map n   gt  n   2   console log b join            2  4  6   See that n   gt  n   2 thing hiding in the map   call  That s a function   A couple of things about arrow functions    They don t have their own this  Instead  they close over the this of the context where they re defined   They also close over arguments and  where relevant  super   This means that the this within them is the same as the this where they re created  and cannot be changed  As you ll have noticed with the above  you don t use the keyword function  instead  you use   gt     The n   gt  n   2 example above is one form of them  If you have multiple arguments to pass the function  you use parens   var a    1  2  3   var b   a map  n  i    gt  n   i   console log b join            0  2  6    Remember that Array map passes the entry as the first argument  and the index as the second    In both cases  the body of the function is just an expression  the function s return value will automatically be the result of that expression  you don t use an explicit return    If you re doing more than just a single expression  use    and an explicit return  if you need to return a value   as normal   var a        first   Joe   last   Bloggs       first   Albert   last   Bloggs       first   Mary   last   Albright      a   a sort  a  b    gt      var rv   a last localeCompare b last     if  rv     0        rv   a first localeCompare b first         return rv      console log JSON stringify a      The version without         is called an arrow function with an expression body or concise body   Also  A concise arrow function   The one with         defining the body is an arrow function with a function body   Also  A verbose arrow function    Method Declaration in Object Initializer  ES2015    ES2015 allows a shorter form of declaring a property that references a function called a method definition  it looks like this   var o         foo                the almost-equivalent in ES5 and earlier would be   var o         foo  function foo                the difference  other than verbosity  is that a method can use super  but a function cannot  So for instance  if you had an object that defined  say  valueOf using method syntax  it could use super valueOf   to get the value Object prototype valueOf would have returned  before presumably doing something else with it   whereas the ES5 version would have to do Object prototype valueOf call this  instead   That also means that the method has a reference to the object it was defined on  so if that object is temporary  for instance  you re passing it into Object assign as one of the source objects   method syntax could mean that the object is retained in memory when otherwise it could have been garbage collected  if the JavaScript engine doesn t detect that situation and handle it if none of the methods uses super    Constructor and Method Declarations in class  ES2015    ES2015 brings us class syntax  including declared constructors and methods   class Person       constructor firstName  lastName            this firstName   firstName          this lastName   lastName             getFullName             return this firstName         this lastName            There are two function declarations above  One for the constructor  which gets the name Person  and one for getFullName  which is a function assigned to Person prototype

User · Answer

The difference is that functionOne is a function expression and so only defined when that line is reached  whereas functionTwo is a function declaration and is defined as soon as its surrounding function or script is executed  due to hoisting      For example  a function expression    x000D   x000D     TypeError  functionOne is not a function x000D  functionOne    x000D   x000D  var functionOne   function     x000D    console log  Hello     x000D     x000D   x000D   x000D    And  a function declaration       x000D   x000D     Outputs   Hello   x000D  functionTwo    x000D   x000D  function functionTwo     x000D    console log  Hello     x000D    x000D   x000D   x000D    Historically  function declarations defined within blocks were handled inconsistently between browsers  Strict mode  introduced in ES5  resolved this by scoping function declarations to their enclosing block    x000D   x000D   use strict       x000D       note this block  x000D    function functionThree     x000D      console log  Hello     x000D      x000D    x000D  functionThree       ReferenceError x000D   x000D   x000D

User · Answer

About performance   New versions of V8 introduced several under-the-hood optimizations and so did SpiderMonkey   There is almost no difference now between expression and declaration  Function expression appears to be faster now   Chrome 62 0 3202   FireFox 55   Chrome Canary 63 0 3225        Anonymous function expressions appear to have better performance   against Named function expression      Firefox  Chrome Canary  Chrome

User · Answer

A function declaration and a function expression assigned to a variable behave the same once the binding is established   There is a difference however at how and when the function object is actually associated with its variable  This difference is due to the mechanism called variable hoisting in JavaScript   Basically  all function declarations and variable declarations are hoisted to the top of the function in which the declaration occurs  this is why we say that JavaScript has function scope     When a function declaration is hoisted  the function body  follows  so when the function body is evaluated  the variable will immediately be bound to a function object  When a variable declaration is hoisted  the initialization does not follow  but is  left behind   The variable is initialized to undefined at the start of the function body  and will be assigned a value at its original location in the code   Actually  it will be assigned a value at every location where a declaration of a variable with the same name occurs     The order of hoisting is also important  function declarations take precedence over variable declarations with the same name  and the last function declaration takes precedence over previous function declarations with the same name   Some examples     var foo   1  function bar       if   foo        var foo   10     return foo    bar      10   Variable foo is hoisted to the top of the function  initialized to undefined  so that  foo is true  so foo is assigned 10  The foo outside of bar s scope plays no role and is untouched    function f       return a     function a    return 1      var a   4    function a    return 2   f        2  function f       return a    var a   4    function a    return 1     function a    return 2   f        2   Function declarations take precedence over variable declarations  and the last function declaration  sticks    function f       var a   4    function a    return 1      function a    return 2      return a    f      4   In this example a is initialized with the function object resulting from evaluating the second function declaration  and then is assigned 4   var a   1  function b       a   10    return    function a       b    a    1   Here the function declaration is hoisted first  declaring and initializing variable a  Next  this variable is assigned 10  In other words  the assignment does not assign to outer variable a

User · Answer

Other commenters have already covered the semantic difference of the two variants above  I wanted to note a stylistic difference  Only the  assignment  variation can set a property of another object   I often build JavaScript modules with a pattern like this    function        var exports            function privateUtil                                exports publicUtil   function                                 return exports          With this pattern  your public functions will all use assignment  while your private functions use declaration    Note also that assignment should require a semicolon after the statement  while declaration prohibits it

User · Answer

An important reason is to add one and only one variable as the  Root  of your namespace     var MyNamespace      MyNamespace foo  function          or  var MyNamespace       foo  function                    There are many techniques for namespacing  It s become more important with the plethora of JavaScript modules available   Also see How do I declare a namespace in JavaScript

User · Answer

new Function   can be used to pass the function s body in a string  And hence this can be used to create dynamic functions  Also passing the script without executing the script   var func   new Function  x    y    return x y     function secondFunction       var result     result   func 10 20      console log   result       secondFunction

User · Answer

An important reason is to add one and only one variable as the  Root  of your namespace     var MyNamespace      MyNamespace foo  function          or  var MyNamespace       foo  function                    There are many techniques for namespacing  It s become more important with the plethora of JavaScript modules available   Also see How do I declare a namespace in JavaScript

User · Answer

If you would use those functions to create objects  you would get   var objectOne   new functionOne    console log objectOne   proto        prints  Object     because constructor is an anonymous function  var objectTwo   new functionTwo    console log objectTwo   proto        prints  functionTwo     because constructor is a named function

User · Answer

This is called a Function Expression   var getRectArea   function width  height        return width   height      console log  Area of Rectangle      getRectArea 3 4       This should return the following result in the console      Area of Rectangle  12   This is called a Function Declaration   var w   5  var h   6   function RectArea width  height       declaring the function   return area   width   height                                        note you do not need   after    RectArea w h                          calling or executing the function console log  Area of Rectangle      area      This should return the following result in the console      Area of Rectangle  30   Hope this helps explain what is the difference between Function Expression and Function Declaration and how to use them   Thanks

User · Answer

Expression in JS   Something that returns a value  Example  Try out following in chrome console   a   10 output   10   1   3  output   4   Declaration Statement  Something that does not return a value  Example   if  1  gt  2        do something       here  1 2  is an expression but the  if  statament is not  Its not returning anything      Similarly  we have Function Declaration Statement vs Function Expression  Lets take an example      test js  var a   10      function expression var fun expression   function        console log  Running function Expression          funciton expression  function fun declaration        console log  Running function Statement        Important   What happens when JavaScript engines runs the above js file    When this js runs following things will happen    Memory will be created variable  a  and  fun expression   And memory will be created for function statement  fun declaration   a  will be assigned  undefined    fun expression  will be assigned  undefined    fun declaration  will be in the memory in its entirety    Note  Step 1 and 2 above are called  Execution Context - Creation Phase       Now suppose we update the js to      test js  console log a     output  udefined  No error  console log fun expression      output  undefined  No error  console log fun expression       output  Error  As we trying to invoke undefined   console log fun declaration       output  running function statement   As fun declaration is already hoisted in the memory     var a   10      function expression var fun expression   function        console log  Running function expression         function declaration  function fun declaration        console log  running function declaration      console log a       output  10 console log fun expression      output  Running function expression console log fun declaration      output  running function declaration   The output mentioned above in the comments  should be useful to understand the different between function expression and function statement declaration

User · Answer

In JavaScript there are two ways to create functions    Function declaration   function fn      console log  Hello      fn      This is very basic  self-explanatory  used in many languages and standard across C family of languages  We declared a function defined it and executed it by calling it   What you should be knowing is that functions are actually objects in JavaScript  internally we have created an object for above function and given it a name called fn or the reference to the object is stored in fn  Functions are objects in JavaScript  an instance of function is actually an object instance  Function expression   var fn function      console log  Hello      fn      JavaScript has first-class functions  that is  create a function and assign it to a variable just like you create a string or number and assign it to a variable  Here  the fn variable is assigned to a function  The reason for this concept is functions are objects in JavaScript  fn is pointing to the object instance of the above function  We have initialized a function and assigned it to a variable  It s not executing the function and assigning the result    Reference  JavaScript function declaration syntax  var fn   function      vs function fn

User · Answer

Another difference between both function is functionOne can be used as a variable that can hold multiple functions within and functionTwo holds some block of code that gets executed all when called  Please check below       var functionOne    function           return             sayHello  function                    console log  say hello                         redirectPage function  url                   window location href    url                              You have a choice which function to be called  e g functionOne sayHello or functionOne  redirectPage  And if you call functionTwo then whole block of code will get executed

User · Answer

Speaking about the global context  both  the var statement and a FunctionDeclaration at the end will create a non-deleteable property on the global object  but the value of both can be overwritten   The subtle difference between the two ways is that when the Variable Instantiation process runs  before the actual code execution  all identifiers declared with var will be initialized with undefined  and the ones used by the FunctionDeclaration s will be available since that moment  for example    alert typeof foo       function   it s already available  alert typeof bar       undefined   function foo        var bar   function         alert typeof bar       function    The assignment of the bar FunctionExpression takes place until runtime   A global property created by a FunctionDeclaration can be overwritten without any problems just like a variable value  e g     function test        test   null    Another obvious difference between your two examples is that the first function doesn t have a name  but the second has it  which can be really useful when debugging  i e  inspecting a call stack    About your edited first example  foo   function     alert  hello          it is an undeclared assignment  I would highly encourage you to always use the var keyword   With an assignment  without the var statement  if the referenced identifier is not found in the scope chain  it will become a deleteable property of the global object   Also  undeclared assignments throw a ReferenceError on ECMAScript 5 under Strict Mode   A must read    Named function expressions demystified   Note  This answer has been merged from another question  in which the major doubt and misconception from the OP was that identifiers declared with a FunctionDeclaration  couldn t be overwritten which is not the case

User · Answer

Greg s Answer is good enough  but I still would like to add something to it that I learned just now watching Douglas Crockford s videos   Function expression   var foo   function foo         Function statement   function foo         The function statement is just a shorthand for var statement with a function value   So  function foo         expands to  var foo   function foo         Which expands further to   var foo   undefined  foo   function foo         And they are both hoisted to the top of the code

User · Answer

They are pretty similar with some small differences  first one is a variable which assigned to an anonymous function  Function Declaration  and second one is the normal way to create a function in JavaScript Anonymous function Declaration   both has usage  cons and pros   1  Function Expression  var functionOne   function            Some code         A Function Expression defines a function as a part of a larger   expression syntax  typically a variable assignment    Functions   defined via Functions Expressions can be named or anonymous  Function   Expressions must not start with    function     hence the parentheses   around the self invoking example below     Assign a variable to a function  means no Hoisting  as we know functions in JavaScript can Hoist  means they can be called before they get declared  while variables need to be declared before getting access to them  so means in this case we can not access the function before where it s declared  also it could be a way that you write your functions  for the functions which return another function  this kind of declaration could make sense  also in ECMA6  amp  above you can assign this to an arrow function which can be used to call anonymous functions  also this way of declaring is a better way to create Constructor functions in JavaScript   2  Function Declaration  function functionTwo            Some code        A Function Declaration defines a named function variable without   requiring variable assignment  Function Declarations occur as   standalone constructs and cannot be nested within non-function blocks    It   s helpful to think of them as siblings of Variable Declarations    Just as Variable Declarations must start with    var     Function   Declarations must begin with    function       This is the normal way of calling a function in JavaScript  this function can be called before you even declare it as in JavaScript all functions get Hoisted  but if you have  use strict  this won t Hoist as expected  it s a good way to call all normal functions which are not big in lines and neither are a  constructor function   Also  if you need more info about how hoisting works in JavaScript  visit the link below   https   developer mozilla org en-US docs Glossary Hoisting

User · Answer

They are pretty similar with some small differences  first one is a variable which assigned to an anonymous function  Function Declaration  and second one is the normal way to create a function in JavaScript Anonymous function Declaration   both has usage  cons and pros   1  Function Expression  var functionOne   function            Some code         A Function Expression defines a function as a part of a larger   expression syntax  typically a variable assignment    Functions   defined via Functions Expressions can be named or anonymous  Function   Expressions must not start with    function     hence the parentheses   around the self invoking example below     Assign a variable to a function  means no Hoisting  as we know functions in JavaScript can Hoist  means they can be called before they get declared  while variables need to be declared before getting access to them  so means in this case we can not access the function before where it s declared  also it could be a way that you write your functions  for the functions which return another function  this kind of declaration could make sense  also in ECMA6  amp  above you can assign this to an arrow function which can be used to call anonymous functions  also this way of declaring is a better way to create Constructor functions in JavaScript   2  Function Declaration  function functionTwo            Some code        A Function Declaration defines a named function variable without   requiring variable assignment  Function Declarations occur as   standalone constructs and cannot be nested within non-function blocks    It   s helpful to think of them as siblings of Variable Declarations    Just as Variable Declarations must start with    var     Function   Declarations must begin with    function       This is the normal way of calling a function in JavaScript  this function can be called before you even declare it as in JavaScript all functions get Hoisted  but if you have  use strict  this won t Hoist as expected  it s a good way to call all normal functions which are not big in lines and neither are a  constructor function   Also  if you need more info about how hoisting works in JavaScript  visit the link below   https   developer mozilla org en-US docs Glossary Hoisting

User · Answer

I prefer defining function as variable   let first   function x      return x 0       Instead of   function first                 Because i can use expressions and decorators when defining the function  For example   let safe   function f     try  f         let last   safe function x  return x 0       Also with ES6 its much shorter    let last   x   gt  x 0                function last x        return x 0              let last   safe x   gt  x 0

User · Answer

The difference is that functionOne is a function expression and so only defined when that line is reached  whereas functionTwo is a function declaration and is defined as soon as its surrounding function or script is executed  due to hoisting      For example  a function expression    x000D   x000D     TypeError  functionOne is not a function x000D  functionOne    x000D   x000D  var functionOne   function     x000D    console log  Hello     x000D     x000D   x000D   x000D    And  a function declaration       x000D   x000D     Outputs   Hello   x000D  functionTwo    x000D   x000D  function functionTwo     x000D    console log  Hello     x000D    x000D   x000D   x000D    Historically  function declarations defined within blocks were handled inconsistently between browsers  Strict mode  introduced in ES5  resolved this by scoping function declarations to their enclosing block    x000D   x000D   use strict       x000D       note this block  x000D    function functionThree     x000D      console log  Hello     x000D      x000D    x000D  functionThree       ReferenceError x000D   x000D   x000D

User · Answer

Greg s Answer is good enough  but I still would like to add something to it that I learned just now watching Douglas Crockford s videos   Function expression   var foo   function foo         Function statement   function foo         The function statement is just a shorthand for var statement with a function value   So  function foo         expands to  var foo   function foo         Which expands further to   var foo   undefined  foo   function foo         And they are both hoisted to the top of the code

User · Answer

Both are different ways of defining a function  The difference is how the browser interprets and loads them into an execution context    The first case is of function expressions which loads only when the interpreter reaches that line of code  So if you do it like the following  you will get an error that the functionOne is not a function   functionOne    var functionOne   function            Some code      The reason is that on the first line no value is assigned to functionOne  and hence it is undefined  We are trying to call it as a function  and hence we are getting an error   On the second line we are assigning the reference of an anonymous function to functionOne   The second case is of function declarations that loads before any code is executed  So if you do like the following you won t get any error as the declaration loads before code execution   functionOne    function functionOne           Some code

User · Answer

Hoisting is the JavaScript interpreter   s action of moving all variable and function declarations to the top of the current scope    However  only the actual declarations are hoisted  by leaving assignments where they are    variable s Function s declared inside the page are global can access anywhere in that page  variable s Functions declared inside the function are having local scope  means they are available accessed inside the function body  scope   they are not available outside the function body    Variable  Javascript is called loosely typed language  Which means Javascript variables can hold value of any Data-Type  Javascript automatically takes care of changing the variable-type based on the value literal provided during runtime   global Page   10                                                var global Page          undefined        Integer literal  Number Type    -------------------       global Page   10         Number          global Page    Yash                       Interpreted           global Page    Yash      String        String literal  String Type              AS                 global Page   true       Boolean  var global Page   true                                          global Page   function                 function        Boolean Type                    -------------------                 var local functionblock      undefined global Page   function                                                    local functionblock   777    Number     var local functionblock   777                                           Assigning function as a data           Function  function Identifier opt   FormalParameterList opt            FunctionBody   sequence of statements           return   Default undefined          return  some data        functions declared inside the page are hoisted to top of the page having global access  functions declared inside the function-block are hoisted to top of the block  Default return value of function is  undefined   Variable declaration default value also  undefined   Scope with respect to function-block global   Scope with respect to page undefined   not available     Function Declaration  function globalAccess                                      function globalAccess                                              -------------------       globalAccess                                               function globalAccess        Re-Defined   overridden  localAccess                             Hoisted  As              function localAccess     function globalAccess                                                 localAccess                   -------------------         localAccess       function accessed with in globalAccess   only       function localAccess                                                                                               globalAccess                                                               localAccess       ReferenceError as the function is not defined   Function Expression          10                     literal         10                     Expression                 10  toString   - gt   10  var a                            a   10                     Expression var              a toString    - gt   10   function invoke               Expression Function  console log  Self Invoking                          function                                                                              - gt   Self Invoking   var f       f   function               Expression var Function     console log  var Function                                      f     - gt   var Function           Function assigned to variable Example    function selfExecuting        console log  IIFE - Immediately-Invoked Function Expression           var anonymous   function         console log  anonymous function Expression        var namedExpression   function for InternalUSE fact       if fact     1           return 1             var localExpression   function            console log  Local to the parent Function Scope               globalExpression   function             console log  creates a new global variable  then assigned this function                   return    undefined      return fact   for InternalUSE  fact - 1          namedExpression    globalExpression      javascript interpreted as  var anonymous  var namedExpression  var globalExpression   anonymous   function         console log  anonymous function Expression        namedExpression   function for InternalUSE fact       var localExpression       if fact     1           return 1            localExpression   function            console log  Local to the parent Function Scope               globalExpression   function             console log  creates a new global variable  then assigned this function                 return fact   for InternalUSE  fact - 1         DEFAULT UNDEFINED      namedExpression 10   globalExpression      You can check function declaration  expression test over different browser s using jsperf Test Runner    ES5 Constructor Function Classes  Function objects created using Function prototype bind  JavaScript treats functions as first-class objects  so being an object  you can assign properties to a function   function Shape id       Function Declaration     this id   id            Adding a prototyped method to a function      Shape prototype getID   function              return this id             Shape prototype setID   function   id             this id   id          var expFn   Shape     Function Expression  var funObj   new Shape        Function Object funObj hasOwnProperty  prototype       false funObj setID  10    console log  funObj getID         10     ES6 introduced Arrow function  An arrow function expression has a shorter syntax  they are best suited for non-method functions  and they cannot be used as constructors      ArrowFunction   ArrowParameters   gt  ConciseBody   const fn    item    gt    return item  amp  1    Odd     Even      console log  fn 2        Even console log  fn 3        Odd

User · Answer

The first example is a function declaration   function abc       The second example is a function expression   var abc   function         The main difference is how they are hoisted  lifted and declared   In the first example  the whole function declaration is hoisted  In the second example only the var  abc  is hoisted  its value  the function  will be undefined  and the function itself remains at the position that it is declared   To put it simply     this will work abc param   function abc        this would fail abc param   var abc   function        To study more about this topic I strongly recommend you this link

User · Answer

An illustration of when to prefer the first method to the second one is when you need to avoid overriding a function s previous definitions   With  if  condition       function myfunction               Some code             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           does the correct job of defining myfunction only when condition is met

User · Answer

Difference function declaration and function expression   Javascript has first class functions  This means that they can be treated just like any other variable  Functions can be passed as arguments in a function  be returned from a function  and can be stored in variables   However storing function in a variable  function expression  isn t the only way to create a function  this can also be done via a function declaration  Here are the key differences    Function expressions can be anonymous whereas a function declaration must have a name   Both have a name property which is used to identify the function  A function expression s name property is the name of the variable which it is bound to  whereas the name of a function declaration is simply the given name  Function declarations are hoisted whereas  function expressions are not  Only the variable is hoisted to have the value of undefined    Here is an example    x000D   x000D  try   x000D    functionOne    x000D    catch  e    x000D    console log  i cant run because im not hoisted    x000D    x000D   x000D  functionTwo    x000D   x000D     function expression  does not get hoisted x000D  let functionOne   function randomName     x000D         Some code x000D     x000D   x000D     function declaration  gets hoisted x000D  function functionTwo     x000D     console log  I get hoisted    x000D    x000D   x000D  try   x000D    randomName       this isn t the proper name  it is functionOne x000D    catch  e    x000D    console log  You cant call me with randomName my name is function one    x000D    x000D   x000D   x000D

User · Answer

If you would use those functions to create objects  you would get   var objectOne   new functionOne    console log objectOne   proto        prints  Object     because constructor is an anonymous function  var objectTwo   new functionTwo    console log objectTwo   proto        prints  functionTwo     because constructor is a named function

User · Answer

I use the variable approach in my code for a very specific reason  the theory of which has been covered in an abstract way above  but an example might help some people like me  with limited JavaScript expertise   I have code that I need to run with 160 independently-designed brandings  Most of the code is in shared files  but branding-specific stuff is in a separate file  one for each branding   Some brandings require specific functions  and some do not  Sometimes I have to add new functions to do new branding-specific things  I am happy to change the shared coded  but I don t want to have to change all 160 sets of branding files   By using the variable syntax  I can declare the variable  a function pointer essentially  in the shared code and either assign a trivial stub function  or set to null   The one or two brandings that need a specific implementation of the function can then define their version of the function and assign this to the variable if they want  and the rest do nothing  I can test for a null function before I execute it in the shared code   From people s comments above  I gather it may be possible to redefine a static function too  but I think the variable solution is nice and clear

User · Answer

First I want to correct Greg  function abc     is scoped too  mdash  the name abc is defined in the scope where this definition is encountered  Example   function xyz      function abc           abc is defined here            but not here   Secondly  it is possible to combine both styles   var xyz   function abc        xyz is going to be defined as usual  abc is undefined in all browsers but Internet nbsp Explorer  mdash  do not rely on it being defined  But it will be defined inside its body   var xyz   function abc         xyz is visible here      abc is visible here      xyz is visible here    abc is undefined here   If you want to alias functions on all browsers  use this kind of declaration   function abc      var xyz   abc    In this case  both xyz and abc are aliases of the same object   console log xyz     abc      prints  true    One compelling reason to use the combined style is the  name  attribute of function objects  not supported by Internet nbsp Explorer   Basically when you define a function like  function abc      console log abc name      prints  abc    its name is automatically assigned  But when you define it like  var abc   function      console log abc name      prints      its name is empty  mdash  we created an anonymous function and assigned it to some variable   Another good reason to use the combined style is to use a short internal name to refer to itself  while providing a long non-conflicting name for external users      Assume really long external scoped is    really long external scoped name   function shortcut n        Let it call itself recursively    shortcut n - 1                 Let it pass itself as a callback    someFunction shortcut                In the example above we can do the same with an external name  but it ll be too unwieldy  and slower     Another way to refer to itself is to use arguments callee  which is still relatively long  and not supported in the strict mode    Deep down  JavaScript treats both statements differently  This is a function declaration   function abc       abc here is defined everywhere in the current scope      We can call it here abc       Works     Yet  it is defined down there  function abc         We can call it again abc       Works   Also  it hoisted through a return statement      We can call it here abc       Works return  function abc       This is a function expression   var xyz   function        xyz here is defined from the point of assignment      We can t call it here xyz       UNDEFINED        Now it is defined xyz   function         We can call it here xyz       works   Function declaration vs  function expression is the real reason why there is a difference demonstrated by Greg   Fun fact   var xyz   function abc      console log xyz name      Prints  abc    Personally  I prefer the  function expression  declaration because this way I can control the visibility  When I define the function like  var abc   function        I know that I defined the function locally  When I define the function like  abc   function        I know that I defined it globally providing that I didn t define abc anywhere in the chain of scopes  This style of definition is resilient even when used inside eval    While the definition  function abc        depends on the context and may leave you guessing where it is actually defined  especially in the case of eval    mdash  the answer is  It depends on the browser

User · Answer

Other commenters have already covered the semantic difference of the two variants above  I wanted to note a stylistic difference  Only the  assignment  variation can set a property of another object   I often build JavaScript modules with a pattern like this    function        var exports            function privateUtil                                exports publicUtil   function                                 return exports          With this pattern  your public functions will all use assignment  while your private functions use declaration    Note also that assignment should require a semicolon after the statement  while declaration prohibits it

User · Answer

The var functionOne   function      defines at run-time and the function functionTwo      defines at parse-time      Run-Time function declaration  functionOne       Calling functionOne function here will give an Error var functionOne   function           Some code        Parse-Time function declaration  functionTwo       Calling functionTwo function will not give an Error function functionTwo          Some code        The explanation between Run-time vs Parse-time javascript run-time vs parse-time

User · Answer

First I want to correct Greg  function abc     is scoped too  mdash  the name abc is defined in the scope where this definition is encountered  Example   function xyz      function abc           abc is defined here            but not here   Secondly  it is possible to combine both styles   var xyz   function abc        xyz is going to be defined as usual  abc is undefined in all browsers but Internet nbsp Explorer  mdash  do not rely on it being defined  But it will be defined inside its body   var xyz   function abc         xyz is visible here      abc is visible here      xyz is visible here    abc is undefined here   If you want to alias functions on all browsers  use this kind of declaration   function abc      var xyz   abc    In this case  both xyz and abc are aliases of the same object   console log xyz     abc      prints  true    One compelling reason to use the combined style is the  name  attribute of function objects  not supported by Internet nbsp Explorer   Basically when you define a function like  function abc      console log abc name      prints  abc    its name is automatically assigned  But when you define it like  var abc   function      console log abc name      prints      its name is empty  mdash  we created an anonymous function and assigned it to some variable   Another good reason to use the combined style is to use a short internal name to refer to itself  while providing a long non-conflicting name for external users      Assume really long external scoped is    really long external scoped name   function shortcut n        Let it call itself recursively    shortcut n - 1                 Let it pass itself as a callback    someFunction shortcut                In the example above we can do the same with an external name  but it ll be too unwieldy  and slower     Another way to refer to itself is to use arguments callee  which is still relatively long  and not supported in the strict mode    Deep down  JavaScript treats both statements differently  This is a function declaration   function abc       abc here is defined everywhere in the current scope      We can call it here abc       Works     Yet  it is defined down there  function abc         We can call it again abc       Works   Also  it hoisted through a return statement      We can call it here abc       Works return  function abc       This is a function expression   var xyz   function        xyz here is defined from the point of assignment      We can t call it here xyz       UNDEFINED        Now it is defined xyz   function         We can call it here xyz       works   Function declaration vs  function expression is the real reason why there is a difference demonstrated by Greg   Fun fact   var xyz   function abc      console log xyz name      Prints  abc    Personally  I prefer the  function expression  declaration because this way I can control the visibility  When I define the function like  var abc   function        I know that I defined the function locally  When I define the function like  abc   function        I know that I defined it globally providing that I didn t define abc anywhere in the chain of scopes  This style of definition is resilient even when used inside eval    While the definition  function abc        depends on the context and may leave you guessing where it is actually defined  especially in the case of eval    mdash  the answer is  It depends on the browser

User · Answer

The first one is an Anonymous Function Expression  var functionOne   function          some code     While the second one is a Function Declaration  function functionTwo           some code    The main clear difference between both is the function name since Anonymous Functions have no name to call  Named Functions Vs  Anonymous Functions The anonymous function is quick and easy to type  and many libraries and tools tend to encourage this idiomatic style of code  However  anonymous functions have some drawbacks   Readability  anonymous functions omit a name which could cause less readable code   Debugging  anonymous functions have no name in stack traces  which can make debugging more difficult   Self-Reference  what if the function needs to refer to itself  for recursion for example    Naming Function Expression  Providing a name for your function expression quite effectively addresses all these drawbacks  and has no tangible downsides  The best practice is to always name your function expressions  setTimeout function timeHandler         lt -- look  a name here    console log  quot I ve waited 1 second quot       1000    Naming IIFEs  Immediate Invoked Function Expression    function IIFE str        lt -- look  always name IIFEs    console log str       quot Hello  quot      Hello      For functions assigned to a variable  naming the function  in this case  is not very common and may cause confusion  in this case  the arrow function may be a better choice

User · Answer

I m adding my own answer just because everyone else has covered the hoisting part thoroughly   I ve wondered about which way is better for a long while now  and thanks to http   jsperf com now I know       Function declarations are faster  and that s what really matters in web dev right

User · Answer

EugeneLazutkin gives an example where he names an assigned function to be able to use shortcut   as an internal reference to itself  John Resig gives another example - copying a recursive function assigned to another object in his Learning Advanced Javascript tutorial  While assigning functions to properties isn t strictly the question here  I recommend actively trying the tutorial out - run the code by clicking the button in the upper right corner  and double click the code to edit to your liking   Examples from the tutorial  recursive calls in yell     Tests fail when the original ninja object is removed   page 13   var ninja        yell  function n        return n  gt  0   ninja yell n-1     a     hiy             assert  ninja yell 4      hiyaaaa    A single object isn t too bad  either        var samurai     yell  ninja yell     var ninja   null    try      samurai yell 4      catch e      assert  false   Uh  this isn t good  Where d ninja yell go           If you name the function that will be called recursively  the tests will pass   page 14   var ninja        yell  function yell n        return n  gt  0   yell n-1     a     hiy             assert  ninja yell 4      hiyaaaa    Works as we would expect it to        var samurai     yell  ninja yell     var ninja        assert  samurai yell 4      hiyaaaa    The method correctly calls itself

User · Answer

A better explanation to Greg s answer functionTwo    function functionTwo        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  -- gt                                       like            functionOne   function                                    ---------------          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  -- gt                                   like            functionTwo                                ---------------

User · Answer

The var functionOne   function      defines at run-time and the function functionTwo      defines at parse-time      Run-Time function declaration  functionOne       Calling functionOne function here will give an Error var functionOne   function           Some code        Parse-Time function declaration  functionTwo       Calling functionTwo function will not give an Error function functionTwo          Some code        The explanation between Run-time vs Parse-time javascript run-time vs parse-time

User · Answer

A better explanation to Greg s answer functionTwo    function functionTwo        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  -- gt                                       like            functionOne   function                                    ---------------          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  -- gt                                   like            functionTwo                                ---------------

User · Answer

Availability  scope  of the function  The following works because function add   is scoped to the nearest block   x000D   x000D  try     console log  Success     add 1  1      catch e      console log  ERROR      e      function add a  b     return a   b    x000D   x000D   x000D   The following does not work because the variable is called before a function value is assigned to the variable add   x000D   x000D  try     console log  Success     add 1  1      catch e      console log  ERROR      e      var add function a  b     return a   b    x000D   x000D   x000D   The above code is identical in functionality to the code below  Note that explicitly assigning add   undefined is superfluous because simply doing var add  is the exact same as var add undefined   x000D   x000D  var add   undefined   try     console log  Success     add 1  1      catch e      console log  ERROR      e      add   function a  b     return a   b    x000D   x000D   x000D   The following does not work because var add  begins an expression and causes the following function add   to be an expression instead of a block  Named functions are only visible to themselves and their surrounding block  As function add   is an expression here  it has no surrounding block  so it is only visible to itself   x000D   x000D  try     console log  Success     add 1  1      catch e      console log  ERROR      e      var add function add a  b     return a   b    x000D   x000D   x000D     function  name  The name of a function function thefuncname     is thefuncname when it is declared this way   x000D   x000D  function foobar a  b     console log foobar name   x000D   x000D   x000D    x000D   x000D  var a   function foobar       console log a name   x000D   x000D   x000D   Otherwise  if a function is declared as function      the function name is the first variable used to store the function   x000D   x000D  var a   function      var b    function    return function          console log a name   console log b name   x000D   x000D   x000D   If there are no variables set to the function  then the functions name is the empty string   quot  quot     x000D   x000D  console log  function      name          x000D   x000D   x000D   Lastly  while the variable the function is assigned to initially sets the name  successive variables set to the function do not change the name   x000D   x000D  var a   function      var b   a  var c   b   console log a name   console log b name   console log c name   x000D   x000D   x000D    Performance  In Google s V8 and Firefox s Spidermonkey there might be a few microsecond JIST compilation difference  but ultimately the result is the exact same  To prove this  let s examine the efficiency of JSPerf at microbenchmarks by comparing the speed of two blank code snippets  The JSPerf tests are found here  And  the jsben ch testsare  found here  As you can see  there is a noticable difference when there should be none  If you are really a performance freak like me  then it might be more worth your while trying to reduce the number of variables and functions in the scope and especially eliminating polymorphism  such as using the same variable to store two different types    Variable Mutability  When you use the var keyword to declare a variable  you can then reassign a different value to the variable like so   x000D   x000D   function         use strict       var foobar   function         initial value     try           foobar    Hello World       new value         console log   no error           catch error            console log  ERROR      error message             console log foobar  window foobar         x000D   x000D   x000D   However  when we use the const-statement  the variable reference becomes immutable  This means that we cannot assign a new value to the variable  Please note  however  that this does not make the contents of the variable immutable  if you do const arr       then you can still do arr 10     quot example quot   Only doing something like arr    quot new value quot  or arr      would throw an error as seen below   x000D   x000D   function         use strict       const foobar   function         initial value     try           foobar    Hello World       new value         console log   no error           catch error            console log  ERROR      error message             console log foobar  window foobar         x000D   x000D   x000D   Interestingly  if we declare the variable as function funcName      then the immutability of the variable is the same as declaring it with var   x000D   x000D   function         use strict       function foobar         initial value     try           foobar    Hello World       new value         console log   no error           catch error            console log  ERROR      error message             console log foobar  window foobar         x000D   x000D   x000D       quot   quot  The  quot nearest block quot  is the nearest  quot function  quot   including asynchronous functions  generator functions  and asynchronous generator functions   However  interestingly  a function functionName      behaves like a var functionName   function      when in a non-closure block to items outside said closure  Observe   Normal var add function       x000D   x000D  try        typeof will simply return  undefined  if the variable does not exist   if  typeof add      undefined         add 1  1      just to prove it     console log  Not a block       else if add   undefined      this throws an exception if add doesn t exist     console log  Behaves like var add function a b  return a b           catch e      console log  Is a block      var add function a  b  return a   b  x000D   x000D   x000D    Normal function add       x000D   x000D  try        typeof will simply return  undefined  if the variable does not exist   if  typeof add      undefined         add 1  1      just to prove it     console log  Not a block       else if add   undefined      this throws an exception if add doesn t exist     console log  Behaves like var add function a b  return a b          catch e      console log  Is a block      function add a  b     return a   b    x000D   x000D   x000D    Function   x000D   x000D  try        typeof will simply return  undefined  if the variable does not exist   if  typeof add      undefined         add 1  1      just to prove it     console log  Not a block       else if add   undefined      this throws an exception if add doesn t exist     console log  Behaves like var add function a b  return a b          catch e      console log  Is a block       function          function add a  b         return a   b              x000D   x000D   x000D    Statement  such as if  else  for  while  try catch finally  switch  do while  with    x000D   x000D  try        typeof will simply return  undefined  if the variable does not exist   if  typeof add      undefined         add 1  1      just to prove it     console log  Not a block       else if add   undefined      this throws an exception if add doesn t exist     console log  Behaves like var add function a b  return a b          catch e      console log  Is a block            function add a  b         return a   b          x000D   x000D   x000D    Arrow Function with var add function     x000D   x000D  try        typeof will simply return  undefined  if the variable does not exist   if  typeof add      undefined         add 1  1      just to prove it     console log  Not a block       else if add   undefined      this throws an exception if add doesn t exist     console log  Behaves like var add function a b  return a b          catch e      console log  Is a block            gt        var add function a  b         return a   b              x000D   x000D   x000D    Arrow Function With function add     x000D   x000D  try        typeof will simply return  undefined  if the variable does not exist   if  typeof add      undefined         add 1  1      just to prove it     console log  Not a block       else if add   undefined      this throws an exception if add doesn t exist     console log  Behaves like var add function a b  return a b          catch e      console log  Is a block            gt        function add a  b         return a   b              x000D   x000D   x000D

User · Answer

The first one  function doSomething x   should be part of an object notation   The second one  var doSomething   function x   alert x     is simply creating an anonymous function and assigning it to a variable  doSomething  So doSomething   will call the function   You may want to know what a function declaration and function expression is   A function declaration defines a named function variable without requiring variable assignment  Function declarations occur as standalone constructs and cannot be nested within non-function blocks   function foo         return 3         ECMA 5  13 0  defines the syntax as    function Identifier   FormalParameterListopt     FunctionBody     In above condition the function name is visible within its scope and the scope of its parent  otherwise it would be unreachable    And in a function expression  A function expression defines a function as a part of a larger expression syntax  typically a variable assignment    Functions defined via functions expressions can be named or anonymous  Function expressions should not start with    function         Anonymous function expression var a   function         return 3        Named function expression var a   function foo         return 3        Self-invoking function expression  function foo         alert  hello                ECMA 5  13 0  defines the syntax as    function Identifieropt   FormalParameterListopt     FunctionBody

User · Answer

In computer science terms  we talk about anonymous functions and named functions  I think the most important difference is that an anonymous function is not bound to an name  hence the name anonymous function  In JavaScript it is a first class object dynamically declared at runtime   For more information on anonymous functions and lambda calculus  Wikipedia is a good start  http   en wikipedia org wiki Anonymous function

User · Answer

First I want to correct Greg  function abc     is scoped too  mdash  the name abc is defined in the scope where this definition is encountered  Example   function xyz      function abc           abc is defined here            but not here   Secondly  it is possible to combine both styles   var xyz   function abc        xyz is going to be defined as usual  abc is undefined in all browsers but Internet nbsp Explorer  mdash  do not rely on it being defined  But it will be defined inside its body   var xyz   function abc         xyz is visible here      abc is visible here      xyz is visible here    abc is undefined here   If you want to alias functions on all browsers  use this kind of declaration   function abc      var xyz   abc    In this case  both xyz and abc are aliases of the same object   console log xyz     abc      prints  true    One compelling reason to use the combined style is the  name  attribute of function objects  not supported by Internet nbsp Explorer   Basically when you define a function like  function abc      console log abc name      prints  abc    its name is automatically assigned  But when you define it like  var abc   function      console log abc name      prints      its name is empty  mdash  we created an anonymous function and assigned it to some variable   Another good reason to use the combined style is to use a short internal name to refer to itself  while providing a long non-conflicting name for external users      Assume really long external scoped is    really long external scoped name   function shortcut n        Let it call itself recursively    shortcut n - 1                 Let it pass itself as a callback    someFunction shortcut                In the example above we can do the same with an external name  but it ll be too unwieldy  and slower     Another way to refer to itself is to use arguments callee  which is still relatively long  and not supported in the strict mode    Deep down  JavaScript treats both statements differently  This is a function declaration   function abc       abc here is defined everywhere in the current scope      We can call it here abc       Works     Yet  it is defined down there  function abc         We can call it again abc       Works   Also  it hoisted through a return statement      We can call it here abc       Works return  function abc       This is a function expression   var xyz   function        xyz here is defined from the point of assignment      We can t call it here xyz       UNDEFINED        Now it is defined xyz   function         We can call it here xyz       works   Function declaration vs  function expression is the real reason why there is a difference demonstrated by Greg   Fun fact   var xyz   function abc      console log xyz name      Prints  abc    Personally  I prefer the  function expression  declaration because this way I can control the visibility  When I define the function like  var abc   function        I know that I defined the function locally  When I define the function like  abc   function        I know that I defined it globally providing that I didn t define abc anywhere in the chain of scopes  This style of definition is resilient even when used inside eval    While the definition  function abc        depends on the context and may leave you guessing where it is actually defined  especially in the case of eval    mdash  the answer is  It depends on the browser

User · Answer

The first example is a function declaration   function abc       The second example is a function expression   var abc   function         The main difference is how they are hoisted  lifted and declared   In the first example  the whole function declaration is hoisted  In the second example only the var  abc  is hoisted  its value  the function  will be undefined  and the function itself remains at the position that it is declared   To put it simply     this will work abc param   function abc        this would fail abc param   var abc   function        To study more about this topic I strongly recommend you this link

User · Answer

new Function   can be used to pass the function s body in a string  And hence this can be used to create dynamic functions  Also passing the script without executing the script   var func   new Function  x    y    return x y     function secondFunction       var result     result   func 10 20      console log   result       secondFunction

User · Answer

The first one is an Anonymous Function Expression  var functionOne   function          some code     While the second one is a Function Declaration  function functionTwo           some code    The main clear difference between both is the function name since Anonymous Functions have no name to call  Named Functions Vs  Anonymous Functions The anonymous function is quick and easy to type  and many libraries and tools tend to encourage this idiomatic style of code  However  anonymous functions have some drawbacks   Readability  anonymous functions omit a name which could cause less readable code   Debugging  anonymous functions have no name in stack traces  which can make debugging more difficult   Self-Reference  what if the function needs to refer to itself  for recursion for example    Naming Function Expression  Providing a name for your function expression quite effectively addresses all these drawbacks  and has no tangible downsides  The best practice is to always name your function expressions  setTimeout function timeHandler         lt -- look  a name here    console log  quot I ve waited 1 second quot       1000    Naming IIFEs  Immediate Invoked Function Expression    function IIFE str        lt -- look  always name IIFEs    console log str       quot Hello  quot      Hello      For functions assigned to a variable  naming the function  in this case  is not very common and may cause confusion  in this case  the arrow function may be a better choice

User · Answer

You can t use the  bind   method on function declarations  but you can on function expressions  Function declaration   x000D   x000D  function x       console log this    bind  string    x   x000D   x000D   x000D   Function expression   x000D   x000D  var x   function       console log this    bind  string    x   x000D   x000D   x000D

User · Answer

About performance   New versions of V8 introduced several under-the-hood optimizations and so did SpiderMonkey   There is almost no difference now between expression and declaration  Function expression appears to be faster now   Chrome 62 0 3202   FireFox 55   Chrome Canary 63 0 3225        Anonymous function expressions appear to have better performance   against Named function expression      Firefox  Chrome Canary  Chrome

User · Answer

Hoisting is the JavaScript interpreter   s action of moving all variable and function declarations to the top of the current scope    However  only the actual declarations are hoisted  by leaving assignments where they are    variable s Function s declared inside the page are global can access anywhere in that page  variable s Functions declared inside the function are having local scope  means they are available accessed inside the function body  scope   they are not available outside the function body    Variable  Javascript is called loosely typed language  Which means Javascript variables can hold value of any Data-Type  Javascript automatically takes care of changing the variable-type based on the value literal provided during runtime   global Page   10                                                var global Page          undefined        Integer literal  Number Type    -------------------       global Page   10         Number          global Page    Yash                       Interpreted           global Page    Yash      String        String literal  String Type              AS                 global Page   true       Boolean  var global Page   true                                          global Page   function                 function        Boolean Type                    -------------------                 var local functionblock      undefined global Page   function                                                    local functionblock   777    Number     var local functionblock   777                                           Assigning function as a data           Function  function Identifier opt   FormalParameterList opt            FunctionBody   sequence of statements           return   Default undefined          return  some data        functions declared inside the page are hoisted to top of the page having global access  functions declared inside the function-block are hoisted to top of the block  Default return value of function is  undefined   Variable declaration default value also  undefined   Scope with respect to function-block global   Scope with respect to page undefined   not available     Function Declaration  function globalAccess                                      function globalAccess                                              -------------------       globalAccess                                               function globalAccess        Re-Defined   overridden  localAccess                             Hoisted  As              function localAccess     function globalAccess                                                 localAccess                   -------------------         localAccess       function accessed with in globalAccess   only       function localAccess                                                                                               globalAccess                                                               localAccess       ReferenceError as the function is not defined   Function Expression          10                     literal         10                     Expression                 10  toString   - gt   10  var a                            a   10                     Expression var              a toString    - gt   10   function invoke               Expression Function  console log  Self Invoking                          function                                                                              - gt   Self Invoking   var f       f   function               Expression var Function     console log  var Function                                      f     - gt   var Function           Function assigned to variable Example    function selfExecuting        console log  IIFE - Immediately-Invoked Function Expression           var anonymous   function         console log  anonymous function Expression        var namedExpression   function for InternalUSE fact       if fact     1           return 1             var localExpression   function            console log  Local to the parent Function Scope               globalExpression   function             console log  creates a new global variable  then assigned this function                   return    undefined      return fact   for InternalUSE  fact - 1          namedExpression    globalExpression      javascript interpreted as  var anonymous  var namedExpression  var globalExpression   anonymous   function         console log  anonymous function Expression        namedExpression   function for InternalUSE fact       var localExpression       if fact     1           return 1            localExpression   function            console log  Local to the parent Function Scope               globalExpression   function             console log  creates a new global variable  then assigned this function                 return fact   for InternalUSE  fact - 1         DEFAULT UNDEFINED      namedExpression 10   globalExpression      You can check function declaration  expression test over different browser s using jsperf Test Runner    ES5 Constructor Function Classes  Function objects created using Function prototype bind  JavaScript treats functions as first-class objects  so being an object  you can assign properties to a function   function Shape id       Function Declaration     this id   id            Adding a prototyped method to a function      Shape prototype getID   function              return this id             Shape prototype setID   function   id             this id   id          var expFn   Shape     Function Expression  var funObj   new Shape        Function Object funObj hasOwnProperty  prototype       false funObj setID  10    console log  funObj getID         10     ES6 introduced Arrow function  An arrow function expression has a shorter syntax  they are best suited for non-method functions  and they cannot be used as constructors      ArrowFunction   ArrowParameters   gt  ConciseBody   const fn    item    gt    return item  amp  1    Odd     Even      console log  fn 2        Even console log  fn 3        Odd

User · Answer

One important point to note is  -  let there are two functions  -  sum 1 2    const sum   function first  second      return first   second      In above case  it will give error that sum is not defined  but  sum 1 2    function sum first  second      return first   second      This function will not any error as Hoisting will take place in this case

User · Answer

I m listing out the differences below    A function declaration can be placed anywhere in the code  Even if it is invoked before the definition appears in code  it gets executed as function declaration is committed to memory or in a way it is hoisted up  before any other code in the page starts execution   Take a look at the function below   function outerFunction         function foo            return 1            return foo        function foo            return 2          alert outerFunction        Displays 2   This is because  during execution  it looks like -  function foo         The first function declaration is moved to top     return 1    function foo         The second function declaration is moved to top     return 2    function outerFunction         return foo      alert outerFunction       So executing from top to bottom                            the last foo   returns 2 which gets displayed   A function expression  if not defined before calling it  will result in an error  Also  here the function definition itself is not moved to the top or committed to memory like in the function declarations  But the variable to which we assign the function gets hoisted up and undefined gets assigned to it   Same function using function expressions   function outerFunction         var foo   function            return 1            return foo        var foo   function            return 2          alert outerFunction        Displays 1   This is because during execution  it looks like   function outerFunction        var foo   undefined     var foo   undefined      foo   function           return 1           return foo        foo   function          This function expression is not reachable       return 2          alert outerFunction        Displays 1  It is not safe to write function declarations in non-function blocks like if because they won t be accessible   if  test        function x     doSomething         Named function expression like the one below  may not work in Internet nbsp Explorer browsers prior to version 9   var today   function today    return new Date

User · Answer

The first one  function doSomething x   should be part of an object notation   The second one  var doSomething   function x   alert x     is simply creating an anonymous function and assigning it to a variable  doSomething  So doSomething   will call the function   You may want to know what a function declaration and function expression is   A function declaration defines a named function variable without requiring variable assignment  Function declarations occur as standalone constructs and cannot be nested within non-function blocks   function foo         return 3         ECMA 5  13 0  defines the syntax as    function Identifier   FormalParameterListopt     FunctionBody     In above condition the function name is visible within its scope and the scope of its parent  otherwise it would be unreachable    And in a function expression  A function expression defines a function as a part of a larger expression syntax  typically a variable assignment    Functions defined via functions expressions can be named or anonymous  Function expressions should not start with    function         Anonymous function expression var a   function         return 3        Named function expression var a   function foo         return 3        Self-invoking function expression  function foo         alert  hello                ECMA 5  13 0  defines the syntax as    function Identifieropt   FormalParameterListopt     FunctionBody

User · Answer

Here s the rundown on the standard forms that create functions   Originally written for another question  but adapted after being moved into the canonical question    Terms    ES5  ECMAScript 5th edition  2009 ES2015  ECMAScript 2015  also known as  ES6     The quick list    Function Declaration  Anonymous  function Expression  which despite the term  sometimes create functions with names  Named function Expression Accessor Function Initializer  ES5   Arrow Function Expression  ES2015    which  like anonymous function expressions  don t involve an explicit name  and yet can create functions with names  Method Declaration in Object Initializer  ES2015   Constructor and Method Declarations in class  ES2015     Function Declaration  The first form is a function declaration  which looks like this   function x         console log  x        A function declaration is a declaration  it s not a statement or expression  As such  you don t follow it with a    although doing so is harmless    A function declaration is processed when execution enters the context in which it appears  before any step-by-step code is executed  The function it creates is given a proper name  x in the example above   and that name is put in the scope in which the declaration appears   Because it s processed before any step-by-step code in the same context  you can do things like this   x       Works even though it s above the declaration function x         console log  x        Until ES2015  the spec didn t cover what a JavaScript engine should do if you put a function declaration inside a control structure like try  if  switch  while  etc   like this   if  someCondition        function foo            lt       HERE THERE                             lt       BE DRAGONS     And since they re processed before step-by-step code is run  it s tricky to know what to do when they re in a control structure   Although doing this wasn t specified until ES2015  it was an allowable extension to support function declarations in blocks  Unfortunately  and inevitably   different engines did different things   As of ES2015  the specification says what to do  In fact  it gives three separate things to do    If in loose mode not on a web browser  the JavaScript engine is supposed to do one thing If in loose mode on a web browser  the JavaScript engine is supposed to do something else If in strict mode  browser or not   the JavaScript engine is supposed to do yet another thing   The rules for the loose modes are tricky  but in strict mode  function declarations in blocks are easy  They re local to the block  they have block scope  which is also new in ES2015   and they re hoisted to the top of the block  So    use strict   if  someCondition        foo                     Works just fine     function foo             console log typeof foo       undefined    foo  is not in scope here                             because it s not in the same block     Anonymous  function Expression  The second common form is called an anonymous function expression   var y   function          console log  y         Like all expressions  it s evaluated when it s reached in the step-by-step execution of the code   In ES5  the function this creates has no name  it s anonymous   In ES2015  the function is assigned a name if possible by inferring it from context  In the example above  the name would be y  Something similar is done when the function is the value of a property initializer   For details on when this happens and the rules  search for SetFunctionName in the the specification nbsp  mdash  it appears all over the place    Named function Expression  The third form is a named function expression   NFE     var z   function w         console log  zw        The function this creates has a proper name  w in this case   Like all expressions  this is evaluated when it s reached in the step-by-step execution of the code  The name of the function is not added to the scope in which the expression appears  the name is in scope within the function itself   var z   function w         console log typeof w       function     console log typeof w           undefined    Note that NFEs have frequently been a source of bugs for JavaScript implementations  IE8 and earlier  for instance  handle NFEs completely incorrectly  creating two different functions at two different times  Early versions of Safari had issues as well  The good news is that current versions of browsers  IE9 and up  current Safari  don t have those issues any more   But as of this writing  sadly  IE8 remains in widespread use  and so using NFEs with code for the web in general is still problematic    Accessor Function Initializer  ES5    Sometimes functions can sneak in largely unnoticed  that s the case with accessor functions  Here s an example   var obj         value  0      get f             return this value             set f v            this value   v           console log obj f              0 console log typeof obj f        number    Note that when I used the function  I didn t use     That s because it s an accessor function for a property  We get and set the property in the normal way  but behind the scenes  the function is called   You can also create accessor functions with Object defineProperty  Object defineProperties  and the lesser-known second argument to Object create   Arrow Function Expression  ES2015    ES2015 brings us the arrow function  Here s one example   var a    1  2  3   var b   a map n   gt  n   2   console log b join            2  4  6   See that n   gt  n   2 thing hiding in the map   call  That s a function   A couple of things about arrow functions    They don t have their own this  Instead  they close over the this of the context where they re defined   They also close over arguments and  where relevant  super   This means that the this within them is the same as the this where they re created  and cannot be changed  As you ll have noticed with the above  you don t use the keyword function  instead  you use   gt     The n   gt  n   2 example above is one form of them  If you have multiple arguments to pass the function  you use parens   var a    1  2  3   var b   a map  n  i    gt  n   i   console log b join            0  2  6    Remember that Array map passes the entry as the first argument  and the index as the second    In both cases  the body of the function is just an expression  the function s return value will automatically be the result of that expression  you don t use an explicit return    If you re doing more than just a single expression  use    and an explicit return  if you need to return a value   as normal   var a        first   Joe   last   Bloggs       first   Albert   last   Bloggs       first   Mary   last   Albright      a   a sort  a  b    gt      var rv   a last localeCompare b last     if  rv     0        rv   a first localeCompare b first         return rv      console log JSON stringify a      The version without         is called an arrow function with an expression body or concise body   Also  A concise arrow function   The one with         defining the body is an arrow function with a function body   Also  A verbose arrow function    Method Declaration in Object Initializer  ES2015    ES2015 allows a shorter form of declaring a property that references a function called a method definition  it looks like this   var o         foo                the almost-equivalent in ES5 and earlier would be   var o         foo  function foo                the difference  other than verbosity  is that a method can use super  but a function cannot  So for instance  if you had an object that defined  say  valueOf using method syntax  it could use super valueOf   to get the value Object prototype valueOf would have returned  before presumably doing something else with it   whereas the ES5 version would have to do Object prototype valueOf call this  instead   That also means that the method has a reference to the object it was defined on  so if that object is temporary  for instance  you re passing it into Object assign as one of the source objects   method syntax could mean that the object is retained in memory when otherwise it could have been garbage collected  if the JavaScript engine doesn t detect that situation and handle it if none of the methods uses super    Constructor and Method Declarations in class  ES2015    ES2015 brings us class syntax  including declared constructors and methods   class Person       constructor firstName  lastName            this firstName   firstName          this lastName   lastName             getFullName             return this firstName         this lastName            There are two function declarations above  One for the constructor  which gets the name Person  and one for getFullName  which is a function assigned to Person prototype

User · Answer

In terms of code maintenance cost  named functions are more preferable    Independent from the place where they are declared  but still limited by scope   More resistant to mistakes like conditional initialization  you are still able to override if wanted to   The code becomes more readable by allocating local functions separately of scope functionality  Usually in the scope the functionality goes first  followed by declarations of local functions  In a debugger you will clearly see the function name on the call stack instead of an  anonymous evaluated  function    I suspect more PROS for named functions are follow  And what is listed as an advantage of named functions is a disadvantage for anonymous ones   Historically  anonymous functions appeared from the inability of JavaScript as a language to list members with named functions         member function        How do I make  this member  a named function

User · Answer

Speaking about the global context  both  the var statement and a FunctionDeclaration at the end will create a non-deleteable property on the global object  but the value of both can be overwritten   The subtle difference between the two ways is that when the Variable Instantiation process runs  before the actual code execution  all identifiers declared with var will be initialized with undefined  and the ones used by the FunctionDeclaration s will be available since that moment  for example    alert typeof foo       function   it s already available  alert typeof bar       undefined   function foo        var bar   function         alert typeof bar       function    The assignment of the bar FunctionExpression takes place until runtime   A global property created by a FunctionDeclaration can be overwritten without any problems just like a variable value  e g     function test        test   null    Another obvious difference between your two examples is that the first function doesn t have a name  but the second has it  which can be really useful when debugging  i e  inspecting a call stack    About your edited first example  foo   function     alert  hello          it is an undeclared assignment  I would highly encourage you to always use the var keyword   With an assignment  without the var statement  if the referenced identifier is not found in the scope chain  it will become a deleteable property of the global object   Also  undeclared assignments throw a ReferenceError on ECMAScript 5 under Strict Mode   A must read    Named function expressions demystified   Note  This answer has been merged from another question  in which the major doubt and misconception from the OP was that identifiers declared with a FunctionDeclaration  couldn t be overwritten which is not the case

User · Answer

The two code snippets you ve posted there will  for almost all purposes  behave the same way   However  the difference in behaviour is that with the first variant  var functionOne   function        that function can only be called after that point in the code   With the second variant  function functionTwo     the function is available to code that runs above where the function is declared   This is because with the first variant  the function is assigned to the variable foo at run time  In the second  the function is assigned to that identifier  foo  at parse time   More technical information  JavaScript has three ways of defining functions    Your first snippet shows a function expression  This involves using the  function  operator to create a function - the result of that operator can be stored in any variable or object property  The function expression is powerful that way  The function expression is often called an  anonymous function   because it does not have to have a name  Your second example is a function declaration  This uses the  function  statement to create a function  The function is made available at parse time and can be called anywhere in that scope  You can still store it in a variable or object property later  The third way of defining a function is the  Function    constructor  which is not shown in your original post  It s not recommended to use this as it works the same way as eval    which has its problems

[javascript] var functionName = function() {} vs function functionName() {}

Examples related to javascript

Examples related to function

Examples related to syntax

Examples related to idioms