Arguments object in JavaScript allows us to access the argument values inside the function. In this tutorial, we will show you what is Arguments object and how to access it inside the JavaScript function. We also look at some of its use cases with examples.
The Arguments object is an array-like object available inside every JavaScript function. It contains the values of the arguments passed to that function.
We generally use the parameters to access the arguments inside the function. But JavaScript allows us to pass any number of arguments to a function irrespective of the number of parameters it declares
The following addNum function declares two parameters. But we can invoke it with three or more arguments. JavaScript does not complain. But we cannot access those additional arguments using the existing parameters. This is where we use the Arguments object.
function addNum(a, b) {
return a + b ;
}
//0 Argument. Both a & b is initialzed as undefined
console.log(addNum()); //Nan
//1 Argument b is initialzed as undefined
console.log(addNum(1)); //Nan
//2 Argumnets
console.log(addNum(1,2)); //3
//3 Arguments last argument 3 is ignored
console.log(addNum(1,2,3)); //3
The Arguments object is always available inside every function (except arrow functions). It contains the values of the arguments in an Array-like object with the first entry’s index at 0. Note that it is not an Array but an Array-like object.
The value of the first argument is available at the 0th index i.e. arguments[0]. The next one will be at arguments[1] and so on.
For Example, take a look at the following example. The addNumbers declares three parameters. We can access all of them using the Arguments object.
The Arguments object returns undefined if we try to access the non-existing argument.
function addNumbers(a, b, c) {
console.log(arguments[0]); //10
console.log(arguments[1]); //20
console.log(arguments[2]); //30
console.log(arguments[3]); //undefined
console.log(arguments[4]); //undefined
return a+b+c;
}
addNumbers(10, 20, 30);
You can also refer to arguments as addNumbers.arguments[0]. But this feature is deprecated. So it is no longer recommended. Though some browsers still support it for compatibility purposes
The Argument object has two properties.
Length Property returns the total number of arguments that were passed to the function.
Callee Property returns the reference to the executing function to which the arguments belong. This property is not available in strict mode.
The following example shows how we can make use of the arguments object. The following function addNumbers can add any number of numbers. The code uses the arguments.length property to find out the number of arguments. It uses it in a for loop and calculates the sum of all arguments.
function addNumbers() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
console.log(sum)
//150
return sum;
}
addNumbers(10, 20, 30, 40, 50); //150
addNumbers(1, 2, 3, 4, 5); //15
The following code finds the largest number.
function findMax( ) {
if (arguments.length == 0) return
var m =arguments[0];
for(var i = 0; i < arguments.length; i++)
if (arguments[i] > m)
m = arguments[i]; // Return the biggest
return m;
}
var maxNum = findMax(10, 50, 20, 1000,250);
console.log(maxNum)
Using callee to recursively call the function.
function fnRecursive(x)
{
console.log(x)
if (x <= 1) return 1;
return arguments.callee(x-1);
}
fnRecursive(10)
Output:
10
9
8
7
6
5
4
3
2
1
We can reassign new values to the arguments object. In Non-strict mode, the Parameters are also automatically synchronized with the new value.
In the following code, we assign a new value to arguments[0]. This will also change the value of the parameter a.
function addNumbers(a, b) {
console.log(arguments[0]); //10
console.log(arguments[1]); //10
arguments[0]=50 //Changed to 50
console.log(a) //a also changes to 50
console.log(a+b)
}
addNumbers(10, 10); //60
But in strict mode Parameters will not change.
function addNumbers(a, b) {
'use strict'
console.log(arguments[0]); //10
console.log(arguments[1]); //10
arguments[0]=50 //Changed to 50
console.log(a) //a stays the same 10
console.log(a+b)
}
addNumbers(10, 10); //20
vice versa is also true. Any modifications to Parameters will automatically change the arguments object.
function addNumbers(a, b) {
console.log(arguments[0]); //10
console.log(arguments[1]); //10
a=20
console.log(arguments[0]); //20
}
addNumbers(10, 10);
But it will not work in strict Mode
function addNumbers(a, b) {
'use strict'
console.log(arguments[0]); //10
console.log(arguments[1]); //10
a=20
console.log(arguments[0]); //10
}
addNumbers(10, 10);
But when we assign a default value to message parameter, any changes made to arguments[0] does not change the message parameter.
function sayHello(message="Welcome") {
arguments[0] = "Hello world"; updating arguments[0] does not also update message
console.log(message); //Hello
}
sayHello("Hello");
Even updating the message parameter does not change the arguments[0]
function sayHello(message="Welcome") {
message = "Hello world"; //updating message does not also change arguments[0]
console.log(arguments[0]); //Hello
}
sayHello("Hello");
When we do not pass any argument value, then the argument[0] remains undefined
function sayHello(message="Welcome") {
console.log(message) //Welcome
console.log(arguments[0]); //undefined
}
sayHello();
The arguments object looks like an array but it is not an array. It has only two properties length and callee. It does not have methods like forEach, reduce, filter and map, etc.
But you can convert it into an array using Array.prototype.slice.call
function testFn() {
const args = Array.prototype.slice.call(arguments);
console.log(args)
}
testFn(10,20,30) //[ 10, 20, 30 ]
addNumbers = (a, b, c) => {
console.log(arguments[0]); //Uncaught ReferenceError: arguments is not defined
console.log(arguments[1]); //
console.log(arguments[2]); //
console.log(arguments[3]); //
console.log(arguments[4]); //
return a+b+c;
}
addNumbers(10, 20, 30);
But that is not a big deal as you can make use of rest parameters (...arguments).
addNumbers = (...arguments) => {
console.log(arguments[0]); //10
console.log(arguments[1]); //20
console.log(arguments[2]); //30
console.log(arguments[3]); //undefined
console.log(arguments[4]); //undefined
}
addNumbers(10, 20, 30);
