JavaScript Functions

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

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


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

Try it yourself »

JavaScript Function Syntax

A JavaScript function is defined with the function keyword, followed by a name, followed by 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 "something" invokes (calls) the function.

A function can be invoked:

  • When an event occurs (when a user clicks a button)
  • When it is invoked (called) from JavaScript code
  • Automatically (self invoked)
Note You will learn a lot more about functions in later chapters.

Function Parameters and Arguments

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

Identifiers, in the function definition, are called parameters.

Multiple parameters are separated by commas:

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

Values received by the function, 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":


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

function myFunction(a, b) {
      return a * b;            // the function returns the product of a and b


var x = myFunction(4, 3);      // the function is called

The result in x will be:


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.

Another Example

Convert Fahrenheit to Celsius:

function toCelsius(farehneit) {
    return 5/9 * (farenheit);

Try it yourself »

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 where they were declared.

Arguments (parameters) 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:


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:


Download XML Editor FREE Website BUILDER Free HTML5 Templates