Professional Innovations

October 07th 2015 / JavaScript

Functions In JavaScript

Posted by ProInns

Functions in JavaScript might seem weird for a programmer coming from a C#, Visual Basic or Java background. In this article, we will have a preliminary look at functions in JavaScript; we will try to examine how functions are defined and invoked as well as how the parameters are listed and passed; it’s based on this understanding that we will be able to conclude by showing why the concept of overloading is not supported in JavaScript.

In JavaScript, functions are types like any type that a variable is assigned to. Functions can be defined in one of 3 ways:

1 – Declarative: this is how functions are defined most of the time. We use the ‘function’ keyword to define it as follows:

function functionName (parametersList)
    function body

The key issue to note when defining a function using the declarative method is that you can make a call to the function at any place in your code no matter where the function is defined; in other words, I can have something like:

var s = add(1, 2);

function add(a, b)
   return a+b;

The reason why I was able to call the function before it is defined is that the JavaScript interpreter scans my code when the page is rendered, searching for any declarative definitions and parses them; when the code actually runs and the call to the function is made, that function is already there and parsed.


2 –Function Assignment: functions can be defined like any other variable as follows:

var add = function (a,b)
                      return a + b;

                   }; //notice the ; that ends the assignment statement

You can invoke the method normally as follows:

var s  = add(1, 2);

Being a variable, nothing prevents us from writing: var add2 = add;
Now add2 is a reference to the same function and invoking add2(1,2) will return 3.

The key issue using this definition method is that you cannot invoke the function before it is defined; hence, the below code will generate an error:

var s = add (1, 2);

var add = function (a,b)
                      return a + b;


Having a variable x, it is easy to know if it refers to a function or not; we just need to use the famous typeof operator which returns the ‘function’ string when the variable refers to a function; using the example above, the below test returns true:

If (typeof add == ‘function’) {}


3 – Closures: we can define a function as a closure i.e. a function within the body of another function. Closures are very powerful in JavaScript and a separate article will be dedicated to explain them. Consider the below function:

function operation (type)
     if (type == ‘add’)
          return function (a, b) {return a + b ;};
     else if (type == ‘subtract’)
          return function (a, b) {return a - b ;};

operation is a function that accepts a string; when ‘add’ is passed, it returns a function that adds its 2 parameters; when ‘subtract’ is passed, it returns a function that subtracts its 2 parameters. Consider the following example:

var addition = operation (‘add’);
var s = addition (1, 2); //3 is returned

var subtraction = operation(‘subtract’);
var s = subtraction (2, 1); //1 is returned

Closures are heavily used especially in jQuery.

The next issue that we need to discuss and that is related to functions is how parameters are defined and arguments are passed; if a function is defined with x parameters, you are free to pass any number of arguments when you call it. For instance, you can call the add() function that we defined above and pass 0, 1, 2, 3 or x arguments. It is the job of the function itself to detect whether all the parameters were assigned values and handle all scenarios where some parameters have no corresponding arguments.

Suppose we have: var s = add(1);

Although the add() function has 2 parameters, we called it with only one argument corresponding to a and having a value of 1; inside the body of add() b is undefined. The following test will return true: if (b == undefined){}

Inside the body of any function, you have access to the arguments variable. This is an array that provides a way, not only to count the actual number of arguments that were passed when the function was called, but also to access those arguments. Using the above example, we can access the value of 1 either by using the parameter a or by using arguments[0]. We can count the number of passed arguments using arguments.length.

It is now obvious why functions’ overloading is not supported in JavaScript. Overloading simply means having different functions with the same name but different signature (i.e. parameters’ types and order). Since the parameters list is irrelevant when the function is called, JavaScript misses the whole concept of functions overloading.