Functions

Functions

Introduction

A function is a set of expressions that are performed in sequence.
For example, the following function adds 3 numbers together and returns them:

function add3(){
    return 1+2+3
}

function add3(){
    return 1+2+3
}
alert(add3());

When you evaluate the functions above, you will see an alert box of 6

This is not, however, terribly useful to do as an exercise by itself. 

Instead of adding 3 fixed values together, what if you could send any 3 numbers to be summed in the function?
You do this by passing values to the function.  These values are called 'arguments', and are very important when writing functions.  First, you have to write your function with the ability to receive arguments, as follows, by adding variables into the set of parantheses at the beginning of the function declaration:

function add3(x,y,z){
    return x+y+z
}
alert(add3());

Note that when you run the code above, it returns NaN (short for "Not a Number").
This is because, while the function will now receive values, it doesn't actually get sent anything.

The arguments sent to a function go in the set of parantheses after the curly braces are closed.

function add3(x,y,z){
    return x+y+z
}
alert(add3(1,2,3));

function add3(x,y,z){
    return x+y+z
}
alert(add3(1,2,3));
alert(add3(4,5,6));

alert(add3(add3(1,2,3),add3(4,5,6),add3(7,8,9)));

Some functions even take other functions as arguments.  A good example of this is a function associated with a list: forEach.

forEach is a function that performs the function given as an argument exactly once on each member of the list, in order. 
This built in function can take up to, but not requiring, 3 arguments:

1. the element
2. the index of the element
3. the array being acted upon

The arguments are given in order, if required.
An example of this is shown below:

var a = [1,2,3]

function showVal(ea,i,array){
        alert(ea)
    }

a.forEach(showVal);

The code above takes the array 'a' and begins to step through it.
Each value, its index and a copy of the array 'a' are passed to the function showVal in order.
The function pops up an alert box with the value.

Functions as Arguments

Function Declarations vs Function Expressions

Take a look at the following two ways of defining a function in JavaScript:

The same can be done with what is known as an anonymous function.  An anonymous function is one that isn't bound in any way to an identifier and, such, are generally used as arguments passed to another function, as below:

var a = [1,2,3]
a.forEach(function(ea,i,array){
    alert(ea)
    });

Notice that this results in the same output as the previous example, but since the function used is not given a name, it is not available for use later.  This can be useful if you won't have need of that function again.

Anonymous Functions

Notice that the two, in these usage cases, produce the same output.

The two are not the same, however.  The first is an example of function declaration and the second is an example of function expression.

(function (){
    alert(1+2+3);
    })();

There are also self invoking functions:

A function declaration is a method of defining a named function without requiring a variable assignment.

A function expression is a method of defining a function as part of a larger expression.  Functions defined in this way can either be anonymous or named.

The major difference between the two types is what's referred to as 'hoisting', where a function declaration is moved, along with variable declaration, to the top of the current scope by the interpreter.
This can be shown clearly below:

function sum3(x,y,z){
    return x+y+z;
}
alert(sum3(1,2,3));

var sum3 = function(x,y,z){
    return x+y+z;
}
alert(sum3(1,2,3));

alert(sum3(1,2,3));
var sum3 = function(x,y,z){
    return x+y+z;
}

alert(sum3(1,2,3));
function sum3(x,y,z){
    return x+y+z;
}

Notice that the first one results in an error while the second doesn't.

On a related note, variable declarations are hoisted to the top of the scope too, but variable assignments are not.

alert(a);
var a = 5;

Notice that the expressions above result in an undefined result, but this one results in an error:

var a;
alert(a);
a = 5;

alert(a);

This is because, as far as the interpreter is concerned, this is how the first code looks:

JavaScript, and Lively Web, include built in functions.  We have been using one called 'alert', which creates a popup box.

alert('hello world!');

Notice that when you highlight and print the function, you get the same text back.  This is because you have not actually invoked the function.  To invoke the function, you need to call it by name with parentheses, like this: