JavaScript Function Definitions

JavaScript uses the keywordfunctionto define functions.

Functions can be defined by declarations, or can also be expressions.

Function Declarations

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

function functionName(parameters) {
  执行的代码
}

A function declaration is not executed immediately. It is called when we need it.

Examples

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

Try it Yourself »

Note Semicolons are used to separate executable JavaScript statements.
Since a function declaration is not an executable statement, it does not end with a semicolon.

Function Expressions

JavaScript functions can be defined by an expression.

A function expression can be stored in a variable:

Examples

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

Try it Yourself »

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

Examples

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

Try it Yourself »

The above function is actually ananonymous function(a function without a name).

Functions stored in variables do not need function names. They are usually called via the variable name.

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

The Function() Constructor

In the above examples, we learned that functions are defined by the keywordfunctiondefined.

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

Examples

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

var x = myFunction(4, 3);

Try it Yourself »

Actually, you don't have to use the constructor function. The above example can be written as:

Examples

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

var x = myFunction(4, 3);

Try it Yourself »

Note In JavaScript, many times, you need to avoid using thenewkeyword.

Function Hoisting

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

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

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 using expressions cannot be hoisted.

Self-Invoking Functions

Function expressions can be "self-invoking".

A self-invoking expression is automatically invoked.

If the expression is followed by (), it will be automatically invoked.

Declared functions cannot be self-invoked.

By adding parentheses, you indicate that it is a function expression:

Examples

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

Try it Yourself »

The above function is actually ananonymous self-invoking function(without a function name).

Functions Can Be Used as Values

JavaScript functions can be used as a value:

Examples

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

var x = myFunction(4, 3);

Try it Yourself »

JavaScript functions can be used as expressions:

Examples

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

var x = myFunction(4, 3) * 2;

Try it Yourself »

Functions are Objects

In JavaScript, using thetypeofoperator to check the function type will return "function".

But it is more accurate to describe JavaScript functions as objects.

JavaScript functions havepropertiesandand methods。

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

Examples

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

Try it Yourself »

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

Examples

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

var txt = myFunction.toString();

Try it Yourself »

Arrow Functions

ES6 introduced arrow functions.

The syntax of arrow function expressions is more concise than regular function expressions.

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

When there is only one parameter, parentheses are optional:

(single parameter) => { function declaration }
single parameter => { function declaration }

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

() => { function declaration }

Examples

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

Try it Yourself »

Some arrow functions do not have their ownthis.Not suitable for defining an。

object method.

When we use arrow functions, the arrow function automatically binds the value of the outer this for us, so in an arrow function, the value of this is the same as the outer this.

Usingconstthan usingvaris safer, because function expressions are always a constant.

If the function body is only a single statement, you can omit the return keyword and the braces {}, which is a good habit:

Examples

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

Try it Yourself »

Note:IE11 and earlier IE versions do not support arrow functions.

Other Extensions