JavaScript Function Definition

elective course function course recommendation:JavaScript functions are defined bykeywords

to define.DeclarationYou can use functionsJavaScript functions can also use.

or function

function declarationDeclarationIn the tutorial earlier, you learned the syntax

function function:functionName(parameters
   ) {
}

Code to be executed

Example

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

Try It Yourself

Functions declared are not executed directly. They are 'saved for later use' and will be executed later when they are called.

The semicolon is used to separate executable JavaScript statements.DeclarationDue to functions

which are not executable statements and are not commonly terminated with a semicolon.

function expressionsJavaScript functions can also useExpression

to define.

Example

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

Try It Yourself

Function expressions can be stored in variables:

Example

After the function expression is stored in a variable, this variable can be used as a function:
var x = function(a, b) {return a * b};

Try It Yourself

The function above is actually avar z = x(4, 3);（anonymous functions）.

Anonymous functions

Functions stored in variables do not need a function name. They are always called using the variable name.

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

Function() constructor. function As you saw in the previous example, JavaScript functions are defined by the

Functions can also be defined by keywords. Function() of the built-in JavaScript Function constructor to define.

Example

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

Try It Yourself

You actually do not need to use the function constructor. The example can also be written like this:

Example

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

Try It Yourself

In most cases, you can avoid using new keywords.

function hoisting

You have already learned about 'hoisting' earlier in this tutorial.

Hoisting is the process by which JavaScriptDeclarationThe default behavior of moving to the top of the current scope.

Hoisting is applied to variable declarations and function declarations.

That's why JavaScript functions can be called before their declaration:

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

Functions defined by expressions are not hoisted.

Self-invoking function

Function expressions can be used as 'self-invoking'.

Self-invoking expressions are automatically called (started) without any explicit call.

Function expressions are automatically executed if there is ().

You cannot self-invoking a function declaration.

You need to add parentheses around the function to indicate that it is a function expression:

Example

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

Try It Yourself

The function above is actually aAnonymous self-invoking function（anonymous functions）.

Functions can be used as values

JavaScript functions can be used as values:

Example

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

Try It Yourself

JavaScript functions can be used in expressions:

Example

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

Try It Yourself

functions are objects

in JavaScript typeof operator returns "function".

However, it is best to describe JavaScript functions as objects.

are all available in JavaScript functionspropertiesandMethod.

arguments.length It will return the number of arguments received when the function is called:

Example

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

Try It Yourself

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

Example

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

Try It Yourself

Functions defined as object properties are called object methods.

Functions designed to create new objects are called object constructors (object constructors).

Arrow Functions

Arrow functions allow the use of a concise syntax to write function expressions.

You do not need the function keyword, return keyword, and curly braces.

Example

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

Try It Yourself

Arrow functions do not have their own this. They are not suitable for defining object methods.

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

Using const is safer than using var because function expressions are always constant values.

If the function is a single statement, then only the return keyword and curly braces can be omitted. Therefore, retaining them may be a good habit:

Example

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

Try It Yourself

IE11 or earlier versions do not support arrow functions.