Easy JavaScript Part 4: What is the arguments object in a function?

A JavaScript function has array-like objects called arguments which correspond to the arguments passed to the function. All arguments passed to a JavaScript function can be referred using the arguments object.  

Before you learn about default arguments, check out Infragistics’ jQuery library, Ignite UI for JavaScript/HTML5 and ASP.NET MVC, which helps you write and run web applications faster. You can use the Ignite UI for JavaScript library to help quickly solve complex LOB requirements in HTML5, jQuery, Angular, React, or ASP.NET MVC. Download a free trial of Ignite UI today.

Now as we get started, let’s consider the code listed here:

function add(num1, num2) {
 
    var res = num1 + num2;
    return res;
}
 
var r = add(7, 8);
console.log(r);

In the above function, num1 and num2 are two arguments.  You can refer to these arguments using the arguments named num1 and num2. Besides the arguments name, you can also refer to them using a JavaScript array like the object arguments. So, the above function can be rewritten as shown in the listing below:

function add(num1, num2) {
 
    var res = arguments[0] + arguments[1];
    return res;
}
 
var r = add(7, 8);
console.log(r);

In JavaScript functions, the arguments object is used to access or refer to all arguments passed to the function. The arguments object is a local variable available to the function. The length of the arguments object is equal to the number of arguments passed to the function.  Let us consider the code below, where you’ll get 2 as an output because two arguments have been passed to the function:

function add(num1, num2) {
 
    var res = arguments.length;
    return res;
}
 
var r = add(7, 8);
console.log(r);

An arguments object is not a pure array 

The JavaScript arguments object is not a pure JavaScript array. You cannot perform operations such as push, pop, slice etc. with the arguments object. As you’ll see in the code listed below, doing so will throw an exception because arguments.push is not a function. 

function add(num1, num2) {
 
    arguments.push(78);
    var res = num1 + num2;
    return res;
}

An arguments object can be set

You can set a particular item in an arguments object array. To begin, you can set the first item of the array using the index 0 as shown in the listing below: 

function add(num1, num2) {
 
    arguments[0] = 15;
    var res = num1 + num2;
    return res;
}
 
var r = add(7, 8);
console.log(r);

In the add function, num1 and arguments[0] refer to same value. So, when you update the arguments[0], the value of num1 also get updated. For the above code, the output would be 23.

 

Convert arguments object to an array

As we’ve covered already in this post, a JavaScript function arguments object is not a pure array. Other than the length property, it does not have any other property. However, you can convert an arguments object to an array using Array.prototype.slice.call as shown in the listing below:

function add(num1, num2) {
 
    var arg = Array.prototype.slice.call(arguments);
    console.log(arg.pop());
}

In ECMAScript 6, you can convert the arguments object to an array as shown in the listing below:

function add(num1, num2) {
 
    var arg = Array.from(arguments);
    console.log(arg.pop());
}

Conclusion

To recap, here are a few important things to remember about the arguments object:

• The length of the arguments object is equal to the number of arguments (parameters) passed to the function.
• An arguments object is an array-like object but not a JavaScript array.
• You cannot use other JavaScript array methods such as push, pop, slice etc. with the arguments object.
• The JavaScript arguments object index starts with zero. So the first parameter will be referred by arguments[0], second parameter will be referred by arguments[1] and so on.

Simply put, a JavaScript arguments object is an array-like object which refers parameters passed to the function. In ECMAScript 6, rest parameters were introduced and are now widely used instead of the arguments object in functions for variable numbers or arguments.

In the next post of this "Easy JavaScript" series, you will learn about the class in JavaScript functions. Also, do not forget to check out Ignite UI for JavaScript/HTML5 and ASP.NET MVC, which you can use with HTML5, Angular, React, and ASP.NET MVC to create rich Internet applications. And don’t forget, you can download a trial of all our JavaScript controls for free!