Learn JavaScript

Параметры по умолчанию - значения по умолчанию для параметров функции в JavaScript

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

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

Синтаксис

Базовая запись выглядит так:

function greet(name = "Гость") {
  console.log(`Привет, ${name}!`);
}

Если аргумент не передать, будет использовано значение по умолчанию:

greet();        // "Привет, Гость!"
greet("Анна");  // "Привет, Анна!"

Что делают параметры по умолчанию

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

function power(number, degree = 2) {
  return number ** degree;
}

console.log(power(3));    // 9
console.log(power(3, 3)); // 27

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

Когда значение по умолчанию действительно срабатывает

Параметр по умолчанию используется только в двух случаях:

  • аргумент вообще не передали
  • аргумент передали как undefined
function greet(name = "Гость") {
  console.log(name);
}

greet();            // "Гость"
greet(undefined);   // "Гость"
greet("Игорь");     // "Игорь"

Это важное правило, потому что многие ожидают, что так же будут работать null, 0 или пустая строка. Но это не так.

null, 0, false и "" не включают значение по умолчанию

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

function showValue(value = "default") {
  console.log(value);
}

showValue(null);   // null
showValue(0);      // 0
showValue(false);  // false
showValue("");     // ""

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

Почему это лучше, чем старый подход через ||

Раньше часто писали так:

function setVolume(volume) {
  volume = volume || 50;
  return volume;
}

Проблема в том, что || подставляет значение справа для любого falsy-значения.

console.log(setVolume(0)); // 50

Если 0 - валидное значение, такой код работает неправильно.

С параметрами по умолчанию поведение точнее:

function setVolume(volume = 50) {
  return volume;
}

console.log(setVolume(0));         // 0
console.log(setVolume(undefined)); // 50

Параметров по умолчанию может быть несколько

Можно задавать значения сразу для нескольких параметров.

function createUser(name = "Гость", role = "user") {
  return `${name}: ${role}`;
}

console.log(createUser());                  // "Гость: user"
console.log(createUser("Анна"));            // "Анна: user"
console.log(createUser("Анна", "admin"));   // "Анна: admin"

Значение по умолчанию может быть выражением

Справа можно писать не только литерал, но и выражение.

function getPrice(price, tax = price * 0.2) {
  return price + tax;
}

console.log(getPrice(100));    // 120
console.log(getPrice(100, 10)); // 110

То есть значение может вычисляться на основе другого параметра.

Можно использовать предыдущие параметры

Параметр по умолчанию может опираться на параметры, которые стоят раньше.

function greet(name, message = `Привет, ${name}!`) {
  return message;
}

console.log(greet("Анна")); // "Привет, Анна!"

Это очень удобно, когда один параметр зависит от другого.

Но на следующие параметры опираться нельзя

Обычно используют только те параметры, которые уже объявлены слева.

// function test(a = b, b = 10) {}

Такой код приведёт к ошибке, потому что b ещё недоступен в момент вычисления a.

Значение по умолчанию вычисляется в момент вызова

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

function createId() {
  return Math.random();
}

function createUser(id = createId()) {
  return id;
}

console.log(createUser());
console.log(createUser());

Здесь два вызова обычно дадут разные значения.

Работает и с обычными, и со стрелочными функциями

Параметры по умолчанию не привязаны только к function declaration.

Они работают и в function expression, и в стрелочных функциях.

const greet = (name = "Гость") => {
  return `Привет, ${name}!`;
};

console.log(greet()); // "Привет, Гость!"

Частый случай - объект по умолчанию

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

function printUser(user = {}) {
  console.log(user);
}

printUser(); // {}

Это особенно полезно, когда функция получает настройки, опции или объект с данными.

Когда это полезно

Параметры по умолчанию особенно удобны, когда:

  • аргумент необязателен
  • у функции есть “нормальное” поведение без явного значения
  • не хочется писать дополнительные проверки внутри функции
  • важно отличать undefined от 0, false, null и пустой строки

Пример:

function showPage(page = 1) {
  console.log(`Страница: ${page}`);
}

showPage();   // "Страница: 1"
showPage(5);  // "Страница: 5"

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

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

function greet(message = "Привет", name) {
  console.log(`${message}, ${name}`);
}

greet(undefined, "Анна");

Это работает, но читается хуже.

Обычно удобнее сначала ставить обязательные параметры, а потом необязательные.

function greet(name, message = "Привет") {
  console.log(`${message}, ${name}`);
}

Частые ошибки

Думать, что null включит значение по умолчанию

function showValue(value = "default") {
  console.log(value);
}

showValue(null); // null

null - это переданное значение, поэтому параметр по умолчанию не используется.

Думать, что 0, false и "" заменятся на дефолт

function setVolume(volume = 50) {
  return volume;
}

console.log(setVolume(0));     // 0
console.log(setVolume(false)); // false
console.log(setVolume(""));    // ""

Такое поведение как раз и полезно: функция не теряет валидные значения.

Продолжать использовать || там, где нужен именно параметр по умолчанию

function setVolume(volume) {
  volume = volume || 50;
  return volume;
}

Если 0 допустим, этот код будет ошибочным.

Забывать, что в теле с {} всё равно нужен return

const sum = (a = 1, b = 2) => {
  a + b;
};

console.log(sum()); // undefined

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

Использовать следующий параметр в значении предыдущего

// function test(a = b, b = 10) {}

Так делать нельзя: следующий параметр ещё не готов.

Быстрая памятка

  • параметр по умолчанию срабатывает для пропущенного аргумента и для undefined
  • null, 0, false и "" не включают дефолт
  • значение справа может быть выражением
  • можно использовать предыдущие параметры
  • такой подход обычно точнее и удобнее, чем старый вариант через ||
  • параметры по умолчанию работают и в обычных, и в стрелочных функциях

Коротко

Параметры по умолчанию в JavaScript позволяют задавать запасные значения прямо в объявлении функции. Главное, что стоит запомнить: они срабатывают только для отсутствующего аргумента и undefined, не ломают валидные значения вроде 0 и false, и обычно читаются лучше, чем проверки через || внутри функции.