Деструктуризация объектов — это удобный способ извлечения данных из объектов в JavaScript. Она позволяет “разбирать” объект на отдельные переменные, что делает код более читаемым и компактным.

Объекты в Javascript - это так называемые ассоциативные массивы, они схожи с объектами в других языках, например таких как PHP

Небольшой пример для эксперементов с объектами

let obj = {
    name: 'Elle',
    age: 22,
    hobbies: {
        film: 'Crank',
        music: 'DVRST',
    }
};

console.log(obj.name); // 'Elle'

Удалить свойство из объекта можно с помощью метода delete

let obj = {
    name: 'Elle',
    age: 22,
    hobbies: {
        film: 'Crank',
        music: 'DVRST',
    }
};

delete obj.age;

console.log(obj); // вернет объект без свойства age

Метод перебора объектов for in()

Воспользуемся тем же объектом из примера

let obj = {
    name: 'Elle',
    age: 22,
    hobbies: {
        film: 'Crank',
        music: 'DVRST',
    }
};

for(let key in obj) {
    console.log(`Свойство ${key} имеет значение ${obj[key]}`)
}
// Выведет
Свойство name имеет значение Elle
Свойство age имеет значение 22
Свойство hobbies имеет значение [object Object]

Обратим внимание на свойство hobbies

Дело в том что в этом примере весь вывод имеет строчный тип данных, и когда интерпритатор натыкается на вложенный объект он не может превратить его в строку и поэтому в консоль выводится структура [object Object]

Чтобы достучаться до свойств внутри объекта используем метод перебора for in внутри перебора for in

let obj = {
    name: 'Elle',
    age: 22,
    hobbies: {
        film: 'Crank',
        music: 'DVRST',
    }
};
//пропишем условие if
//если внутри объекта будет объект 
//то запустим еще один перебор
for(let key in obj) {
    if(typeof(obj[key]) === 'object') {
        for(let i in obj[key]) {
            console.log(`Свойство ${i} имеет значение ${obj[key][i]}`)
        }
    } else {
        console.log(`Свойство ${key} имеет значение ${obj[key]}`)
    }
}

Нужно знать что у объектов нет свойства length() поэтому напрямую узнать точное количество пар ключ значение узнать не получится.

Можно решить это следующим образом

let obj = {
    name: 'Elle',
    age: 22,
    hobbies: {
        film: 'Crank',
        music: 'DVRST',
    }
};

for(let key in obj) {
    counter++;
}
console.log(counter);

Метод объекта Object.keys()

Метод Object.keys() в JavaScript возвращает массив строк, содержащий все собственные (не унаследованные) перечислимые свойства объекта. Этот метод полезен, когда нужно получить список ключей объекта и работать с ними.

Этот метод используется когда нужно работать с ключами объекта как с массивом

let obj = {
    name: 'Elle',
    age: 22,
    hobbies: {
        film: 'Crank',
        music: 'DVRST',
    }
};
console.log(Object,keys(obj).length);

Краткий итог лекции:

Объекты это структуры которые могут сохранять внутри себя абсолютно любые типы данных в формате ключ и значение

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

Для перебора объектов можно использовать метод for in и получать доступ к ключам и значениям ключей

Обращаться к данным внутри объекта можно как через точку так и через квадратные скобки

У объектов бывают как встроенные методы и свойства так и методы. Так же прописывая функции внутри объекта создаются методы объекта.

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

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

let obj = {
    name: 'Elle',
    age: 22,
    hobbies: {
        film: 'Crank',
        music: 'DVRST',
    }
};

const {film, music} = obj.hobbies;
console.log(film); //выведет Crank

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

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

3. Деструктуризация часто используется в параметрах функций и для работы с оставшимися свойствами.

Этот подход делает код более лаконичным и удобным для работы с объектами.