Alice needs to use a lengthy expression at several places in her code. To avoid repeating the expression in the code she decides to create a function for it. She names the function as calculate.

function calculate(x, y) {
     return x*x + 2*x*y + y*y;
}

Bob also needs to use some expression at several places in his code and so he too decides to create a function for it. He too names his function as calculate.

function calculate(x, y) {
     return x*x + y*y;
}

Both Alice and Bob have chosen the same name for their functions. Though the names of the functions are same each of them performs a different operation. Some day if they need to combine their codes, one of them will have to rename his function to prevent conflict.

To avoid such situations all programmers will have to communicate the names they use for their functions to every other programmer. Now that’s not convenient, is it? A better solution is to use namespaces. Namespaces would allow both Alice and Bob to use the same names for their functions and combine their codes without modification. Isn’t that great! Lets see how we can use namespaces in JavaScript.

Alice can define her namespace as shown below.

var alice = {};

Similarly Bob can define his own namespace.

var bob = {};

Alice and Bob can now define their calculate functions in their respective namespaces as shown below.

alice.calculate = function(x, y) {
     return x*x + 2*x*y + y*y;
};

bob.calculate = function(x, y) {
     return x*x + y*y;
};

A call can be made to their functions as:

alice.calculate(10, 20); // This will call Alice's calculate function
bob.calculate(10, 20); // This will call Bob's calculate function

This is how both Alice and Bob can use same names for their functions.
Its not over yet! Bob can also use the same name calculate for two or more of his own functions. For this he has to define different sections in his namespace as shown below.

var bob = {};
bob.project1 = {};
bob.project2 = {};

Now Bob can define one calculate function under bob.project1 and another calculate function under bob.project2.

Some things to note:

• JavaScript does not have namespaces! So what did we see now? When you write var alice = {} you actually create an object. With the help of objects we are just simulating namespace like behaviour found in other languages.
• In real projects every programmer working in a project should not define his own namespace. The above example is provided for keeping things simple to understand. You generally create namespaces for grouping functions with similar functionality. You may read how packages in Java are named to get an idea of how you should choose names for your namespaces in JavaScript.

Worried? Thankfully you don’t need to do this. JavaScript allows you to define a single function which acts differently when different number of arguments are passed to it.

Consider the below function.

function sum(a, b) {
    return a + b;
}

When the sum function is called as sum(10, 20) the value 10 is accessed from the function using the identifier a and the value 20 is accessed using the identifier b. Alternatively, the values 10 and 20 can be accessed from the function using the arguments array as shown below. The first parameter can be accessed using arguments[0], the second one using arguments[1] and so on.

function sum(a, b) {
    return arguments[0] + arguments[1];
}

Before having a look at how we can write functions with variable number of arguments lets clear some misconceptions which some of you might have about JavaScript functions.

Normally you would call the above sum function as sum(10, 20) i.e. with two parameters. What would happen if you call it as sum(10, 20, 30)? If you think that it would cause an error then you are wrong! JavaScript does not check the parameter list in the function definition (formal parameters) with the parameter list in the function call (actual parameters). So the above sum function would simply ignore the third parameter. Because of this lenient nature of JavaScript it is possible to define the sum function without any formal parameters as shown below.

function sum() {
    return arguments[0] + arguments[1];
}

What would happen if you call the above sum function with a single parameter? Since arguments[1] would be undefined it would result in an error. You can pass more parameters than what the function is expecting but not less.

Now how would you modify the above function to calculate the sum of the first three parameters? You guessed it right! Simply include arguments[2] in the return statement. And here is how you would calculate the sum of all the arguments passed to the function.

function sum() {
    var sum = 0;
    var i;
    for(i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

So now you have learned how to create functions with variable number of arguments. But the above example might give some of you a wrong notion that whenever you need to create functions with variable number of arguments you have to use the arguments array. Lets see why this notion is not correct.

Consider the below calculate function which accepts three parameters.

function calculate(a, b, operation) {
    var result;
    if(operation == true) {
        result = a + b;
    } else {
        result = a * b;
    }
    return result;
}

When the value of the operation parameter is true it returns the sum of the first two parameters and when the value of the operation parameter is false it returns the product of the first two parameters. Suppose you want the default value of the operation parameter to be true, that is, if no value is passed for the operation parameter the function should behave as if the value is true. One may write the below code to achieve this.

function calculate() {
    var result;
    if(arguments.length == 2) {
        result = a + b;
    } else if(arguments.length == 3) {
        if(arguments[2] == true) {
            result = a + b;
        } else {
            result = a * b;
        }
    }
    return result;
}

To check whether the operation parameter has been passed or not the above code checks the number of arguments passed. Depending on the number of arguments passed it behaves differently. Though it would give the desired result the code is not easy to read.
The below code uses an alternative method to check whether the operation parameter has been passed or not.

function calculate(a, b, operation) {
    var result;
    if(typeof operation == "undefined") {
        result = a + b;
    } else {
        result = a * b;
    }
    return result;
}

Here the typeof operator is used to check whether the operation parameter has been passed or not. When it is not passed the typeof operator would result in the string "undefined". This method makes the code more readable than the previous one. Below is a still better one.

function calculate(a, b, operation) {
    var result;
    if(typeof operation == "undefined") {
        operation = true;
    }
    if(operation == true) {
        result = a + b;
    } else {
        result = a * b;
    }
    return result;
}

Not much difference between the previous one and this one. Can you tell why this one is better?

Shorthand for creating arrays

You can create an array objects using the Array constructor. However, there is also a short and sweet method for achieving this. As shown in the below example, you can simply use a pair of square brackets to create an Array object instead of the Array constructor.

// Using Array Constructor
var a = new Array();
var b = new Array("Apple", "Mango");

// Shorthand method
var a = [];
var b = ["Apple", "Mango"];

You can use the shorthand method most of the times. The only situation when you may need to use the Array constructor is when you want to specify the length of the array to be created. For example, var a = new Array(10);

A JavaScript array is not necessarily a collection of elements of the same data type

Arrays in languages like C and Java are collections of elements of the same type. For example, an array of type int can only contain elements of type int. However, JavaScript is a loosely typed language. You do not declare the type of the array when creating it. You can store values of multiple data types in a single array. The array in the below example contains three elements all of different types.

var myArray = [];

myArray[0] = 123;
myArray[1] = "Hello, world!";
myArray[2] = true;

alert(typeof myArray[0]);  // number
alert(typeof myArray[1]);  // string
alert(typeof myArray[2]);  // boolean

For associative arrays, you don’t need to create Array objects

Associative arrays are arrays in which strings are used as indexes of the elements.
The point to note is that the inbuilt Array object does not handle associative arrays. See the below example.

var capital = [];

capital["India"] = "Delhi";
capital["Sri Lanka"] = "Colombo";

alert(capital["India"]);     // Delhi
alert(capital["Sri Lanka"]); // Colombo
alert(capital.length);       // 0

You can see that you can use strings as indexes for storing the values. But the length property of the array does not take these values into consideration. The Array object only acts on elements having indexes which are represented as integers. For example, a[5], a["5"] and a[5.0] are one and the same and will be taken into account by the Array object. Whereas a["hello"], a["5a"] and a[5.23] will not be taken into consideration.

The indexes (“India” and “Sri Lanka”) used in the previous example are not representations of integers. The Array object will not take them into account. Though creating an Array using [] works, it is unnecessary. The better way is to create a new Object instead of a new Array as shown below.

var capital = {};            // Create new Object instead of new Array

capital["India"] = "Delhi";
capital["Sri Lanka"] = "Colombo";

alert(capital["India"]);     // Delhi
alert(capital["Sri Lanka"]); // Colombo

A note on the length property of the Array object

The length property of the Array object returns (largest index in the array + 1). See the below example.

var a = [];

a[0] = 123;
a[4] = 456;
a["6"] = 789;      // 6 is the largest index
a["colour"] = "pink";

alert(a.length); // 7

Calculating the number of elements in an associative array

An associative array is nothing but an object. The indexes are actually the properties of the object. So we can use the for...in loop for counting the number of elements as shown in the below code.

var capital = {};

capital["India"] = "Delhi";
capital["Sri Lanka"] = "Colombo";
capital["China"] = "Beijing";

var count = 0;
for(i in capital) {
     count++;
}

alert(count); // 3

Note that this counts all the elements in the array no matter whether the index is a string, integer or any other type.

In this article we will see how we can introduce delays between the iterations of JavaScript loops.

Consider a countdown script which counts from 10 to 0 with each value being displayed in a p tag on the HTML page. You can think of achieving this using a for loop or a while loop as below.

var i = 10;
var counter = document.getElementById("counter");

while(i >= 0){
     counter.innerHTML = i;
     i--;
}

However, this would run too fast and we would only be able to see the final value (zero) on the HTML page. If we introduce a delay after every iteration of the loop we would be able to see all the values of the countdown. If you think that for adding the delay we will have to write some kind of code using setTimeout or setInterval after the i-- statement, then you are wrong. As mentioned in the beginning, the way of using setTimeout and setInterval is quite different. To introduce the delay, we will have to change the structure of the program completely.

Using setTimeout to introduce delays

First lets have a look at an example of setTimeout usage to understand how it works.

setTimeout("alert('Shown after 2 seconds')", 2000);

The first parameter is the code to be executed. The second parameter is the time (in microseconds) after which the code should be executed. In the example, the alert message will be shown after two seconds.

An alternative method is to pass the reference of a function instead of directly passing the code as a string.

function showMessage(){
     alert("Shown after 2 seconds");
}
setTimeout(showMessage, 2000);

Because of these ways of using the setTimeout function for introducing delays, we will have to change the structure of our countdown program completely. We will have to eliminate the while loop entirely and use functions instead. Here is how you do it.

var i = 10;
var counter = document.getElementById("counter");

function countdown(){
     if(i >= 0){
          counter.innerHTML = i;
          i--;
          setTimeout(countdown, 1000);
     }
}
countdown();

If you understood the usage of the setTimeout function mentioned earlier, a little bit of thinking should give you an idea about how this code works.

What does this style of coding look like? You are right. It looks similar to the recursive style of implementing loops. But note that this is different from the recursion we use normally. In normal recursion, when a function calls itself, the call is synchronous. However, in this case the call to the countdown function using setTimeout is asynchronous.

Using setInterval to introduce delays

We can also implement our countdown program using setInterval. Lets look at the usage of setInterval.

function doSomething(){
     // Some code
}
var timer = setInterval(doSomething, 2000);

In the above example, the doSomething function will be executed every 2 seconds. The setInterval function returns a value which can be used to stop this repeated execution. To stop the repeated execution in the above example you can make a call to the clearInterval function as clearInterval(timer);

Below is our countdown program implemented using setInterval.

var i = 10;
var counter = document.getElementById("counter");
var timer;

function countdown(){
     if(i >= 0){
          counter.innerHTML = i;
          i--;
     } else {
          clearInterval(timer);
     }
}
timer = setInterval(countdown, 1000);

This was too difficult for me to understand! Is there a simple way to introduce delays without getting into the details?

The above methods might look quite awkward and new programmers might find them difficult to use. But if you compare the structure of the while loop code and the codes using setTimeout and setInterval you will notice that there is a one-to-one correspondence between the main parts of the two types of codes. Below I have shown the comparison of the while loop code and the setTimeout code. To convert any while loop code to setTimeout code, you just need to copy the INITIALISATION, CONDITION and LOOP BODY sections in the while loop code to their respective sections in the setTimeout code template and you are done. No need to worry about the details!

// while loop code template
/* INITIALISATION */
while(/* CONDITION */){
     /* LOOP BODY */
}

// setTimeout code template
/* INITIALISATION */
function somename(){
     if(/* CONDITION */){
          /* LOOP BODY */
          setTimeout(somename, 100); // Change 100 to whatever
                                     // delay you require
     }
}
somename();

Now try writing the template for setInterval code.

Complete code listing of the setTimeout example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
          "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Delay</title>
</head>
<body>
	<p id="counter"></p>
	<script type="text/javascript">

	var i = 10;
	var counter = document.getElementById("counter");

	function countdown(){
	     if(i >= 0){
	          counter.innerHTML = i;
	          i--;
	          setTimeout(countdown, 1000);
	     }
	}
	countdown();
	</script>
</body>
</html>

Complete code listing of the setInterval example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
          "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Delay</title>
</head>
<body>
	<p id="counter"></p>
	<script type="text/javascript">

	var i = 10;
	var counter = document.getElementById("counter");
	var timer;

	function countdown(){
	     if(i >= 0){
	          counter.innerHTML = i;
	          i--;
	     } else {
	          clearInterval(timer);
	     }
	}
	timer = setInterval(countdown, 1000);
	</script>
</body>
</html>

There is a slight difference between the functioning of the two examples. Can you spot it?