Деструктуризация параметров — 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

https://repl.it/@hexlet/js-functions-params-destructuring-in-function-body

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

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

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

https://repl.it/@hexlet/js-functions-params-destructuring-input-argument

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

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

https://repl.it/@hexlet/js-functions-params-destructuring-default-value

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

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

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

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

https://repl.it/@hexlet/js-functions-params-destructuring-object

Типичная ситуация на практике, когда на вход функции приходит объект с большим количеством свойств, но фактически нужны значения не всех свойств, а всего нескольких. Например, это бывает при обработке 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: Объекты про деструктуризацию

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.