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

Деструктуризация объектов – это новый (относительно) синтаксис Javascript, который позволяет нам сохранять свойства объектов в уникальных переменных.

Объект в Javascript выглядит так:

  const me = {
      	firstname: "seyi",
      	surname: "adeleke"
    };

До ES6 единственный способ получить доступ к свойству firstname в объекте me – это создать новую переменную и затем назначить ее с помощью синтаксиса objectName.propertyName или objectName["propertyName"], подобного этому:

const firstname = me.firstname;
const surname = me.surname;

Это все хорошо, но что, если бы у нас был более сложный объект с глубоко вложенными объектами в качестве свойств. Объект ниже вложен на два уровня в глубину.

    const myObject = {
      property1: {
        innerProperty1: {
          key: 'value',
        }
      }
    } 

Чтобы получить доступ к ключевому свойству в указанном выше объекте, нам нужно будет написать связанное выражение this.

const key = myObject.property1.innerProperty1.key;

Это могло бы быть еще более сложным, если бы нам нужно было проверить, существует ли key перед доступом к нему. Тогда нам придется писать следующее:

const key = myObject.property1.innerProperty1.key && myObject.property1.innerProperty1.key

Деструктуризация помогает нам решить проблему нечистого кода, используя следующий синтаксис:

    const {firstname, surname} = me;
    console.log(firstname); // 'seyi'
    console.log(surname); // 'adeleke'

В приведенном выше коде мы создаем новый объект { firstname, surname } который представляет собой список имен переменных. Затем мы можем использовать эти переменные в остальной части нашего кода.

Технически мы создаем новый объект, используя синтаксис инициализатора. В строке 1 приведенного ниже кода ключ – это свойство исходного объекта, который мы деструктурируем, а значение справа – это переменная, в которой мы сохраняем значение.

    { firstname: firstname }
    {firstname}

Зная это, теперь мы можем присвоить свойству другое имя, например так:

console.log(fName); // 'seyi'

Разрушение вложенного объекта выполняется по тем же правилам. Используя сложный объект, который у нас есть выше, в качестве примера. Мы можем извлечь переменную key вот так:

    const { 
              property1: { 
                innerProperty1: { 
                    key: k 
                  } 
              } 
          } = myObject;
    console.log(k); // 'value'

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

    const me = {
      surname: 'adeleke'
    }
    
    const {firstname: fName = "seyi", surname} = me;
    console.log(fName); // 'seyi'

• Разрушение позволяет нам распаковывать свойства объектов в переменные
• При деструктуризации используется следующий синтаксис:

    const { property: newVariable = defaultValue } = myObject;
    console.log(newVariable); // defaultValue