JavaScript Arguments

The arguments object in JavaScript is a local variable in any function that provides some nice features we can use in our code. Here is the list of its properties and related properties of the Function object.

arguments itself returns an object that looks like an array (but not really an array) of the arguments passed to the function.

Prior to JavaScript 1.4 the Function object also had a similar arguments property, which is now deprecated.

However the Function object comes with a few other useful properties that we can still use to get argument related data.

function callTaker(a, b, c, d, e) {
  // arguments properties
  console.log(arguments);
  console.log(arguments.length);
  console.log(arguments.callee);
  console.log(arguments[1]);
  // Function properties
  console.log(callTaker.length);
  console.log(callTaker.caller);
  console.log(arguments.callee.caller);
  console.log(arguments.callee.caller.caller);
  console.log(callTaker.name);
  console.log(callTaker.constructor);
}

function callMaker() {
  callTaker("foo", "bar", this, document);
}

function init() {
  callMaker();
}

For demonstration purposes, you can <a href="" onClick={e => initDemo(e)}>run the init function above and view the logs in FireBug.

Arguments object and its properties

arguments; // returns ["foo", "bar", Window, Document]
arguments.length; // returns 4

Even though our function has a signature with 5 arguments, length returns only 4 here. This is because the caller sent us only 4 arguments. See below for how we can use Function’s length property to find the number of expected arguments.

arguments.callee; //returns callTaker(a, b, c, d, e)

Callee shows us the signature of the currently executing function and is useful when trying to make recursive calls to a function within its own body.

arguments[1]; // returns bar

Arguments can also be set for functions in an array like format. For example you can set the second argument like this:

arguments[1] = "moo";

callTaker.length; // returns 5

This is the expected number of arguments.

callTaker.caller; // is the same as arguments.callee.caller and returns callMaker()

We can go up the stack trace and get the caller of the caller etc. For example we can find the function that called callMaker using arguments.callee.caller.caller which returns init().

callTaker.name; // returns callTaker
callTaker.constructor; // returns Function()

Since we have not modified the basic behavior, we see the built in function that creates an object’s prototype for our function, which is the Function object.

Basic Usage Sample

let dataArray = ["One", "Two", "Three", "Four"];

function createList(list) {
  if (arguments.length == 3) {
    var result = "<" + arguments[1] + ">";
    for (var i = 0; i < arguments[2].length; i++) {
      result += "<li>" + arguments[2][i] + "</li>";
    }
    result += "</" + arguments[1] + "l>";
    document.getElementById(arguments[0]).innerHTML = result;
  }
}

function makeList() {
  createList("list_HTML", "ul", dataArray);
}

References:

Arguments object and its properties

Function object and its argument related properties

Basic Usage Sample