JavaScript: What's the Difference Between Function Declaration and Function Expression

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

function f () {};

and

var f = function () {};

Function Declaration → Hoisting Name ＆ 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:

// works
f(); // ⇒ 3
function f () {return 3;};

// TypeError: undefined is not a function
g();
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 2014-07-10 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() {
    // …
};