HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

JavaScript Functions


A JavaScript function is a block of code that may be executed when "someone" invokes (calls) it.


Example

function myFunction(p1, p2) {
  return p1 * p2;           // return the product of p1 and p2
}


JavaScript Function Syntax

A JavaScript function is defined with the function keyword, followed by a functionName, and single brackets: ()

The single brackets may include a list of parameter names: (parameter1, parameter2, .....)

The code to be executed by the function is placed inside curly brackets: {}

function functionName(parameters) {
  code to be executed
}

The code inside the function will execute when "someone" invokes (calls) the function.

It will execute:

  • When an event occurs (when a user clicks a button)
  • When it is invoked (called) from "anywhere" by JavaScript code
  • Automatically (self invoked)
Note A JavaScript function without a function name, is called an anonymous function.


Function Parameters and Arguments

When you call a function, you can pass values to it. These values are called arguments or parameters.

Identifiers used, in the function definition, are called parameters.

Multiple parameters are separated by commas:

function myFunction(parameter1, parameter2) {
  code to be ececuted
}

Values used, for the parameters, when the function is invoked, are called arguments.

The parameters and the arguments must be in the same order:

var x = myFunction(argument1, argument2);

Inside the function, the arguments can be used as variables.

Often the arguments are used to compute a return value.

Note JavaScript is case sensitive.
The function keyword must be written in lowercase letters.
A function must be invoked with the same letter capitals as used in the function name.
The argument names must use the same letter capitals as used in the parameter names.


The Return Statement

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

If the function was invoked from a JavaScript statement , JavaScript will "return" and continue to execute the code after that statement.

Functions often computes a return value. This way a function can return a value back to the "caller":

Example

Calculate the product of two numbers, and return the result:

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

document.getElementById("demo").innerHTML = myFunction(4, 3);

The innerHTML of the "demo" element will be:

12

Try it yourself »


Why Functions?

You can reuse code: Define the code once, and use it many times.

You can use the same code many times with different arguments, to produce different results.

Note A function defined as the property of an object, is called a method to the object.
A function designed to create new objects, is called an object constructor.


Local JavaScript Variables

A variable declared (using var) within a JavaScript function becomes local to the function.

The variable gets a local scope: It can only be accessed from within that function.

Local variables can have the same name in different functions, because they are only recognized by the function in which they are declared.

Parameter arguments work as local variables inside functions.

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


Global JavaScript Variables

A variable declared outside a function, becomes GLOBAL.

The variable gets a global scope: All scripts and functions on the web page can access it.


The Lifetime of JavaScript Variables

The lifetime of a JavaScript variable starts when it is declared.

Local variables are deleted when the function is completed.

Global variables are deleted when you close the page.


Assigning Values to Undeclared JavaScript Variables

If you assign a value to a variable that has not yet been declared, the variable will automatically be declared as a GLOBAL variable.

This statement:

carname="Volvo";

will declare the variable carname as a global variable , even if it is executed inside a function.


Did you Know?

Note A Function is much the same as a Procedure or a Subroutine, if you are familiar with these names.



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE