JS: Define Function

By Xah Lee. Date: . Last updated: .

There are 3 ways to create a function.

  1. by declaration.
  2. by function expression.
  3. by constructor. (good for creating function at run-time.)

Define Function by Declaration

The most common and practical way is by function declaration.

function f() { return 3; }
console.log(
    f()
); // 3

function g(x) { return x; }
console.log(
    g(2)
); // 2

function h(x,y) { return x+y; }
console.log(
    h(3,4)
); // prints 2

〔►see JS: Function Parameters

Function Declaration Must be Top Level

Warning: named function form is declaration only if it is at top level of source code or inside a function body. It should not be used inside a “block”, such as if (…) { function f() {…} }.

To have a named function inside a statement block, use function expression and assign it to a variable, like this: if (x) { var f = function () {…} }.

// named function form is declaration only at top level of source code or inside a function body

// bad
if (3) {

    // by spec, this is a expression. f1 is not declared
    function f1() {return 4};

    // by spec, this is a expression. f2 is not declared
    var g = function f2() {return 4;};

    console.log(f1());                // works in some browser
    console.log(f2());                // ReferenceError
};
// example of function declaration inside a function

function ff() {
    function gg() { return 3; } // named function form inside a function body. good.
    return gg();
};

console.log(
    ff()
); // 3

In this example g=function f(){return 3;}, the function f is still a function expression, not a function declaration.

// function declaration only happens as top level of source code or top level of function body.
// when in elsewhere, its function expression

var g = function f() { return 3; };

g(); // returns 3

f(); // ReferenceError: f is not defined

The difference between function declaration and function expression assigned to a variable is subtle, but critical.

For detail, see: JS: Function Declaration vs Function Expression

Define Function by Expression

You can create a function without a name. You can assign a function to a variable.

// function expression, applied on the spot
console.log(
    (function () { return 3; })()
); // prints 3
// function expression with one parameter, applied on the spot
console.log(
    (function (x) { return x; })(4)
); // prints 4
// function expression, assigned to a variable
var g = function () { return 3; };
console.log(g()); // prints 3

It is possible, and also practical, to always use this form to define functions. If you do so, you must then move all your variable with function assignment to the top. 〔►see JS: Function Declaration vs Function Expression

Define Function by Constructor

JS: Function Constructor

Function Topic

  1. JS: Define Function
  2. JS: Function Parameters
  3. JS: var/function Order
  4. JS: var Name Scope
  5. JS: Function Declaration vs Function Expression
  6. JS: Closure
  7. JS: Functional Programing
  8. JS: Function Call, Apply, Bind
  9. JS: Function Argument Default Value
  10. JS: Function Rest Parameters
  11. JS: Arrow Function

  1. JS: Function Object
  2. JS: Function.prototype
Like what you read? Buy JavaScript in Depth