JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Function Definitions

A function allows you to define a block of code, give it a name and then execute it as many times as you want.

A function can be defined using function keyword and can be executed using () operator.


Function Declarations

Earlier in this tutorial, you learned that functions are declared with the following syntax:

function nameOfFunction(parameters) {
    // statement(s) to be executed
}

Declared functions are not executed immediately. Declared function simply names the function and specifies what to do when the function is invoked.

Run code

In the above example, we have declared (defined) a function named greet that displays a message "Hello, World!". This function can be invoked using () operator e.g. greet().


Function Expressions

JavaScript allows us to assign a function to a variable and then use that variable as a function. It is called function expression.

Run code

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

Functions stored in variables do not need function names. They are always invoked (called) using the variable name.

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


Function Hoisting

Earlier in this tutorial, you learned about JavaScript Hoisting.

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

Because of this, JavaScript functions can be called before they are declared:

Run code

Functions defined using an expression are not hoisted.



Self-Executing Anonymous Function

Function expressions can be made "self-executing".

A self-executing is a JavaScript function that runs as soon as it is defined.

A self-executing expression is invoked (started) automatically, without being called. Also known as an IIFE (Immediately Invoked Function Expression).

Function expressions will execute automatically if the expression is followed by ().

Run code

Assigning the IIFE to a variable stores the function's return value, not the function definition itself:

Run code

The following example shows how to pass arguments to IIFE:

Run code

Callback Function

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Run code

The above example is a synchronous callback, as it is executed immediately.

However, that callbacks are often used to continue code execution after an asynchronous operation has completed.


Recursion

Recursion is a technique for iterating over an operation by having a function call itself repeatedly until it arrives at a result.

The following example use recursion to get the factorial of a number:

Run code

Arrow Functions

So far, we have gone through how to define functions using the function keyword.

However, there is a newer, more concise method of defining a function known as arrow function expressions as of ECMAScript 6.

Arrow functions, as they are commonly known, are represented by an equals sign followed by a greater than sign: =>.

Run code

Arrow functions do not have their own this. They are not well suited 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 a function expression is always constant value.

You can only omit the return keyword and the curly brackets if the function is a single statement. Because of this, it might be a good habit to always keep them.

Run code