Параметры по умолчанию позволяют задать значение, которое функция возьмёт, если аргумент не передали или передали 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, и обычно читаются лучше, чем проверки через || внутри функции.