dr.Brain

doctor Brain

мир глазами веб-разработчика

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

пример деструктуризации объекта в JavaScript

dr.Brain

время чтения 2 мин.

Photo by Jason Blackeye on Unsplash

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

Синтаксис:

let {var1, var2} = {var1:…, var2:…}

Левая сторона: “шаблон” для существующих свойств (чаще всего, это список названий переменных {…}), правая сторона - объект.

Например, у нас есть объект JavaScript, описывающий страны. Так же есть функция explain(country), которая выводит интересную информацию о странах в консоли.

const theNetherlands = {
    name: 'Нидерланды',
    favoriteFood: 'сыр',
    averageHeight: 182,
    population: 17180000,
}

function explain(country) {
    console.log(`Жители страны ${country.name} имеют средний рост ${country.averageHeight} см. и любят есть ${country.favoriteFood}!`);
}

explain(theNetherlands);

В консоли мы получим:

Жители страны Нидерланды имеют средний рост 182 см. и любят есть сыр!

Тем не менее, мы можем не так часто повторять слово country в исходном коде. Для этого достаточно достаточно деструктуризировать объект country в переменные name, averageHeight и favoriteFood, например, так:

function explain({ name, averageHeight, favoriteFood }) {
    console.log(`Жители страны ${name} имеют средний рост ${averageHeight} см. и любят есть ${favoriteFood}!`);
}

Так же, можно оставить для функции explain параметр country и деструктуризировать саму функцию следующим образом:

function explain(country) {
    const { name, averageHeight, favoriteFood } = country;
    console.log(`Жители страны ${name} имеют средний рост ${averageHeight} см. и любят есть ${favoriteFood}!`);
}

Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.