Значения параметров по умолчанию

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

Попробуйте

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));
// Expected output: 10

console.log(multiply(5));
// Expected output: 5

Синтаксис

function fnName(param1 = defaultValue1, /* …, */ paramN = defaultValueN) {
  // …
}

Описание

В JavaScript значения параметров функций по умолчанию равны undefined. Однако часто бывает полезно установить другое значение по умолчанию. Здесь могут помочь значения параметров по умолчанию.

В следующем примере, если при вызове multiply не передано значение для b, значение b будет undefined при вычислении a * b, а multiply вернет NaN.

function multiply(a, b) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5); // NaN !

В прошлом распространенной стратегией установки значений по умолчанию было тестирование значений параметров в теле функции и присвоение значения, если они undefined. В следующем примере b устанавливается в 1, если multiply вызывается только с одним аргументом:

function multiply(a, b) {
  b = typeof b !== "undefined" ? b : 1;
  return a * b;
}

multiply(5, 2); // 10
multiply(5); // 5

С значениями параметров по умолчанию проверки в теле функции больше не требуются. Теперь вы можете присвоить 1 в качестве значения по умолчанию для b в заголовке функции:

function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5); // 5
multiply(5, undefined); // 5

Параметры по-прежнему устанавливаются слева направо, перезаписывая параметры по умолчанию, даже если есть последующие параметры без значений по умолчанию.

function f(x = 1, y) {
  return [x, y];
}

f(); // [1, undefined]
f(2); // [2, undefined]

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

Это означает, что на более ранние параметры можно ссылаться в инициализаторах более поздних параметров. Однако функции и переменные, объявленные в теле функции, не могут быть доступны из инициализаторов параметров по умолчанию; попытка сделать это вызовет во время выполнения ReferenceError. Это также включает переменные, объявленные с помощью var в теле функции.

Например, следующая функция вызовет ReferenceError при вызове, потому что значение параметра по умолчанию не имеет доступа к дочерней области видимости тела функции:

function f(a = go()) {
  function go() {
    return ":P";
  }
}

f(); // ReferenceError: go is not defined

Эта функция выведет значение параметра a, потому что переменная var a поднимается только в верхнюю часть области видимости, созданной для тела функции, а не в родительскую область видимости, созданную для списка параметров, поэтому ее значение невидимо для b.

function f(a, b = () => console.log(a)) {
  var a = 1;
  b();
}

f(); // undefined
f(5); // 5

Значение параметра по умолчанию позволяет использовать любое выражение, но вы не можете использовать await или yield, которые приостановят вычисление выражения по умолчанию. Параметр должен быть инициализирован синхронно.

async function f(a = await Promise.resolve(1)) {
  return a;
}

Примеры

Передача undefined по сравнению с другими ложными значениями

Во втором вызове этого примера, даже если первый аргумент явно установлен в undefined (но не null или другие ложные значения), значение аргумента num все равно будет значением по умолчанию.

function test(num = 1) {
  console.log(typeof num);
}

test(); // 'number' (num is set to 1)
test(undefined); // 'number' (num is set to 1 too)

// test with other falsy values:
test(""); // 'string' (num is set to '')
test(null); // 'object' (num is set to null)

Вычисляется во время вызова

Аргумент по умолчанию вычисляется во время вызова. В отличие от Python (например), новый объект создается каждый раз, когда вызывается функция.

function append(value, array = []) {
  array.push(value);
  return array;
}

append(1); // [1]
append(2); // [2], not [1, 2]

Это применимо даже к функциям и переменным:

function callSomething(thing = something()) {
  return thing;
}

let numberOfTimesCalled = 0;
function something() {
  numberOfTimesCalled += 1;
  return numberOfTimesCalled;
}

callSomething(); // 1
callSomething(); // 2

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

Определенные ранее (слева) параметры доступны для более поздних параметров по умолчанию:

function greet(name, greeting, message = `${greeting} ${name}`) {
  return [name, greeting, message];
}

greet("David", "Hi"); // ["David", "Hi", "Hi David"]
greet("David", "Hi", "Happy Birthday!"); // ["David", "Hi", "Happy Birthday!"]

Эту функциональность можно аппроксимировать следующим образом, что демонстрирует, как обрабатываются многие граничные случаи:

function go() {
  return ":P";
}

function withDefaults(
  a,
  b = 5,
  c = b,
  d = go(),
  e = this,
  f = arguments,
  g = this.value,
) {
  return [a, b, c, d, e, f, g];
}

function withoutDefaults(a, b, c, d, e, f, g) {
  switch (arguments.length) {
    case 0:
    case 1:
      b = 5;
    case 2:
      c = b;
    case 3:
      d = go();
    case 4:
      e = this;
    case 5:
      f = arguments;
    case 6:
      g = this.value;
  }
  return [a, b, c, d, e, f, g];
}

withDefaults.call({ value: "=^_^=" });
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]

withoutDefaults.call({ value: "=^_^=" });
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]

Деструктурированный параметр с присвоением значения по умолчанию

Вы можете использовать присвоение значения по умолчанию с синтаксисом деструктуризации.

Распространенный способ сделать это — установить пустой объект/массив в качестве значения по умолчанию для деструктурированного параметра; например: [x = 1, y = 2] = []. Это позволяет не передавать ничего в функцию и все равно иметь заполненные значения:

function preFilledArray([x = 1, y = 2] = []) {
  return x + y;
}

preFilledArray(); // 3
preFilledArray([]); // 3
preFilledArray([2]); // 4
preFilledArray([2, 3]); // 5

// Works the same for objects:
function preFilledObject({ z = 3 } = {}) {
  return z;
}

preFilledObject(); // 3
preFilledObject({}); // 3
preFilledObject({ z: 2 }); // 2

Спецификации

Совместимость с браузерами

См. также

• Руководство по функциям
• Функции
• Параметры остатка
• Оператор нулевого слияния (??)