In JavaScript, a function may be called with any number of arguments, no matter how many of them are listed.

For instance:

function go(a,b) {
  alert("a="+a+", b="+b)
}

go(1)     // a=1, b=undefined
go(1,2)   // a=1, b=2
go(1,2,3) // a=1, b=2, extra argument is not listed

Arguments which are not provided become undefined. So we can see if the function is called with no arguments:

function check(x) {
  alert(x === undefined) // ok now I know there is no x
}

check()

function log(a) {
  ...
}

function log(a,b,c) {
  ...
}

log(a) // first function is called
log(a,b,c) // second function is called

Accessing the unnamed arguments

How do we get more arguments than listed in parameters?

There is a special pseudo-array inside each function called arguments.

It contains all parameters by their number: arguments[0], arguments[1] etc.

Here is an example of how to list all arguments, no matter how many of them:

function sayHi() {
  for(var i=0; i<arguments.length; i++) {
    alert("Hi, " + arguments[i])
  }
}
 
sayHi("Cat", "Alice")  // 'Hi, Cat', then 'Hi, Alice'

All parameters are in arguments, even if the function names some of them: sayHi(a,b,c).

The guts of arguments

A frequent beginner mistake is to use Array methods on it. Shortly, you can’t:

function sayHi() {
  var a = arguments.shift() // error! arguments is not Array
  alert(a)
}

sayHi()

If it isn’t Array, then what it is? Let’s use the [[Class]] property to see it:

(function() {

  alert( {}.toString.call(arguments) )  // [object Arguments] 

})()

This type is internally almost same as Object. It only looks like array, because it’s keys are numeric and it has length, but here the similarity ends.

Using arguments as Array

There is still a way to call array methods on arguments:

function sayHi() {
  var args = [].join.call(arguments, ':')
  alert(args)  // 1:2:3
}

sayHi(1,2,3)

Here we execute the join method of Array in the context of arguments, providing ':' as first argument.

It works, because internally most array methods (and join) use numeric indexes and length to work.

The join would work on a custom object as well, if the format is correct:

var obj = { 0: "A", 1: "B", length: 2 }

alert( [].join.call(obj) ) // "A,B"

Making a real Array

The arr.slice(start, end) copies the part of arr from start to end into the new array.

It can be called in the context of arguments to copy all elements into a real array:

function sayHi() {
  var args = [].slice.call(arguments) // slice without parameters copies all

  alert( args.join(':') ) // now .join works
}

sayHi(1,2)

f(1)

function f(x) {
  arguments[0] = 5
  alert(x) // 5, updating arguments changed x
}

f(1)

function f(x) {
  x = 5
  alert(arguments[0]) // 5, update of x reflected in arguments
}

sayHi(1)

function sayHi(x) {
  alert(x)           // 1
  [].shift.call(arguments)  
  alert(x)           // undefined, no x any more :/  
}

Default values

If you want a function parameter to be optional, there are two ways.

1. First, you could check if for undefined and reassign:
   

   function sayHi(who) {
     if (who === undefined) who = 'me' 
       
     alert(who)  
   }
   

2. Or, use the OR || operator:

   function sayHi(who) {
     who = who || 'me'  // if who is falsy, returns 'me'
       
     alert(who)  
   }
   sayHi("John")
   sayHi()  // 'me'
   

   
   This way works great for parameters which are either not given or true. It happens most of time in real life.

alert( Math.max(1, -2, 7, 3) )

var arr = [1, -2, 7, 3]
/* your code to output the greatest value of arr */

var arr = [1, -2, 7, 3]

alert( Math.max.apply(Math, arr) ) // (*)

var arr = [1, -2, 7, 3]

alert( Math.max.apply(0, arr) ) // dummy '0' context

Keyword arguments

Imagine you’ve got a function with several arguments. And most of them will have default values.

Like the following:

function showWarning(width, height, title, contents, showYesNo) {
  width = width || 200; // default values
  height = height || 100;
  
  var title = title || "Warning";

  ...
}

Here we have a function to show a warning window. It allows to specify width, height, title, textual contents and show the button if showYesNo is set.

Most parameters have default values.

Here is how we use it:

showWarning(null, null, null, "Warning text", true)
// or
showWarning(200, 300, null, "Warning text")

The problem is: people tend to forget arguments order, and what they mean.

Imagine you have 10 arguments and most are optional. The function call becomes really terrifying.

The technique of keyword arguments exists in Python, Ruby and many other languages.

In JavaScript, it is implemented with a parameters object:

function showWarning(options) {
  var width = options.width || 200  // defaults 
  var height = options.height || 100
  
  var title = options.title || "Warning"

  // ...
}

Calling such function is easy. You just pass an object of arguments like this:

showWarning({ 
  contents: "Text", 
  showYesNo: true
})

Another bonus is that the arguments object can be reconfigured and reused:

var opts = {
  width: 400,
  height: 200, 
  contents: "Text", 
  showYesNo: true
}

showWarning(opts)

opts.contents = "Another text"
showWarning(opts) // another text with same options

Keyword arguments are employed in most frameworks.

Special arguments properties

arguments.callee

There is an interesting property of arguments, namely arguments.callee. It references the function which is being run.

Usually it is used for recursion in anonymous functions.

For example, setTimeout(func, ms) is a built-in function which calls func after ms microseconds.

setTimeout(  
  function() { alert(1) }, // alerts 1 after 1000 ms (=1 second)
  1000
)

The function has no name. To call it recursively 3 times, let’s use arguments.callee:

var i = 1
setTimeout(  
  function() { 
    alert(i) 
    if (i++<3) setTimeout(arguments.callee, 1000)
  }, 
  1000
)

Another example is factorial:

// factorial(n) = n*factorial(n-1)
var func = function(n) {  
  return n==1 ? 1 : n*arguments.callee(n-1)  
}

arguments.callee.caller

The property arguments.callee.caller keeps the reference to a calling function.

In the example below, arguments.callee.caller references the calling function of g, that is f.

f()

function f() {
  alert(arguments.callee.caller) // undefined
  g()
}

function g() {
  alert(arguments.callee.caller) // f
}