JavaScript Function Definition

JavaScript uses the keyword function to define a function.

A function can be defined by a declaration or as an expression.

Function Declaration

In previous tutorials, you have learned about the syntax of function declarations:

function functionName(parameters) {
  code to be executed
}

Function declarations are not executed immediately; they are invoked when needed.

Example

function myFunction(a, b) {
    return a * b;
}

| | Semicolons are used to separate executable JavaScript statements. <br>Since a function declaration is not an executable statement, it does not end with a semicolon. | | --- | --- |

Function Expression

JavaScript functions can be defined using an expression.

A function expression can be stored in a variable:

Example

var x = function (a, b) { return a * b };

After a function expression is stored in a variable, the variable can be used as a function:

Example

var x = function (a, b) { return a * b };
var z = x(4, 3);

The above function is actually an anonymous function (a function without a name).

Functions stored in variables do not need function names; they are usually invoked through the variable name.

| | The above function ends with a semicolon because it is an executable statement. | | --- | --- |

Function() Constructor

In the above examples, we learned that functions are defined using the keyword function.

Functions can also be defined using the built-in JavaScript function constructor (Function()).

Example

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

In fact, you do not need to use the constructor. The above example can be written as:

Example

var myFunction = function (a, b) { return a * b };
var x = myFunction(4, 3);

| | In JavaScript, you often need to avoid using the new keyword. | | --- | --- |

Function Hoisting

In previous tutorials, we have learned about "hoisting".

Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope.

Hoisting applies to variable declarations and function declarations.

Therefore, functions can be called before they are declared:

myFunction(5);

function myFunction(y) {
    return y * y;
}

Functions defined by expressions cannot be hoisted.

Self-Invoking Function

Function expressions can be "self-invoking".

A self-invoking expression is invoked automatically without being called.

If an expression is followed by (), it will be auto-invoked.

Declared functions cannot be self-invoked.

To make a function expression self-invoking, you need to add parentheses around the function:

Example

(function () {
    var x = "Hello!!";      // I will invoke myself
})();

The above function is an anonymous self-invoking function (a function without a name).

Functions as Values

JavaScript functions can be used as values:

Example

function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3);

JavaScript functions can be used in expressions:

Example

function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3) * 2;

Functions as Objects

In JavaScript, using the typeof operator on functions will return "function".

However, JavaScript functions are more accurately described as objects.

JavaScript functions have properties and methods.

The arguments.length property returns the number of arguments received by the function:

Example

function myFunction(a, b) {
    return arguments.length;
}

The toString() method returns the function as a string:

Example

function myFunction(a, b) {
    return a * b;
}
var txt = myFunction.toString();

Arrow Functions

ES6 introduced arrow function expressions.

Arrow functions have a more concise syntax compared to regular function expressions.

(parameter1, parameter2, ..., parameterN) => { function declaration }

(parameter1, parameter2, ..., parameterN) => expression
// Equivalent to: (parameter1, parameter2, ..., parameterN) => { return expression; }

Parentheses are optional when there is only one parameter:

(singleParameter) => { function declaration }
singleParameter => { function declaration }

Functions with no parameters should be written with a pair of parentheses:

() => { function declaration }

Example

// ES5
var x = function(x, y) {
     return x * y;
}

// ES6
const x = (x, y) => x * y;

Arrow functions do not have their own this. They are not well-suited for defining object methods.

When using arrow functions, this retains the value of the enclosing lexical context's this.

Arrow functions are not hoisted and must be defined before they are used.

Using const is safer than using var because the function expression is always a constant value.

If the function body consists of a single statement, you can omit the return keyword and the curly braces {}, which is a good practice:

Example

const x = (x, y) => { return x * y };

Note: Arrow functions are not supported in IE11 and earlier versions.