Сравниваем традиционный способ извлечения значений и деструктуризацию (ES6) в JavaScript В этой статье мы рассмотрим традиционное присваивание значений из объектов в переменные и новый синтаксис деструктуризации в ES6. Материал адаптирован на русский язык совместно с тимлидом группы frontend-разработки в Skillbox Иваном Казанцевым. Деструктуризация — это синтаксис, который позволяет распаковывать значения из массивов или свойства из объектов в переменные. Что нам это дает? Возможность писать более чистый и понятный код, экономя время и количество строк. Сначала рассмотрим деструктуризацию объектов. И для примера возьмем объект - клиент (customer). Если бы нам нужно было достать из него name и email, привычным способом мы бы сделали так: С помощью деструктуризации мы можем делать так: Как минимум, мы уже не пишем два раза customer и чувствуем себя чуть-чуть лучше, так как можем добавить в резюме что-то про DRY. Но если мы хотим записать customer.name в переменную с другим именем, выходит, снова нужен традиционный способ? Нет, это мы тоже можем сделать: Если мы хотим присвоить значения уже существующим переменным, делаем почти тоже самое, но добавляем (). Почему мы добавляем ()? { в левой части считается блоком, а не литералом объекта. Если опустите (), вы получите сообщение об ошибке: Итак, мы поняли, что это удобно, можем усложнять. Если хотим получить доступ к свойствам city и country, в традиционном способе нам нужно использовать цепочку обращений: Мы можем сделать то же самое, но короче, используя деструктуризацию: Возможно, выглядит сложнее, но это дело привычки. И да, мы все еще можем записать свойства streetNo и city в переменные с другим названием. Идем дальше. Теперь перед нами стоит задача: добавить married (женат/замужем) нашему объекту customer. Возможные варианты ответа: “да” (yes) или “нет” (no). В случае, если не указан, присвоить значение “нет ответа” (N/A). Без деструктуризации мы бы сделали так: Но с деструктуризацией мы можем объявлять значения по умолчанию, тем самым избавиться от условия. Фантастика? Представим, что нам нужно достать только name ( например, чтобы присвоить ему значение по умолчанию), а все остальное записать “как есть” в другую переменную. Обратите внимание, вместо rest вы можете использовать любое другое название переменной, просто не забудьте поставить ... и расположить это в конце. Стоит иметь ввиду, чтоnull деструктурировать нельзя, мы получим ошибку: Поэтому мы должны обрабатывать такие случаи, например, так: Попробуем использовать деструктуризацию для упрощения работы с аргументами функции? Давайте представим, что нам нужна функция, которая выводит в консоль имя и город клиента. Как бы мы сделали ранее: Как мы сделаем теперь: Да, это работает и с массивами.  Для примера нам понадобится пакет с фруктами. Если бы нам нужно было достать банан и апельсин, ранее мы бы сделали следующее: Но не сегодня, сегодня мы познакомились с деструктуризацией! В объектах мы могли доставать любые значения свойств по имени и записывать их в переменные. А что, если мы хотим достать только первый и третий фрукт из массива? Нам просто нужно добавить лишнюю запятую. Да-да, мы не указываем название переменной, и второй элемент пропускается. И в массивах мы тоже можем использовать остаточные параметры. Например, мы хотим достать первый фрукт себе, второй оставить в пакете, а все остальное отдать друзьям: И в конце — фокус. Сейчас мы поменяем местами первый и второй фрукт, не объявляя для этого новую переменную. Ловкость деструктуризации и никакого мошенничества. Ну а на сегодня все. Надеюсь, после этой статьи вам удастся упростить свой код и сделать его более читаемым.