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).

---

Example

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)

	You will learn a lot more about functions later in this tutorial.

---

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 local variables.

Often the arguments are used to compute a return value.

	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 Return Statement

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

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

Functions often computes a return value. The ruturn value is "returned" back to the "caller":

Example

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

var x = myFunction(4, 3);        // Function is called, return value will end up in x

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

The result in x 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.

Another Example

Convert Fahrenheit to Celsius:

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

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 created 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 aGLOBAL 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?

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