Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Quick Tip – The JavaScript arguments Object

DZone's Guide to

Quick Tip – The JavaScript arguments Object

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

Yesterday I delivered a session about JavaScript and mentioned the arguments object. I was surprised that most of the attendees didn’t know the object so I decided to write this post.

The arguments Object

The arguments object is available inside every JavaScript function body. As its name implies, it stores the arguments that the function receives. For example, if a function is passed two arguments, you can use them by their name or using the following code:

function foo(first, second) {
   console.log(arguments[0]); // will log the data of first 
   console.log(arguments[1]); // will log the data of second
}
You can also set the arguments using the arguments object. The following code will set the first argument to 1: 
function foo(first, second) {
   arguments[0] = 1;
   console.log(first); // will output 1
}

Even though you might think that the arguments object is an array, it isn’t the case and non of JavaScript array functions exists in that object. The arguments object has only two properties:

  • length – the number of arguments received by the function
  • callee – the currently executing function 

arguments Use Examples

So, you might think what is the big deal with the arguments object? The answer is the dynamic nature of JavaScript language. For example, here is a sum function that can receive any number of arguments:

function sum() {
   var result = 0;
   for (var i = 0; i < arguments.length; i++) {
      result += arguments[i];
   }
   return result;
}
 
console.log(sum()); // will output 0
console.log(sum(1)); // will output 1
console.log(sum(1, 2)); // will output 3
console.log(sum(1, 2, 3)); // will output 6

Another example can be declaring an API function that might get an argument to set some element’s value or else it returns the element’s value:

function val(htmlElement) {
   if (arguments[1]) {
      htmlElement.value = arguments[1];  
   }
   else {
      return htmlElement.value;
   }
}
 
var elm = document.getElementById('elm'); 
console.log(val(elm));
val(elm, "Hello");
console.log(val(elm));

If the webpage has a elm textbox the value of the textbox will be logged and then changed to “Hello”.

Summary

The arguments object stores the function passed arguments and is useful part of the JavaScript language. It is mainly used in API functions and can help in function overloading behavior.



Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Gil Fink, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}