WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript Function Definitions



JavaScript uses keywords function Defines a function.

A function can be defined by declaration or an expression.


Function Declarations

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

function functionName (parameters) { Executed code }

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

Example

function myFunction(a, b) { return a * b; }
Try it yourself »
Note: The semicolon is used to separate executable JavaScript statements. Because the function declaration is not an executable statement, it does not end with a semicolon.

Function Expressions

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 Yourself »

After a function expression is stored in a 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 Yourself »

The above function is actually a anonymous function (the function has no name).

Functions are stored in variables and do not require a function name. They are usually called by a variable name.


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

The Function() Constructor

In the example above, we learned that functions are 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 Yourself »

In fact, you don't have to use a constructor. The above example can be written as:

Example

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 the new keyword.

Function Hoisting

We already learned about "hoisting" in previous tutorials.

Hoisting is the behavior by which JavaScript advances the current scope to the front by default.

Hoisting applies to variable declarations and function declarations.

Thus, functions can be called before they are declared:

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

There is no promotion when defining functions using expressions.


Self-calling function

Function expressions can be "self-calling".

Self-invoking expressions are called automatically.

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

Declared functions cannot be called by themselves.

It is a function expression by adding parentheses:

Example

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

The above function is actually an anonymous self-calling function (no function name).


Functions Can Be Used as Values

JavaScript function is used as a value:

Example

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

JavaScript functions can be used as expressions:

Example

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

Functions are Objects

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

But JavaScript functions are more accurately described as an object.

JavaScript functions have attributes and Method .

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

Example

function myFunction(a, b) { return arguments.length; }
Try it Yourself »

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

Example

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

Note: Functions are defined as attributes of objects and are called object methods. If a function is used to create a new object, it is called the object's constructor.