Деструктуризация - самая любимая функция ES6. Это действительно весело: извлекать свойства из объектов и добавлять вместе с ними переменные в пространство имен, и я чувствую себя * так * круто, когда извлекаю вложенные свойства.

const { b: { c: { d : { e } } } } = a

Всего с 8 фигурными скобками вы можете создать 1 переменную. Параметры функции деструктуризации тоже немыслимы. Ваш код может идти от

const foo = (load) => {}

to

const foo = ({a, b, c, d, e, f}) => {}

и вуаля! Вместо того, чтобы отслеживать только одну переменную, теперь у нас их 6, что значительно расширило сигнатуру функции. Прохладный!!! И, конечно же, деструктуризация может открыть путь для другой функции ES6, которую мы юридически обязаны использовать при любой возможности: сокращение объекта. Один из моих любимых случаев, когда я использую это, - это когда я пишу функцию mapStateToProps для приложения response-redux. Проверь это:

const mapStateToProps = (state) => {
   const {
      player,
      cards,
      loggedIn,
      nameForm,
      ageForm,
      timezone
   } = state
   return {
      player,
      cards,
      loggedIn,
      nameForm,
      ageForm,
      timezone
   }
}

Возможно, мне пришлось добавить 8 дополнительных строк, но это позволило мне использовать ES6, который, как мы все знаем, позволяет нам отказаться от принципов DRY.

…

Хорошо, читатель, у меня признание. В приведенных выше примерах я был лукавит и даже немного саркастичен. Я не думаю, что это хорошие варианты использования деструктуризации, и я использовал так называемую обратную психологию, чтобы заставить вас думать иначе. Как описал это покойный Майкл Скотт:

«Обратная психология - отличный инструмент, я не знаю, знаете ли вы об этом, но в основном вы можете заставить кого-то думать, противоположное тому, во что вы верите…»

Мощный…

В этой статье я хочу сказать, что, хотя эти примеры немного экстремальны, я довольно часто вижу подобный код и определенно виноват в этом сам. Это абсолютно полезная функция, которая может уменьшить длину кода, который вы пишете, и может позволить вам избежать ссылки на глубоко вложенное значение, используя миллион точек. Это забавная, почти захватывающая функция, но при злоупотреблении она превращается из синтаксического сахара в ироническую шутку.

Чем дольше я использовал JS, тем меньше я склонен использовать деструктурирование. Это сделано не только для того, чтобы избежать ситуаций с подробным кодом, упомянутых выше, но также потому, что мне нравится знать, откуда берется значение, как и читателям моего кода. Например, в приложениях React довольно часто деструктурируют элементы из props. Вместо того, чтобы ссылаться на значение как props.value, вы вместо этого деструктурируете и просто имеете переменную с именем value. Это круто, и для этого есть множество вариантов использования. Но представьте себе очень длинный вспомогательный метод, который использует множество переменных, созданных внутри функции. Эта value переменная ничем не отличается от других. Самый простой способ напомнить себе и другим, что value - это особый объект, - это НЕ деструктурировать его, а вместо этого называть его props.value. Это не оставляет вопросов относительно того, откуда оно взялось.

В любом случае, я собираюсь спрыгнуть с этой мыльницы и всякой всячины. Надеюсь, вам понравилось, и с новым годом!

✌️🕊