arguments: A JavaScript Oddity

Key Takeaways

• arguments’ is a local, array-like object available inside every JavaScript function, containing all the arguments supplied to the function when it was called. It’s not a true array, as it doesn’t possess standard array methods like push and pop.
• Despite its limitations, ‘arguments’ is a powerful tool, allowing the creation of flexible functions that accept a variable number of arguments, which can be converted to a real array using the Array method, slice.
• arguments’ also has a ‘callee’ property that contains a reference to the function that created the ‘arguments’ object, enabling an anonymous function to refer to itself. This can be used to create self-referencing functions and functions with preset arguments.

arguments is the name of a local, array-like object available inside every function. It’s quirky, often ignored, but the source of much programming wizardry; all the major JavaScript libraries tap into the power of the arguments object. It’s something every JavaScript programmer should become familiar with.

Inside any function you can access it through the variable: arguments, and it contains an array of all the arguments that were supplied to the function when it was called. It’s not actually a JavaScript array; typeof arguments will return the value: "object". You can access the individual argument values through an array index, and it has a length property like other arrays, but it doesn’t have the standard Array methods like push and pop.

Create Flexible Functions

Even though it may appear limited, arguments is a very useful object. For example, you can make functions that accept a variable number of arguments. The format function, found in the base2 library by Dean Edwards, demonstrates this flexibility:

function format(string) {
  var args = arguments;
  var pattern = new RegExp("%([1-" + arguments.length + "])", "g");
  return String(string).replace(pattern, function(match, index) {
    return args[index];
  });
};

You supply a template string, in which you add place-holders for values using %1 to %9, and then supply up to 9 other arguments which represent the strings to insert. For example:

format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear");

The above code will return the string "And the papers want to know whose shirt you wear".

One thing you may have noticed is that, in the function definition for format, we only specified one argument: string. JavaScript allows us to pass any number of arguments to a function, regardless of the function definition, and the arguments object has access to all of them.

Convert it to a Real Array

Even though arguments is not an actual JavaScript array we can easily convert it to one by using the standard Array method, slice, like this:

var args = Array.prototype.slice.call(arguments);

The variable args will now contain a proper JavaScript Array object containing all the values from the arguments object.

Create Functions with Preset Arguments

The arguments object allows us to perform all sorts of JavaScript tricks. Here is the definition for the makeFunc function. This function allows you to supply a function reference and any number of arguments for that function. It will return an anonymous function that calls the function you specified, and supplies the preset arguments together with any new arguments supplied when the anonymous function is called:

function format(string) {
  var args = arguments;
  var pattern = new RegExp("%([1-" + arguments.length + "])", "g");
  return String(string).replace(pattern, function(match, index) {
    return args[index];
  });
};

The first argument supplied to makeFunc is considered to be a reference to the function you wish to call (yes, there’s no error checking in this simple example) and it’s removed from the arguments array. makeFunc then returns an anonymous function that uses the apply method of the Function object to call the function specified.

The first argument for apply refers to the scope the function will be called in; basically what the keyword this will refer to inside the function being called. That’s a little advanced for now, so we just keep it null. The second argument is an array of values that will be converted into the arguments object for the function. makeFunc concatenates the original array of values onto the array of arguments supplied to the anonymous function and supplies this to the called function.

Lets say there was a message you needed to output where the template was always the same. To save you from always having to quote the template every time you called the format function you could use the makeFunc utility function to return a function that will call format for you and fill in the template argument automatically:

format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear");

You can call the majorTom function repeatedly like this:

var args = Array.prototype.slice.call(arguments);

Each time you call the majorTom function it calls the format function with the first argument, the template, already filled in. The above calls return:

function makeFunc() {
  var args = Array.prototype.slice.call(arguments);
  var func = args.shift();
  return function() {
    return func.apply(null, args.concat(Array.prototype.slice.call(arguments)));
  };
}

Create Self-referencing Functions

You may think that’s pretty cool, but wait, arguments has one more surprise; it has another useful property: callee. arguments.callee contains a reference to the function that created the arguments object. How can we use such a thing? arguments.callee is a handy way an anonymous function can refer to itself.

var majorTom = makeFunc(format, "This is Major Tom to ground control. I'm %1.");

majorTom("stepping through the door");
majorTom("floating in a most peculiar way");

"This is Major Tom to ground control. I'm stepping through the door."
"This is Major Tom to ground control. I'm floating in a most peculiar way."

repeat is a function that takes a function reference, and 2 numbers. The first number is how many times to call the function and the second represents the delay, in milliseconds, between each call. Here's the definition for repeat:

However, I want to create a special version of that function that repeats 3 times with a delay of 2 seconds between each time. With my repeat function, I can do this:

function repeat(fn, times, delay) {
  return function() {
    if(times-- > 0) {
      fn.apply(null, arguments);
      var args = Array.prototype.slice.call(arguments);
      var self = arguments.callee;
      setTimeout(function(){self.apply(null,args)}, delay);
    }
  };
}

The result of calling the somethingWrong function is an alert box repeated 3 times with a 2 second delay between each alert.

function format(string) {
  var args = arguments;
  var pattern = new RegExp("%([1-" + arguments.length + "])", "g");
  return String(string).replace(pattern, function(match, index) {
    return args[index];
  });
};

Frequently Asked Questions about JavaScript Arguments

What is the ‘arguments’ object in JavaScript?

The ‘arguments’ object is a local variable available within all non-arrow functions in JavaScript. It contains an array-like structure with all the arguments passed to the function. This object is useful when a function needs to handle variable numbers of arguments. It’s important to note that the ‘arguments’ object is not an actual array, but it can be converted to one if needed.

How can I convert the ‘arguments’ object into an array?

Although the ‘arguments’ object behaves like an array, it does not inherit from the Array prototype, so array methods cannot be directly applied to it. However, you can convert it into an array using the Array.from() method or the spread operator (…). Here’s an example:

function convertArgsToArray() {
var argsArray = Array.from(arguments);
// or
var argsArray = [...arguments];
}

Can I use the ‘arguments’ object in arrow functions?

No, the ‘arguments’ object is not available within arrow functions. Arrow functions do not have their own ‘arguments’ object. However, they can access the ‘arguments’ object from the nearest non-arrow parent function.

What is the ‘typeof’ operator in JavaScript?

The ‘typeof’ operator in JavaScript is used to determine the data type of a given value or variable. It returns a string indicating the type of the unevaluated operand. For example, ‘typeof 3’ will return ‘number’, and ‘typeof “hello”‘ will return ‘string’.

How can I use ‘typeof’ with ‘arguments’ in JavaScript?

You can use the ‘typeof’ operator to check the type of each argument passed to a function. Here’s an example:

function checkArgsType() {
for (var i = 0; i console.log(typeof arguments[i]);
}
}

What does ‘arguments[0]’ mean in JavaScript?

arguments[0]’ refers to the first argument passed to a function. Similarly, ‘arguments[1]’ refers to the second argument, and so on. If no arguments are passed, ‘arguments[0]’ will be ‘undefined’.

Can I modify the ‘arguments’ object in JavaScript?

Yes, you can modify the ‘arguments’ object in non-strict mode. However, it’s generally not recommended because it can lead to confusing and hard-to-debug code. In strict mode, any attempt to modify the ‘arguments’ object will throw an error.

What is the length property of the ‘arguments’ object?

The length property of the ‘arguments’ object returns the number of arguments that were passed to the function. It’s useful when you need to iterate over the arguments or determine how many arguments were passed.

Can I use the ‘arguments’ object with default parameters in JavaScript?

Yes, but with a caveat. If a function with default parameters is called with fewer arguments than there are parameters, the ‘arguments’ object will only contain the actual arguments passed, not the default values.

What is the ‘callee’ property of the ‘arguments’ object?

The ‘callee’ property of the ‘arguments’ object is a reference to the currently executing function. This property is deprecated and should not be used in new code. Instead, you can use named function expressions or arrow functions.

The above is the detailed content of arguments: A JavaScript Oddity. For more information, please follow other related articles on the PHP Chinese website!