andyfrench.info

JavaScript functions can be declared in a number of ways.

Basic declaration

function write(message) {
    var div = document.getElementById('message');
    var para = document.createElement("p");
    var node = document.createTextNode(message);
    para.appendChild(node);
    div.appendChild(para);
}

In the example above the function called write is declared and can be called later in JavaScript (e.g. write("My message here")).

Assigned function

Functions can be assigned to variables. There are basically 2 ways to do this: 1) name the function and assign it to a variable, 2) don’t name the function and assign it to a variable.

var writeFunc = function write(message) {
    var div = document.getElementById('message');
    var para = document.createElement("p");
    var node = document.createTextNode(message);
    para.appendChild(node);

    div.appendChild(para);
};

In the example above the function is named (write) and assigned to a variable (writeFunc). The function must now be called via the variable name (e.g. writeFunc("My message here")). Note the semi-colon at after the last curly brace.

var writeFunc = function (message) {
    var div = document.getElementById('message');
    var para = document.createElement("p");
    var node = document.createTextNode(message);
    para.appendChild(node);

    div.appendChild(para);
};

In the example above the function is not named (it’s an anonymous function) but is still assigned to a variable as before.

Anonymous function immediately invoked

(function (message) {
    var div = document.getElementById('message');
    var para = document.createElement("p");
    var node = document.createTextNode(message);
    para.appendChild(node);

    div.appendChild(para);
})("This is a message.");

In the example above the function is anonymous. However, because it is wrapped in brackets and has an argument passed in (see the last line) it will be immediately invoked.

Function overloading

Function overloading doesn’t work the same way in JavaScript as it does in C#. Declaring functions with the same names but different arguments doesn’t result in overloaded functions, rather the last function to be declared overwrites the others. Note that if you call a function and pass in too many arguments any unnecessary arguments are simply ignored.

Don’t forget that object parameters are passed by reference and primitive types by value.

Use an object to hold arbitrary values

One option is to add an object parameter as the last argument to a function. This object can be used as a bag into which you can put whatever parameters you want.

function functionTest(param1, param2, options) {
    write("param1: " + param1);
    write("param2: " + param2);
    write("options.opt1: " + options.opt1);
    write("options.opt2: " + options.opt2);
}

window.onload = function () {
    functionTest("This is param1", "This is param2", {opt1:"This is option1", opt2:"This is option2"});
}

Use the ‘arguments’ object

Another option is to use the arguments object. This is described as:

“An Array-like object corresponding to the arguments passed to a function.” [1]

function functionTest() {
    write("arguments[0]: " + arguments[0]);
    write("arguments[1]: " + arguments[1]);
    write("arguments[2]: " + arguments[2]);
}

window.onload = function () {
    functionTest("This is arguments[0]", "This is arguments[1]", "This is arguments[2]");
}

 

References

[1] https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments