Привет, народ! Надеюсь, у вас все хорошо.

Сегодня я поделюсь полезной информацией о важной концепции деструктуризации вызовов JavaScript.
Так что же такое деструктуризация???

ХОРОШО. Давайте начнем с того, что MDN говорит о деструктуризации.
«Синтаксис присваивания деструктуризации — это выражение JavaScript, позволяющее распаковывать значения из массивов или свойства объектов в отдельные переменные. .”
Итак, простыми словами деструктуризация — это способ извлечения значений из массива или свойств из объектов в разные переменные.
И следующий вопрос, который у нас возникает, заключается в том, каков синтаксис и преимущества деструктурирования? Позвольте понять это на некоторых примерах.

Предположим, у меня есть массив имен учеников, и требуется извлечь первое и второе имя из массива и сохранить в разных переменных. Итак, давайте посмотрим, как мы можем добиться этого обычным способом (что когда-то делали все разработчики JS)

const students = ["Andrew", "Virat", "Tait", "Robin", "Warner"];
const first = students[0];  //As array position start with '0'
const second = students[1];
console.log(first, second); // Andrew Virat

Здесь мы создали две переменные, первую и вторую, и назначаем элемент из массива student на основе индекса элемента (0 и 1). В приведенном выше коде нет ничего неправильного, и он будет работать так, как ожидалось, но с помощью деструктуризации мы можем добиться того же результата более качественным и чистым способом с меньшими усилиями.
Как?? Давайте посмотрим…

const students = ["Andrew", "Virat", "Tait", "Robin", "Warner"];
const [first, second] = students;
console.log(first, second); // Andrew Virat
OR
const [first, second] = ["Andrew", "Virat", "Tait", "Robin", "Warner"];
console.log(first, second); // Andrew Virat

И что мы здесь сделали? Мы добились того же с меньшим количеством кода и более простым способом, используя деструктурирование. Здесь вместо создания двух переменных и сопоставления их с отдельным элементом массива на основе индекса элемента мы создали массив из двух переменных и сопоставили его с массивом студентов и получили тот же результат. При деструктурированиипервая переменная сопоставляется с первым элементом массива, а вторая переменная сопоставляется со вторым элементом массива, и все готово!!
Больше не нужно обращаться к элементу с помощью индекса, используйте деструктурирование.

Мы также можем использовать деструктуризацию с объектом для доступа к свойствам объекта. Давайте разберемся с этим на примере.

Предположим, у меня есть объект, содержащий сведения об ученике (как показано ниже), и я просто хочу получить доступ к имени, фамилии и электронной почте из этого.
Опять же, один из способов добиться этого

const student = { 
    id: 001,
    firstname: 'Bill',
    lastname: 'Gates',
    email: '[email protected]',
    country: 'US',
    contact: '1234567890'
}
const firstname = student.firstname;
or
const lastname = student["lastname"];
cosnt email = student["email"];
console.log(firstname, lastname, email); // Bill Gates [email protected]

Хорошо! мы получим результат, как и ожидалось, но все же мы можем оптимизировать этот код и добиться того же результата с меньшими усилиями, используя деструктурирование. Дай посмотреть как..

const student = { 
    id: 001,
    firstname: 'Bill',
    lastname: 'Gates',
    email: '[email protected]',
    country: 'US',
    contact: '1234567890'
}
const { firstname, lastname, email} = student;
console.log(firstname, lastname, email); // Bill Gates [email protected]

Как видно из приведенного выше блока кода, мы достигаем того же результата с меньшим количеством кода, усилий и стандартным способом.

Есть и другие варианты использования деструктуризации, о которых я расскажу в следующей статье. А пока давайте начнем использовать деструктурирование и улучшим ваш код.
Удачного обучения!!

Спасибо!