Function Arguments

Arguments are the actual values you hand to a function when you call it. The Parameters lesson covered the receiving end. This lesson covers the sending end: how arguments are matched up, what happens when the count does not match, how to handle any number of them, and how to pass a whole list at once.

// Quick Recap

function multiply(a, b) {    // a and b are PARAMETERS
  return a * b;
}
let result = multiply(4, 5);  // 4 and 5 are ARGUMENTS

The argument 4 is assigned to the parameter a, and 5 to b. Parameters are names; arguments are values.

// Order Matters

Arguments are assigned to parameters in the order they appear. Swap them and you get a different answer:

function subtract(a, b) {
  return a - b;
}
console.log(subtract(10, 5));
console.log(subtract(5, 10));

// Arguments Can Be Variables

An argument does not have to be a literal value. It can be a variable, or any expression. JavaScript works out its value first, then passes that value in:

let x = 5;
let y = 6;
console.log(multiply(x, y));
console.log(multiply(x + 1, 2));

The variable names do not need to match the parameter names. Inside multiply, the values are simply called a and b.

// Argument Rules

JavaScript is very relaxed about arguments:

• Function definitions do not specify data types for arguments
• Functions do not type check the arguments passed in
• Functions do not check the number of arguments received

So incorrect arguments give incorrect answers, silently:

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}
console.log(toCelsius("John"));     // wrong type
console.log(multiply(4));             // too few: b is undefined
console.log(multiply(1, 2, 3, 4));    // too many: extras ignored

// Handling Missing Arguments

Missing arguments become undefined. Sometimes that is fine, but usually it is better to give the parameter a fallback value. Before 2015, that meant checking for undefined by hand. You will still see this in older code:

function myFunction(x, y) {
  if (y === undefined) {
    y = 2;
  }
  return x * y;
}
console.log(myFunction(5));

Since ES2015, a default parameter does the same job in one step: function myFunction(x, y = 2). Use that in your own code.

// The arguments Object

Inside a regular function, a built-in variable named arguments holds every value that was passed, whether or not it has a parameter name. With it, a function can accept any number of values. Here is a function that finds the highest of however many numbers you give it:

function findMax() {
  let max = -Infinity;
  for (let i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}

console.log(findMax(1, 123, 500, 115, 44, 88));

Starting max at -Infinity guarantees the first real number is bigger. (Call findMax() with no arguments at all and that is exactly what you get back: -Infinity.)

// The Modern Way: Rest Parameters

A rest parameter (...name) does the same job as arguments, but gives you a real array, with a name you chose:

function sum(...args) {
  let total = 0;
  for (const arg of args) total += arg;
  return total;
}

console.log(sum(4, 9, 16, 25, 29, 100, 66, 77));

// Spreading an Array into Arguments

If your values are already in an array, three dots in the call spread them out as separate arguments:

const scores = [72, 95, 88];
console.log(Math.max(scores));      // one argument: the whole array
console.log(Math.max(...scores));   // three arguments: 72, 95, 88

// Passed by Value, or by Reference?

Simple values (numbers, strings, booleans) are passed by value: the function gets a copy, so changing it inside has no effect outside. Arrays and objects behave as if they are passed by reference: the function gets access to the very same array, so changes inside are visible outside:

function tryToChange(num, list) {
  num = 100;          // changes the local copy only
  list.push(100);     // changes the original array
}

let n = 1;
let arr = [1];
tryToChange(n, arr);
console.log(n);
console.log(arr);

(push adds an item to the end of an array; the Arrays section covers it.) Technically, JavaScript passes everything by value, but the "value" of an array or object is a reference to it, which is why it acts shared.

// Common Mistakes

• Confusing parameters and arguments: parameters are names, arguments are values
• Forgetting the order: arguments are assigned by position, not by name
• Missing arguments: use default values to avoid undefined

// Quick Check

function count() {
  return arguments.length;
}
console.log(count("a", 2, true, null));

// Try It

▶ Open Playground

1. Click Open Playground. Call multiply with one, two, and four arguments. Note each result
2. Rewrite findMax using a rest parameter instead of arguments
3. Find the smallest value in an array with Math.min and spread
4. Pass a number and an array into a function that changes both. Log both afterward and explain the difference