JavaScript: Function Declaration vs Function Expression

By Xah Lee. Date: . Last updated: .

What's the difference between function declaration and function expression?

// function declaration
function f () {}

and

// function expression assigned to a variable
var f = function () {}

Function Declaration → Hoisting Name and Value

Function declaration will hoist the function name and definition to the top, but function expression assigned to variable will only hoist the name, not the definition.

Compare:

f(); // works. returns 3
function f () {return 3;}
g(); // TypeError: undefined is not a function
var g = function () {return 3;}

Function Declaration Must be Top Level

Named function form is declaration only if it is at top level of source code or top level of function body. When in elsewhere, its a named function expression.

// named function form is declaration only if it is at top level of source code or top level of function body.
// when in elsewhere, its a named function expression

var g = function f() { return 3; }; // no function declaration happens here. The f is treated as named function expression

g(); // returns 3

f(); // ReferenceError: f is not defined
// TypeError: undefined is not a function
h();
var h = function h () {return 3;};
// ReferenceError: bb is not defined
bb();
var aa = function bb () {return 3;};
// ReferenceError: bb is not defined
var aa = function bb () {return 3;};
bb();

The technical detail is fairly complicated. See: 〔Named function expressions demystified By Juriy “Kangax” Zaytsev. @ http://kangax.github.io/nfe/

Thanks to ЮрийТарабанько and Paul Oldridge.

Summary of What Should You Do?

Good: Use function declaration function name() { … } at top level of your source code or top level of function body as inner function.

// function in top level source code
function f() {
    // something
}
function f() {

    // code

    // function in top level inside function body
    function g() {
        // something
    }

    // code. call g somewhere here

}

Good: Use function expression var f = function () {…};, but any call must come after.

// this is good
var f = function () {
    // };

// code to call f here. Must come after f.

Bad: function “declaration” should not be used as expression or statement inside expression or statement.

// never do this. (some browser may support it)
if ( x ) {
    function f() { … }
}

Bad: Avoid named function expression:

// don't do this
var f = function g() {
    // };

// don't do this
var f = function f() {
    // };

Function topics:

  1. JavaScript: Functional Programing
  2. JavaScript: Function Optional Parameters
  3. JavaScript: Variable/Function Declaration Order, Name Hoisting
  4. JavaScript Variable Scope: Function Level vs Block Level
  5. JavaScript: Function Declaration vs Function Expression
  6. JavaScript: Closure
  7. JavaScript: f.call f.apply f.bind
  8. JavaScript Function Constructor
  9. JavaScript: Function Argument Default Value (ES2015)
  10. JavaScript: Function Rest Parameters (ES2015)
  11. JavaScript: Arrow Function (ES2015)
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.