Параметры и аргументы в JavaScript: значения по умолчанию

Функции почти всегда принимают входные данные. Для этого используются параметры и аргументы. Этот шаг разбирает базовые правила, значения по умолчанию и несколько практичных нюансов, которые часто встречаются в реальном коде.

Параметры и аргументы: в чем разница

• Параметры - переменные в объявлении функции.
• Аргументы - реальные значения, которые передаются при вызове.

function sum(a, b) {      // a и b - параметры
  return a + b;
}

console.log(sum(2, 3));   // 2 и 3 - аргументы

Что будет, если аргумент не передать

Если аргумент не передан, соответствующий параметр получает значение undefined.

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

console.log(greet()); // "Hello, undefined"

Такой результат обычно не нужен, поэтому входные значения часто проверяют или задают значения по умолчанию.

Значения по умолчанию (default parameters)

Значение по умолчанию задается прямо в объявлении функции.

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

console.log(greet());        // "Hello, Guest"
console.log(greet("Sam"));   // "Hello, Sam"

Значение по умолчанию используется только тогда, когда аргумент равен undefined.

function show(value = "default") {
  return value;
}

console.log(show());            // "default"
console.log(show(undefined));   // "default"
console.log(show(null));        // null
console.log(show(""));          // ""

Несколько параметров и значения по умолчанию

Значения по умолчанию удобно использовать в настройках, где многие параметры необязательны.

function formatPrice(value, currency = "USD", precision = 2) {
  return value.toFixed(precision) + " " + currency;
}

console.log(formatPrice(10));           // "10.00 USD"
console.log(formatPrice(10, "EUR"));    // "10.00 EUR"
console.log(formatPrice(10, "EUR", 0)); // "10 EUR"

Порядок параметров важен

Аргументы привязываются к параметрам по позиции.

function range(from, to) {
  return [from, to];
}

console.log(range(1, 5)); // [1, 5]

Если передать значения в другом порядке, результат будет другим. Поэтому важна договоренность о порядке параметров или использование объектов (это будет полезно позже).

Сколько аргументов можно передать

JavaScript не требует, чтобы количество аргументов совпадало с количеством параметров.

Передали меньше

Параметры без значения будут undefined.

function sum(a, b) {
  return a + b;
}

console.log(sum(2)); // NaN, потому что 2 + undefined

Передали больше

Лишние аргументы не пропадают, но не будут доступны через именованные параметры.

function first(a) {
  return a;
}

console.log(first(1, 2, 3)); // 1

Rest-параметры (…rest)

Если нужно принять “сколько угодно” аргументов, используется rest-параметр.

function sumAll(...nums) {
  let total = 0;

  for (let i = 0; i < nums.length; i += 1) {
    total += nums[i];
  }

  return total;
}

console.log(sumAll(1, 2, 3)); // 6
console.log(sumAll(10, 20));  // 30

...nums собирает все переданные аргументы в массив.

Важно: rest-параметр может быть только один и должен быть последним.

function demo(a, ...rest) {
  return [a, rest];
}

console.log(demo("x", 1, 2, 3)); // ["x", [1, 2, 3]]

Частые паттерны и нюансы

Значения по умолчанию через ||

Раньше часто писали value = value || "default", но у этого есть минус: 0 и "" считаются falsy и будут заменены.

function showPage(page) {
  const safePage = page || 1;
  return safePage;
}

console.log(showPage(0)); // 1 (не всегда ожидаемо)

Значения по умолчанию в параметрах - более предсказуемы.

Значения по умолчанию через ??

Если нужно подставлять значение только для null/undefined, часто используют ??.

function showPage(page) {
  const safePage = page ?? 1;
  return safePage;
}

console.log(showPage(0));         // 0
console.log(showPage(undefined)); // 1
console.log(showPage(null));      // 1

Что стоит запомнить

• Параметры - в объявлении, аргументы - при вызове.
• Если аргумент не передан, параметр будет undefined.
• Значения по умолчанию работают, когда аргумент undefined.
• Лишние аргументы можно собирать в массив через ...rest.
• Для подстановки значений часто удобнее default parameters и ??, чем ||.