JavaScript

Well, this is not really a secret to be exact. Many experience programmers who have worked with JavaScript for many years will surely come across arguments array. Some book may even forgotten the existence of arguments array since it is not widely used. Hence, i believe majority of JavaScript programmers do not actually know the existence of such array in JavaScript. So allow me to explain what is arguments array.

Arguments Array

An arguments array is a predefined array used within a function in JavaScript. Whether you used it or not it will still exist within that function. The main advantage of using arguments array is the unlimited number of argument or parameter you can pass into a function. Let's consider the following example,

function example()
{
	var sum = 0;
	for(i = 0; i < arguments.length;i++)
	{
		sum += arguments[i];
	}
	alert(sum); //45
}
example(1,2,3,4,5,6,7,8,9,0);

i find that the above example will simply get the idea through how arguments array worked. It is an array so whatever we passed in via arguments will be placed into an arguments array within the function. Then, we simple just used it. The above example is an simple addition function. You can see another example at override ‘this’ object in JavaScript

Detect Arguments

What if we want to use the arguments array in certain circumstances but not all the times? Preload with jQuery shows one particular function that uses an array or parameter depend on how users want to use that function (now, you might have guess how a library such as jQuery allows multiple different parameter for a single function). In order to do that, we have to detect what arguments or values been passed on to the function.

In JavaScript, we can detect a particular value by using comparison operators (===, ==, !=, etc.) but there are also other techniques to detect these arguments. We can use in operator which detect whether a given value is in the arguments array (in operator is not widely supported. Thus, you don't see many using it). There are also typeOf operator which determine what is the type of the value (string, object, int, etc.)which you can see from Preload with jQuery article. Lastly, there is Autocasting operator which evaluate whether a variable has a value (NaN, 0, false, undefined, null, or an empty string are considered as no value). Let's look at each new detection method example that i mention here.

//Detect whether there is a "hello" member in the arguments array: 
var parameter = 'hello' in arguments? arguments : "";

//Detect whether arguments contains at least one argument
var parameter = typeof arguments[0] != 'undefined'? arguments : "";

//Detect whether the user passed an object(can be array) or a list of arguments
var parameter = (typeof arguments[0] == 'object')? arguments[0] : arguments;

//Detect whether there is an arguments passed into the function and assign the number of arguments into the variable
var parameter = arguments.length || "";

Summary

Using Argument Array is great as we are not restricted by the number of parameter on a given function. However, many online tutorial on basic JavaScript no longer practice this since it is said that this has been depreciated with new browsers emerged but its still usable in JavaScript up till today (who said its depreciated!).

Have you ever experience a time when the calling object 'this' needed to be override and somehow you just couldn't do that? You tried left hand assignment but it just won't work? wondering how can 'this' object be overridden in JavaScript but can't find the correct answer on Google? This article will explain how this can be done.

Left hand assignment

Ever tried left hand assignment to override 'this' object?

var obj = document.getElementById("button");
this = obj

It will fail and gives you 'invalid assignment left-hand side'.

Using Call() to override 'this' object

There is a function in JavaScript, Call() which can help you override 'this' object or specify the 'this' object. Let's consider the following example,

function example(a,b)
{
	this.value == 'button'?alert(a):alert(b);
}
var textobj = document.getElementById('input_relink');
example.call(textobj, 'It is a button!', 'It is not a button');

We look at a text box and check whether the user key in 'button'. But we uses 'this' object to verify the input text in the function example which takes in two parameter as shown above. The Call() method is used whenever you wish to override 'this' object which is placed at the first parameter and the rest of the parameter will be exactly the same as the method parameter. Hence, we used the function in this way for the above example because it has two parameter.

//override 'this' with object 'textobj'
example.call(textobj, 'It is a button!', 'It is not a button');

If we have another function which takes in 3 parameter, we will do this.

function example(a,b, c)
{
	this.value == 'button'?alert(a):alert(b);
	alert(c);
}
var textobj = document.getElementById('input_relink');
example.call(textobj, 'It is a button!', 'It is not a button', 'Completed');

You can also used it without parameter like the one illustrated below,

var o = { x: 15 };
function f()
{
    alert(this.x);
}
f.call(o);

Using Call() method restrict your variable given on the method. On the other hand, we can use another method Apply() which override the 'this' object giving the second parameter as an array.

Using Apply() method to override 'this' object

The difference between call and apply method is the parameter needed to use them. For Call() method it depends on the parameter of the function as shown above. But for Apply() method it can have more than the amount of parameter in the function (since it takes in an array). Similarly, the first parameter of both methods are used to override 'this' object. Let's consider the following example,

var o = { x: 8 };
function example()
{          
    // arguments[0] == object 
	var sum = 0;
    for(var i = 1; i < arguments.length; i++)
    {
       sum+=arguments[i]
    }
	alert(sum+ this.x);
}
example.apply(o, 1, 2, 3, 4)

I am using the depreciated argument array to look through the argument being passed into the function, sum them up, alert to the user. Similarly, i can do this using an array.

var o = { x: 8 };
function example(a, b, c)
{          
	alert(this.x+a+b+c);
}
example.apply(o, [1,2,3])

Pretty simple isn't it?