Дефолтные параметры функций в JavaScript: от хаоса к элегантности

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Параметр без подарка? Разбираемся с дефолтными значениями в JavaScript

Представьте, что вы заказали пиццу. Вы звоните в доставку и говорите: «Мне, пожалуйста, пиццу». Оператор уточняет: «Какую?» — «Ну, стандартную, с сыром и колбасой». Вы даже не задумываетесь, что у пиццы есть параметры по умолчанию.

Точно так же и в JavaScript: функции часто вызываются без всех аргументов. И если программист не предусмотрел set a default parameter value for a JavaScript function, код может сломаться или вести себя непредсказуемо. В этой статье мы разберем все способы задать значение по умолчанию для параметра функции в JS — от старых добрых костылей до современного синтаксиса ES6. Поехали!

Почему это вообще важно?

Допустим, у нас есть функция, которая приветствует пользователя:

function greet(name) {
    console.log('Привет, ' + name + '!');
}

greet(); // Выведет: "Привет, undefined!" — неловко, правда?

Без default parameters javascript не переданный аргумент становится undefined. А если мы попробуем вызвать метод на undefined — получим ошибку. Поэтому параметры по умолчанию js — это не просто удобство, а защита от багов.

Способ 1: Классика — тернарный оператор (или if)

До появления ES6 разработчики использовали тернарный оператор javascript или простую проверку. Это работает, но выглядит громоздко:

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

console.log(multiply(5)); // 10 (5 * 2)
console.log(multiply());  // 2 (1 * 2)

Плюсы: Понятно даже новичку, совместимо с древними браузерами.
Минусы: Код раздувается. Если параметров 5–6, читаемость резко падает.

Подводный камень: проверка на undefined vs truthy

Многие новички пишут так:

function greet(name) {
    name = name || 'Гость';
    console.log('Привет, ' + name);
}

Это работает, пока вы не передадите 0, пустую строку '' или false. Все эти значения — falsy, и функция заменит их на 'Гость'. Если вам нужно передать 0 как валидное значение — этот подход сломается. Используйте строгую проверку на undefined.

Способ 2: Магический объект arguments

Внутри каждой функции (кроме стрелочных) есть неявный массивоподобный объект arguments javascript. Им можно пользоваться для проверки переданных аргументов:

function showInfo(name, age) {
    name = arguments.length > 0 ? name : 'Аноним';
    age = arguments.length > 1 ? age : 'не указан';
    return `${name}, возраст: ${age}`;
}

console.log(showInfo()); // Аноним, возраст: не указан

Плюсы: Дает полный контроль над тем, какие аргументы переданы.
Минусы: Синтаксис устарел, не работает в стрелочных функциях. Обычно используют только для очень специфических задач (например, когда количество параметров заранее неизвестно).

Способ 3: Современный стандарт — дефолтные параметры ES6

Начиная с ECMAScript 2015, задать параметры по умолчанию js можно прямо в объявлении функции. Это самый чистый и рекомендуемый способ:

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

console.log(multiply(5)); // 10
console.log(multiply());  // 2

Красота, правда? Но есть важные нюансы, которые нужно знать, чтобы не попасть в ловушку.

Нюанс 1: Дефолтные значения вычисляются на момент вызова

Это значит, что если вы передадите undefined — сработает дефолт. Если передадите null — нет:

function test(x = 10) {
    console.log(x);
}

test(undefined); // 10 (сработал дефолт)
test(null);      // null (дефолт НЕ сработал)

Запомните: null — это явно переданное значение, а undefined — отсутствие значения.

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

При задании set a default parameter value for a JavaScript function вы можете ссылаться на предыдущие параметры:

function buildUrl(base, path = 'index.html', fullUrl = base + '/' + path) {
    return fullUrl;
}

console.log(buildUrl('https://pythonlib.ru')); 
// https://pythonlib.ru/index.html

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

Нюанс 3: Дефолтные параметры и arguments

Когда вы используете default parameters es6, объект arguments ведет себя нестандартно. В строгом режиме он больше не синхронизируется с именами параметров:

function foo(a = 5, b) {
    console.log(arguments.length); // 0
    console.log(arguments[0]);     // undefined (хотя a = 5)
}

foo();

Это одна из причин, почему не стоит смешивать старый arguments с новыми дефолтами.

Способ 4: Деструктуризация с дефолтами (для объектов)

Очень часто в реальных проектах функции принимают один большой объект параметров. Вот тут дефолтные параметры javascript раскрываются во всей красе:

function createUser({ name = 'Пользователь', age = 18, role = 'user' } = {}) {
    console.log(`Создан ${role}: ${name}, ${age} лет`);
}

createUser({ name: 'Иван' }); // Создан user: Иван, 18 лет
createUser();                 // Создан user: Пользователь, 18 лет

Обратите внимание на = {} в конце. Если не поставить пустой объект по умолчанию, вызов createUser() без аргументов вызовет ошибку — нельзя деструктурировать undefined.

Плюсы: Идеально для конфигураций, опций, настроек. Код становится самодокументируемым.
Минусы: Требует понимания деструктуризации.