Richard Garside Richard Garside - 4 months ago 23
Javascript Question

JavaScript function declaration syntax: var fn = function() {} vs function fn() {}

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 uses 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?

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:

  // TypeError: undefined is not a function
  functionOne();

  var functionOne = function() {
    console.log("Hello!");
  };

And, a function declaration:

  // Outputs: "Hello!"
  functionTwo();

  function functionTwo() {
    console.log("Hello!");
  }

This also means you can't conditionally define functions using function declarations:

  if (test) {
     // Error or misbehavior
     function functionThree() { doSomething(); }
  }

The above actually defines functionThree irrespective of test's value — unless use strict is in effect, in which case it simply raises an error.

Comments