Arguments

arguments in JavaScript is a special array-like object which is created implicitly during the execution of a function. It helps us to access those arguments which are not specified as the parameters during the function declaration.

Let’s consider this example.

Problem 1: We have to create a function which can add all the numbers passed to it as arguments.

The requirement is to add all the numbers, not 2, 3, 4, or 10 numbers. In such a scenario, we are not aware of the parameters we should add to the function statement.

Problem 2: We have to create a wrapper function W, which executes the given function F after a timeout of 5 seconds.

Again, in this scenario, we might not know what F is and what parameters will be present in the function statement.

To deal with it, we can take help of the arguments object.

Important Note: In ES6, arguments is not present. But we can take help of rest operator to simulate arguments. Read this for more information.

Solution 1

function adder () {
    var sum = 0;
    for (var index = 0; index < arguments.length; index++) {
        sum += arguments[index];
    }
    console.log ('Sum is', sum);
}

adder (1,2);                      // prints 3
adder (1, 2, 3);                  // prints 6 
adder (4, 4, 4, 4, 4);            // prints 20 

Solution 2

function delayed (fn) {
    return function () {
        var args = arguments, context = this;
        setTimeout(function () {
            fn.apply(context, args);
        }, 2000);
    }
}

var delayedAdder = delayed (adder);

delayedAdder (1, 2, 3);            // prints 6 after 2 seconds
delayedAdder (1, 3);               // prints 4 after 2 seconds

In the first example, we are trying to access array’s property length and value of the array’s element at given index. But rest of the array methods are not available with arguments, for example, slice, sort, and so on. This is the reason arguments is said to be an array-like object.

The type of the arguments evaluates to an object.

console.log (typeof arguments);

// prints "object"

However, since we are able to use the indices to access the arguments list, we might also require to call other array methods like map, forEach, filter, etc. To be able to do that we can use the apply method available to the functions.

var arr = [].slice.apply (arguments);

// arr => argument list in an array.

Consider another example,

function foo (a, b, c) {

}

foo (1, 2, 3, 4, 5);

In this example, a, b, andc will be mapped to arguments[0], arguments[1], and arguments[2] respectively and, arguments[3], arguments[4] will not have any other reference. Changing either of the value for first three arguments will reflect in both a/b/c and arguments. See this example for clarity.

https://jsfiddle.net/jayendrasharan/zLnx7jc6/

Note: You may replace all alert statements with console.log and see the result in console.

If you went through this example, you would have seen that, when the parameters have their own value passed as arguments during function execution, they are referenced by the arguments object and their relative index. Which means, changing either the arguments[index] or the parameter’s value, will sync the changes.

MDN Docs reference