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.
Table of Contents
What is Arguments Object
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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 |
How to Access Arguments Object
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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
Properties of Argument Object
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.
Arguments Object Examples
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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 |
Modifying the Values of Arguments Object
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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); |
The above work only with the simple parameter. It will not work with the rest parameters, default parameters, or destructured parameters.
In the following code, we change the arguments[0]. This will also change the message variable.
1 2 3 4 5 6 7 | function sayHello(message) { arguments[0] = "Hello world"; console.log(message); //Hello World } sayHello("Hello"); |
But when we assign a default value to message parameter, any changes made to arguments[0] does not change the message parameter.
1 2 3 4 5 6 7 8 | 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]
1 2 3 4 5 6 7 | 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
1 2 3 4 5 6 7 | function sayHello(message="Welcome") { console.log(message) //Welcome console.log(arguments[0]); //undefined } sayHello(); |
Converting into array
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
1 2 3 4 5 6 7 8 9 | function testFn() { const args = Array.prototype.slice.call(arguments); console.log(args) } testFn(10,20,30) //[ 10, 20, 30 ] |
The arguments object is not available in Arrow functions
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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); |
