JavaScriptParameters & Arguments

Parameters & Arguments

The words parameter and argument are often used interchangeably, but they refer to two different sides of the same call. Understanding the difference — and the small old-school arguments object — makes function signatures click.

Parameter vs argument
  • Parameter — a name listed in the function definition. It is a slot that will be filled when the function is called.

  • Argument — the actual value you pass into that slot at call time.

JS
function greet(name) {        // `name` is the parameter
  console.log("Hi, " + name);
}

greet("Ada");                  // "Ada" is the argument
JavaScript is permissive about counts

Unlike many languages, JavaScript does not enforce that the number of arguments matches the number of parameters.

JS
function add(a, b) {
  return a + b;
}

console.log(add(2, 3));         // 5  — exact match
console.log(add(2));            // NaN — `b` is undefined, 2 + undefined = NaN
console.log(add(2, 3, 99, 100)); // 5  — extra arguments ignored

Two consequences fall out of this: you must guard against missing values (typically with default parameters), and you can write variadic functions that accept "any number of arguments".

The `arguments` object

Inside every regular function (not arrow), there is an automatically-created array-like value called arguments that holds whatever was actually passed in. It predates rest parameters and is rarely the best tool today, but you will see it in older code.

JS
function describe() {
  console.log("count:", arguments.length);
  for (let i = 0; i < arguments.length; i++) {
    console.log(i, "=", arguments[i]);
  }
}

describe("Ada", 36, true);
count: 3
0 = Ada
1 = 36
2 = true
`arguments` is array-like, not an array

It has a length and indexed access, but does not have map, filter, forEach or other array methods. Convert it first if you need those:

JS
function biggest() {
  const list = Array.from(arguments);     // or: [...arguments]
  return Math.max(...list);
}

console.log(biggest(3, 9, 1, 7));   // 9
Arrow functions have no `arguments`

If you write arguments inside an arrow function, you do not get the local arguments — you get the arguments of the surrounding regular function (or a ReferenceError at the top level).

JS
const log = () => {
  // console.log(arguments);   // ReferenceError at module top level
};

function wrapper() {
  const inner = () => arguments[0];   // refers to wrapper's arguments
  return inner();
}

console.log(wrapper("from-wrapper"));   // "from-wrapper"
The modern replacement: rest parameters

For new code, prefer rest parameters (...name). They give you a real array, they work in arrow functions, and the function signature documents that it accepts variable arguments.

JS
const biggest = (...nums) => Math.max(...nums);

console.log(biggest(3, 9, 1, 7));   // 9

Rest parameters and spread are covered in detail in Rest & Spread.

A quick look at default values

You can give a parameter a default value, used when the caller omits the argument or passes undefined.

JS
function greet(name = "friend") {
  return "Hello, " + name;
}

console.log(greet());          // "Hello, friend"
console.log(greet("Ada"));     // "Hello, Ada"
console.log(greet(undefined)); // "Hello, friend" — undefined triggers the default
console.log(greet(null));      // "Hello, null"   — null does not trigger the default
One subtle rule
Default parameters are triggered by `undefined` only, not by any other "empty" value. That detail is the whole subject of [Default Parameters](/javascript/default-parameters).
A clear signature is documentation
A function whose parameters are named meaningfully — `createUser(name, email)` — is much easier to use than one that says `createUser(a, b)`. Editors and TypeScript also use those names in tooltips.