Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can I convert the arguments object to an array in JavaScript?
This tutorial teaches us to convert the arguments object to array in JavaScript. Before we proceed with the tutorial, let's look at the arguments object. In JavaScript, every function contains the 'arguments' object. It includes the values of all arguments we passed while calling or invoking the function.
It is very similar to an array, but it is not an actual array.
-
The 'arguments' object has a length property, and we can use it to know how many arguments are passed during the function call.
-
We can access all values of the 'arguments' object like an array index property. For example, arguments[0] give the first value of the object and so on.
-
However, we cannot use Array methods such as slice(), forEach(), map(), filter(), etc., directly on the arguments object.
So, to use all array methods on the arguments object, we need to convert it into a JavaScript array.
Here, we have different approaches to converting the arguments Object to JavaScript array.
Using the Array.from() Method
We will use the Array.from() method in this approach. It converts the iterable object or array-like objects to the array in JavaScript. It creates a copy of the objects and converts them into an array.
Syntax
Array.from(arguments);
Parameters
-
arguments ? arguments object to be converted to an array.
Return ? Array.from() method returns an array from arguments object.
Example
The below example demonstrates the conversion of the arguments object to an array using the Array.from() method.
<html>
<head>
<title>Converting arguments Object to an array</title>
</head>
<body>
<h2>The Array.from() Method</h2>
<p>Array created from arguments Object:</p>
<p id="output"></p>
<script>
let outputDiv = document.getElementById("output");
function convertToArray() {
// store the array of arguments object to resultantArray
const resultantArray = Array.from(arguments);
const mapArray = resultantArray.map((arg) => {
return arg;
});
outputDiv.innerHTML = mapArray;
}
// call function by passing arguments
convertToArray(10, 20, 30);
</script>
</body>
</html>
10,20,30
In the above code, we have passed 10, 20, and 30 as arguments to the function. In the function, we converted the arguments object to an array and used the map function with the converted array to ensure that it is properly converted.
Using Rest Parameters (Recommended)
The rest parameter is the syntax in JavaScript introduced in ES6. We can specify an unknown number of arguments in array form using the rest parameter. Users just need to use the spread operator (...) with the last parameter.
In our case, we need to specify the spread operator with the first parameter to get an array of all arguments.
Syntax
function demo(...args) {
// function body
}
demo(1, 3, 5);
Parameters
-
args ? You can use any variable name instead of args. To access the arguments in array form, use the same variable name inside the function.
Return ? It returns an array. When we pass rest parameters to a function, it converts the parameters object to an array automatically.
Example
The below example demonstrates the use of the spread operator to convert the arguments object to array.
<html>
<head>
<title>Converting arguments Object to an array</title>
</head>
<body>
<h2>Rest Parameters: Converting arguments Object to an array</h2>
<p>A function with rest parameters treats the arguments object as an array.</p>
<p>Array created from arguments Object:</p>
<p id="output"></p>
<script>
function convertToArray(...args) {
document.getElementById("output").innerHTML = args;
}
// call function by passing arguments
convertToArray("tutorials", "point", "simply", "easy", "learning");
</script>
</body>
</html>
tutorials,point,simply,easy,learning
You can see that we have converted the arguments object into an array using the spread operator (...).
Using Manual Array Creation
In this method, we create a new array and assign the values of the arguments object to the new array. As we know, we can access the values of arguments object by indexing, which helps us add values to the new array.
Syntax
newArray[i] = arguments[i];
Algorithm
- Step 1 ? Create a new empty array.
- Step 2 ? Iterate through the object and access values one by one, adding them to the array.
- Step 3 ? Use all array methods with the newly created array.
Example
The below example demonstrates converting the arguments object to an array without using built-in methods in JavaScript.
<html>
<body>
<h2>Converting arguments Object to an array</h2>
<p>Newly created array after applying the sort() method:</p>
<p id="result"></p>
<script>
let resultDiv = document.getElementById("result");
function convertToArray() {
// assign arguments values to the newArray
const newArray = [];
for (var i = 0; i < arguments.length; i++) {
newArray[i] = arguments[i];
}
// sort the newArray
const sortedArray = newArray.sort((a, b) => a - b);
resultDiv.innerHTML = sortedArray;
}
// call function by passing arguments
convertToArray(1, 354, 23, 132, 64, 2, 7, 3, 8, 10);
</script>
</body>
</html>
1,2,3,7,8,10,23,64,132,354
You can see that we manually converted the arguments object to an array and sorted the newly created array.
Comparison
| Method | ES6+ | Ease of Use | Performance | Recommended |
|---|---|---|---|---|
| Rest Parameters (...args) | Yes | Very Easy | Best | Yes |
| Array.from() | Yes | Easy | Good | Yes |
| Manual Loop | No | Complex | Fair | No |
Conclusion
In this tutorial, we explored three methods to convert the arguments object to an array. The rest parameter (...args) is the modern, recommended approach for new code. Use Array.from() when working with existing functions that use the arguments object.
1K+ Views
