I am very sure that in JavaScript interviews, you must have gone through discussions on functions. It is obvious because functions are very core of JavaScript. Whenever there is a discussion on functions, discussion on arguments object is mandatory. If you do not understand, how arguments works, you do not understand how functions works in JavaScript.

Let us start with the function given below:

Above, you have created add function which takes two input parameters and returns a result adding these two numbers. It is the simplest JavaScript function you can think of.

In above functions besides num1 and num2 there is one local variable available arguments object. The arguments object is local variable, which is available within all functions. Therefore, each JavaScript functions has arguments object variable, which is used to access all the parameters passed to the function.

So, you can rewrite above add function to achieve same output using the arguments object as shown in the listing below:

image

In JavaScript, arguments object variable is local to the function and it is an ARRAY LIKE object but it is NOT AN ARRAY. It supports property like length and items can be accessed using square bracket. However, other array methods such as push, pop etc. are not supported.

Key features of arguments object are as follows:

  1. It is an array like object but not an array.
  2. Number of parameters passed to function can be find using the argument.length inside the function.
  3. Other arrays methods like push, pop etc. are not allowed on arguments object.
  4. If there are three parameters passed to function then using argument object they can be accessed as :
  1. arguments[0]
  2. arguments[1]
  3. arguments[2]

Consider the below function foo,

In above function, number of parameters passed to function foo is find-using arguments.length and all passed parameters are accessed in the loop using arguments[i]. For above code output would be as shown in the image below:

image

If you try to perform other array operations like pop, push etc. on the arguments object, JavaScript will throw exception.

Code listed above will throw you exception as shown in the image below:

image

Keep in mind that using the square bracket you can change value of a specific item in arguments object. Let us consider the code listed below:

In above code snippet,

num1= arguments[0]

num2 = arguments[1]

So, if we change value of arguments[0], value of num1 will be also changed. Also you seen that in the function value of passed parameter can be changed using the square bracket. Therefor output of above code snippet would be 10 instead of 5 as shown in the image below:

image

Now, you can say that arguments object is not an array; rather it is array like object. It does not have any array properties except of length property.

image

Besides length property arguments object has other properties argument.callee : It returns the currently executing function.

Output of above code would be function foo as shown in the below image:

image

Converting arguments object to array

You may come across requirement to convert arguments object to array. You can do that using the Array.from function.

Output of above code snippet would be 78, which last parameter is passed to the function. Other example, we could take to write a function, which will concatenate all the strings passed to it,

Above code snippet will give you output as shown in the image below:

image

In real scenarios, you may have to convert arguments object to array to use it in ways that are more effective. Last but not least keep in mind that arguments are an object. Therefore, when you print type of arguments, you will get output object.

image

Having understanding of arguments object will help you to write better JavaScript functions. This is one of my favorite feature and I have seen it used a lot. I hope now you will be able to answer questions around arguments object. Thanks for reading.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s