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 Functions

A JavaScript function is a block of code designed to perform an action or a particular task.

Functions are custom code defined by programmers that are reusable, and can make your programs more modular and efficient.

A JavaScript function is executed when "something" invokes (calls) it.


Defining a Function

A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:

  • The name of the function
  • A list of parameters to the function, enclosed in parentheses () and separated by commas
  • The JavaScript statements that define the function, enclosed in curly brackets, { }

Below is the syntax for a function in JavaScript:

function nameOfFunction(parameter1, parameter2, ..., parameterN) {
    // statement(s) to be executed
}

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

In our first example, we'll make a function declaration to print a greeting statement to the document.

Run code

Function Invocation

Defining a function does not execute it. Defining the function simply names the function and specifies what to do when the function is invoked.

You can invoke (call) a function by writing the name of the function followed by the parentheses ().

Run code

Now we have our greet() code contained in a function, and can reuse it as many times as we want.

Run code

There are also other ways you can invoke (call) a function:

  • When an event occurs (when a user clicks a button)
  • When it is invoked (called) from JavaScript code
  • Automatically (self executed)

You will learn more about function invocation later in this tutorial.


Function Parameters

You can specify parameters when you define your function to accept input values at run time.

Function parameters are listed inside the parentheses () in the function definition.

Run code

You can define as many parameters as you like.

Run code

However for each parameter you specify, a corresponding argument needs to be passed to the function when it is called, otherwise its value becomes undefined.

Run code

The parameters work like placeholder variables within a function; they're replaced at run time by the values (known as argument) provided to the function at the time of invocation.

Inside a function, arguments (parameters) behave as LOCAL variables.

You will learn more about function parameters later in this tutorial.



Returning Values

A JavaScript function can return a value back to the script that called the function as a result using the return statement.

The returned value may be of any type, including arrays and objects.

When JavaScript reaches a return statement, the function will stop executing.

The following function takes one parameter, called number and return the parameter (that is, number) multiplied by itself:

Run code

A function can not return multiple values. However, you can obtain similar results by returning an array of values:

Run code

The () Operator Invokes the Function

Using the example above, square refers to the function object, and square() refers to the function result.

Accessing a function without () will return the function definition instead of the function result:

Run code

Function Expressions

While the function declaration above is syntactically a statement, functions can also be created by a function expression.

A function expression can be stored in a variable and always invoked (called) using the variable name.

Such a function can be anonymous; it does not have to have a name. For example, the function square could have been defined as:

Run code

Another example:

Run code

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


Function Scope

Variables defined inside a function cannot be accessed from anywhere outside the function, they become LOCAL to the function.

Run code

Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.

Local variables are created when a function starts, and deleted when the function is completed.