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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.



Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}