Зарегистрируйтесь для доступа к 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: Объекты про деструктуризацию

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

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

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

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

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

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

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

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

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

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

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

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

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

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

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

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