JavaScript Function Definition


JavaScript uses the keyword function to define functions.

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


Function declaration

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

function functionName(parameters) {
  Code executed
}

The function will not be executed immediately after declaration, it will be called when we need it.

Example

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

 Try It! 

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

Function expression

JavaScript functions can be defined by an expression.

Function expressions can be stored in variables:

Example

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

 Try It! 

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

Example

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

 Try It! 

Above function is actually a anonymous function (function without a name).

Functions are stored in variables and do not need function names. They are usually called by variable names.

NoteThe above function ends with a semicolon because it is an execution statement.

Function() Constructor

In the above example, we learned that the function is defined by the keyword function .

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

Example

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

var x = myFunction(4, 3);

 Try It! 

In fact, you don't have 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);

 Try It! 


NoteIn JavaScript, many times, you need to avoid using the new keyword.

Function promotion (Hoisting)

We have learned about "hoisting" in the previous tutorials.

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

Hoisting is applied to the declaration of variables and functions.

Therefore, the function can be called before the declaration:

myFunction(5);

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

It cannot be promoted when using an expression to define a function.


Self-calling function

Function expressions can be "self-invoked".

The self-invoking expression is automatically invoked.

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

The declared function cannot be called by itself.

Add parentheses to show that it is a function expression:

Example

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

 Try It! 

Function is actually a more anonymous calls itself the function (no function name).


Function can be used as a value

The JavaScript function is used as a value:

Example

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

var x = myFunction(4, 3);

 Try It! 

JavaScript functions can be used as expressions:

Example

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

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

 Try It! 


Functions are objects

Using the typeof operator in JavaScript to determine the function type will return "function".

But it is more accurate to describe a JavaScript function as an object.

JavaScript functions have attributes and methods .

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

Example

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

 Try It! 

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

Example

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

var txt = myFunction.toString();

 Try It! 

NoteFunction definitions are properties of objects, which are called object methods.
If a function is used to create a new object, it is called the object's constructor.

Arrow function

ES6 added arrow functions.

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

(Parameter 1, parameter 2, …, parameter N) => {function declaration}

(Parameter 1, parameter 2, …, parameter N) => expression (single)
// Equivalent to: (parameter 1, parameter 2, …, parameter N) => {return expression;}

When there is only one parameter, the parentheses are optional:

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

Functions without parameters should be written as a pair of parentheses:

() => {function declaration}  

Example

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

 Try It! 

Some arrow functions do not have their own this . Not suitable for defining an object's methods .

When we use an arrow function, the arrow function will help us bind the value of the outer this by default, so the value of this in the arrow function is the same as the this of the outer layer.

Arrow functions cannot be promoted, so they need to be defined before use.

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

If the function part is just a statement, you can omit the return keyword and braces {}, which is a better habit:

Example

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

Try It! 

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