Теория: Опциональные параметры в функциях

В этом уроке мы разберем опциональные параметры в функциях.

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

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

function split(str: string, separator?: string)

split('hexlet')
split('hexlet,code-basics', ',')

В таком случае реальный тип переменной separator будет string | undefined (string или undefined). Другой вариант задать опциональный параметр — присвоить значение по умолчанию:

// Знака вопроса больше нет, потому что есть значение по умолчанию
function split(str: string, separator: string = ',') {
  // ...
}

split('hexlet')
split('hexlet,code-basics', ',')

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

Колбек функции

Представим функцию filter(), которая фильтрует числовые массивы по переданному предикату:

// Необязательный параметр index
function filter(coll: number[], callback: (arg: number, index?: number) => boolean) {
  const result: number[] = []
  coll.forEach((n, index) => {
    // Здесь он передается в колбек
    if (callback(n, index)) {
      result.push(n)
    }
  })
  return result
}

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

Было бы логичным указать этот параметр как необязательный, но это так не работает:

// Выполнится без ошибок
filter([1, 2], n => n > 1)
// index is possibly 'undefined'
filter([1, 2], (n, index) => index > n)

В этом случае ошибка обозначает, что теоретически undefined может оказаться внутри колбека. Так происходит из-за необязательности параметра. По идее undefined не окажется в колбеке, потому что индекс всегда определен, но ошибка все равно появляется. Чтобы решить эту ситуацию, нужно отказаться от опциональности:

function filter(coll: number[], callback: (arg: number, index: number) => boolean) {
  // ...
}

Колбеки с меньшим числом параметров всегда могут появляться там, где они же ожидаются с большим числом параметров, при условии, что типы общих параметров совпадают.

В примере выше аргументом передается функция (n) => n > 1, а вызывается она как callback(n, index). Это приводит к игнорированию index, при этом никаких ошибок типов не возникает.