JavaScript Functions

A JavaScript function is a collection of statements, either named or unnamed (anonymous), that can be called from elsewhere within a JavaScript program. Functions can accept arguments, which are input values passed into the function.

Within a function, those arguments passed into the function can be acted upon and the results returned to the caller of the function via a return value.

Functions are used when you have something that needs to happen multiple times within a program. Rather than defining the same code multiple times, you can use a function to perform that action.

A function is defined with the keyword function, followed by the name of the function, and then by parentheses that contain optional parameters to be used. Use braces to surround the statements to be executed as part of the function. For example,

function functionName() {
// Statements go here;
}

When a function is defined, the code isn't actually executed until the function is invoked, or called.

Function Parameters

You have to place parameters passed to a function within the parentheses of the function definition. For example,

function myFunction(parameter1, parameter2) {
// Do something
}

Calling or invoking the function is:

myFunction(val1,val2);

In JavaScript you don't need to specify the number of parameters or arguments being passed into a function, and the number of arguments being passed in does not need to match those that are defined in the function definition.

When invoked, the function is given an array object named arguments. The arguments object holds the arguments sent into the function, which can be helpful when you don't know the number of arguments being sent in. For example,

function myFunction() {
var firstArg = arguments[0];
var secondArg = arguments[1];
}

You can also get the length of the arguments object and loop through each argument, as follows:

function myFunction() {
var argLength = arguments.length;
for (var i = 0; i < argLength; i++) {
// Do something with each argument (i)
}
}

Variable Scope

Function parameters are variable names and shouldn't be named the same as the variables that are used to invoke the functions. Try to use different names for variables inside and outside functions and always use the var keyword to initialize variables.

Depending on the code contained in the function, the function might or might not have a return value. That return value is passed back to the caller.

Return Values

When a function finishes executing its code, it can return a value to the caller by using the return keyword. For example,

function multiplyNums(x) {
return x * 2;
}
var theNumber = 10;
var result = multiplyNums(theNumber);
alert(result);

The above example creates a function called multiplyNums with an intended input value, which is assigned to the variable x. The function returns its argument multiplied by 2. The code then creates a variable called theNumber. Next, the code creates another variable called result. This variable holds the result of the call to the multiplyNums function. The multiplyNums function uses the variable theNumber as an argument.

You can place the return value anywhere within a function, not just at the end. Using a return within a conditional or after a loop is common. For example,

function myFunction(x) {
if (x == 1) {
return true;
} else {
return false;
}
}

When the function execution gets to the return statement, the function returns immediately and won't execute any code after that.

Closures

In JavaScript, nested functions have access to the outer function's variables. Closures refer to the existence of variables outside a function's normal execution context. Closures are frequently created by accident and can cause memory leak problems in web browsers if they are not handled properly.

Naming a Function

Functions are actions. So, their name is usually a verb. It should be brief, as accurate as possible and describe what the function does, so that someone reading the code gets an indication of what the function does.

It is a widespread practice to start a function with a verbal prefix which vaguely describes the action. For example, functions that start with "show" usually show something. Function starting with:

• show - show something
• get - return a value
• calc - calculate something
• create - create something
• check - check something and return a boolean

A function should do exactly what is suggested by its name, no more. Two independent actions usually deserve two functions, even if they are usually called together. You can also make a third function that calls those two.