The arguments object is an array-like object that represents the arguments passed in when invoking a function. This array-like object does not have the array prototype chain, hence it cannot use any of the array methods. This object can be converted into a proper array using two approaches:
Method 1: Using the Array.from() method: The Array.from() method can be used to create a new array that is a shallow-copy of an array-like or iterable object. It contains three parameters that consist array-like object to be converted, an optional map function that can be called on every element of the array and a “this” argument that can be used with the map function. The arguments object is passed as an argument to this method and it will return the array form of the object. This array has the array prototype chain and can be used with the various array methods.
Syntax:
argumentsArray = Array.from(arguments)
Example:
HTML
<!DOCTYPE html><html> <head> <title> How to convert arguments object into an array in JavaScript? </title></head><body> <h1 style="color: green"> neveropen </h1> <b> How to convert arguments object into an array in JavaScript? </b> <p> Click on the button to convert the arguments object to an Array and also use the Array join() method. </p> <p>The arguments passed are '1, "Two", 3'</p> <button onclick="convertToArray(1, 'Two', 3)"> Convert to Array </button> <script type="text/javascript"> function convertToArray(a, b, c) { console.log("The arguments object:") console.log(arguments); argumentsArray = Array.from(arguments); console.log("The arguments object as array:") console.log(argumentsArray); // Example of using the join() method joinedArray = argumentsArray.join(', '); console.log("Using join() on array: ", joinedArray); } </script></body></html> |
Output:
- Display:
- Console:
Method 2: Using Array.prototype.slice() method: The Array.prototype.slice() method is used to return a portion of an array into a new array object. This array would be a shallow copy of the original array. This method has two optional arguments that indicate the beginning and ending index of the array. If the arguments are omitted, the indices are set to the first and last index of the array. This method can be used to convert the arguments object by binding this method to the object. The binding is done using the call() function and passing the array-like object as an argument to it. It will return an array form of the arguments object. This array has the array prototype chain and can be used with the various array methods.
Syntax:
argumentsArray = Array.prototype.slice.call(arguments)
Example:
HTML
<!DOCTYPE html><html><head> <title> How to convert arguments object into an array in JavaScript? </title></head><body> <h1 style="color: green"> neveropen </h1> <b> How to convert arguments object into an array in JavaScript? </b> <p> Click on the button to convert the arguments object to an Array and also use the Array join() method. </p> <p>The arguments passed are '1, "Two", 3'</p> <button onclick="convertToArray(1, 'Two', 3)"> Convert to Array </button> <script type="text/javascript"> function convertToArray(a, b, c) { console.log("The arguments object:") console.log(arguments); argumentsArray = Array.prototype.slice.call(arguments); console.log("The arguments object as array:") console.log(argumentsArray); // Example of using the join() method joinedArray = argumentsArray.join(', '); console.log("Using join() on array: ", joinedArray); } </script></body></html> |
Output:
- Display:
- Console:
Method#3 : Using Spread Opertor: Spread operator allows an iterable to expand in place where 0+ argument are expected. This operator expands the arguments in place and we use square brackets to capture them and make array with them. We will expand the arguments object in place and form array with them.
Syntax:
var Array_obj = [...arguments];
Example:
HTML
<!DOCTYPE html><html> <head> <title> How to convert arguments object into an array in JavaScript? </title></head><body> <h1 style="color: green"> neveropen </h1> <b> How to convert arguments object into an array in JavaScript? </b> <p> Click on the button to convert the arguments object to an Array and also use the Array join() method. </p> <p>The arguments passed are '1, "Two", 3'</p> <button onclick="convertToArray(1, 'Two', 3)"> Convert to Array </button> <script type="text/javascript"> function convertToArray(a, b, c) { console.log("The arguments object:") console.log(arguments); argumentsArray = [...argument]; console.log("The arguments object as array:") console.log(argumentsArray); // Example of using the join() method joinedArray = argumentsArray.join(', '); console.log("Using join() on array: ", joinedArray); } </script></body></html> |
Output:
Spread operator
- Console Display:
Spread operator
Method#4 : Using Object.values() method: The Object.values method is used to make an array whose value comes from the value of object.
Syntax:
var Array_obj = Object.values( obj );
Example:
HTML
<!DOCTYPE html><html> <head> <title> How to convert arguments object into an array in JavaScript? </title></head><body> <h1 style="color: green"> neveropen </h1> <b> How to convert arguments object into an array in JavaScript? </b> <p> Click on the button to convert the arguments object to an Array and also use the Array join() method. </p> <p>The arguments passed are '1, "Two", 3'</p> <button onclick="convertToArray(1, 'Two', 3)"> Convert to Array </button> <script type="text/javascript"> function convertToArray(a, b, c) { console.log("The arguments object:") console.log(arguments); argumentsArray = Object.values(arguments); console.log("The arguments object as array:") console.log(argumentsArray); // Example of using the join() method joinedArray = argumentsArray.join(', '); console.log("Using join() on array: ", joinedArray); } </script></body></html> |
Output:
Object.values method
- Console output:
Object.values method
