Деструктуризация параметров — JS: Функции

• Деструктуризация массива
• Деструктуризация объекта

Когда мы передаём аргумент при вызове функции, его значение присваивается параметру функции. Это неявное автоматическое присваивание, потому что в коде этой операции "не видно".

const func = (x) => {
  // параметру x будет присвоено
  // значение аргумента при вызове функции
  console.log(x)
}

func(1) // => 1
// Это можно представить так, что
// внутри функции создается параметр x,
// которому присваивается значение аргумента:
// {
//   let x = 1;
//   console.log(x);
// };

func([1, 2]) // => [1, 2]
// Пример с передачей массива:
// {
//   let x = [1, 2];
//   console.log(x);
// };

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

Деструктуризация массива

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

Не самый выразительный вариант — прямое обращение к элементам массива по индексам:

const func = (elements) => {
  console.log(elements[0])
  console.log(elements[1])
}

// let elements = [1, 2];
func([1, 2])
// => 1
// => 2

Более интересный вариант — деструктуризация массива в теле функции:

const func = (elements) => {
  const [first, second] = elements
  console.log(first)
  console.log(second)
}

// let elements = [1, 2];
func([1, 2])
// => 1
// => 2

Но можно пойти еще дальше и добавить деструктуризацию прямо в определение:

const func = ([first, second]) => {
  console.log(first)
  console.log(second)
}

// let [first, second] = [1, 2];
func([1, 2])
// => 1
// => 2

При этом действуют все стандартные правила деструктуризации массива:

const elements = [1, 2]

// let [first, second] = elements;
func(elements)
// => 1
// => 2

// let [first, second] = [1];
func([1])
// => 1
// => undefined

// let [first, second] = [];
func([])
// => undefined
// => undefined

Если в передаваемом массиве меньше двух элементов, параметры, которым "не хватило" соответствующих значений, будут содержать undefined. Для таких случаев можно подстраховаться и задать значение по умолчанию:

const func = ([first = 666, second = 777]) => {
  console.log(first)
  console.log(second)
}

// [first = 666, second = 777] = [1];
func([1])
// => 1
// => 777

// [first = 666, second = 777] = [];
func([])
// => 666
// => 777

Деструктуризация объекта

Напишем функцию, которая принимает на вход объект с информацией об имени и фамилии пользователя и выводит их в терминал. Сразу реализуем вариант с деструктуризацией объекта для параметров:

const func = ({ name, surname }) => {
  console.log(name)
  console.log(surname)
}

// let { name, surname } = { name: 'John', surname: 'Doe' };
func({ name: 'John', surname: 'Doe' })
// => John
// => Doe

Типичная ситуация на практике, когда на вход функции приходит объект с большим количеством свойств, но фактически нужны значения не всех свойств, а всего нескольких. Например, это бывает при обработке HTTP-ответа (response) от сервера или конфигурации для программы. В таких случаях мы забираем только нужные значения — ведь при деструктуризации необязательно указывать все свойства объекта:

const func = ({ surname }) => {
  // берём только значения surname
  console.log(surname)
}

const obj = { name: 'John', surname: 'Doe' }

// let { surname } = { name: 'John', surname: 'Doe' };
func(obj) // => Doe

Дополнительные материалы

1. Урок про деструктуризацию из курса JS: Массивы
2. Урок про деструктуризацию из курса JS: Объекты