Cоздание опциональных параметров в функциях JavaScript

Быстрый ответ

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

function example(param = 'default') {
  console.log(param);
}

example(); // выведет "default", потому что аргумент не передан
example('specific'); // выведет "specific", поскольку передан конкретный аргумент

Если param не предоставлен, то функция использует значение 'default', что упрощает её вызов и внутреннюю логику.

Параметры по умолчанию в ES6

ES6 ввел удобный способ реализации опциональных аргументов через значения по умолчанию:

function greet(name = 'Гость', greeting = 'Привет') {
  return `${greeting}, ${name}!`;
}

Параметры по умолчанию в ES6 против ES5

В ES6 значения по умолчанию применяются, когда аргумент не передан или равен undefined. В ES5 разработчики часто использовали логический оператор || для достижения аналогичного результата:

function greet(name, greeting) {
  name = name || 'Гость';
  greeting = greeting || 'Привет';
  return `${greeting}, ${name}!`;
}

Однако, этот подход не различает null, false, 0, '' и undefined, так как все эти значения интерпретируются как «ложные». В ES6 параметры по умолчанию применяются только при undefined.

Обработка исключений

В ES6 null не трактуется как undefined, поэтому для обеспечения надёжной работы функции рекомендуется проверять параметры на ложные значения принудительно:

function greet(name = 'Гость', greeting = 'Привет') {
  if (name === null) name = 'Гость';
  if (greeting === null) greeting = 'Привет';
  return `${greeting}, ${name}!`;
}

В контексте ES5 следует проверить отсутствие undefined:

function greet(name, greeting) {
  name = name === undefined ? 'Гость' : name;
  greeting = greeting === undefined ? 'Привет' : greeting;
  return `${greeting}, ${name}!`;
}

Подводные камни

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

Использование истиности в JS

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

Проверка опциональных аргументов на начальном этапе

Рекомендуется выполнять проверку опциональных аргументов на начальных этапах выполнения функции для обеспечения её прозрачности и корректности работы.

Обработка неизвестного количества аргументов

Для функций с неизвестным заранее числом аргументов можно использовать объект arguments:

function logAllArguments() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

Визуализация

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

function makeSandwich(bread, cheese = 'Чеддер', sauce = 'Майонез') {
  return `🍞${bread} | 🧀${cheese} | 🍯${sauce}`;
}

Как и в функциях, так и в реальности, необязательные ингредиенты (сыр и соус) добавляются автоматически, если они не указаны явно.

Полезные материалы