Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

Аватары экспертов Хекслета

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

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

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
с нуля
Разработка фронтенд-компонентов для веб-приложений
8 декабря 10 месяцев
Иконка программы Онлайн-буткемп. Фронтенд-разработчик
Профессия
Новый с нуля
Интенсивное обучение профессии в режиме полного дня
15 декабря 4 месяца
Иконка программы Node.js-разработчик
Профессия
с нуля
Разработка бэкенд-компонентов для веб-приложений
8 декабря 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
с нуля
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
8 декабря 16 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»