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

Кроме массивов можно также делать и деструктуризацию объектов.

Пусть, к примеру, у нас есть следующий объект:

let obj = { year: 2025, month: 12, day: 31, };

Давайте выполним его деструктуризацию:

let obj = { year: 2025, month: 12, day: 31, }; let {year, month, day} = obj; console.log(year); // выведет 2025 console.log(month); // выведет 12 console.log(day); // выведет 31

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

В следующем коде части объекта записываются в соответствующие переменные:

let options = { color: 'red', width: 400, height: 500, }; let color = options.color; let width = options.width; let height = options.height;

Переделайте этот код через деструктуризацию согласно изученной теории.

Другие имена переменных

Можно сделать так, чтобы имена переменных не совпадали в именами ключей объекта:

let obj = { year: 2025, month: 12, day: 31, }; let {year: y, month: m, day: d} = obj; console.log(y); // выведет 2025 console.log(m); // выведет 12 console.log(d); // выведет 31

В следующем коде части объекта записываются в соответствующие переменные:

let options = { color: 'red', width: 400, height: 500, }; let c = options.color; let w = options.width; let h = options.height;

Переделайте этот код через деструктуризацию согласно изученной теории.

Значения по умолчанию

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

Давайте, например, укажем значение по умолчанию для переменной year:

let obj = { month: 12, day: 31, }; let {year = 2025, month, day} = obj; console.log(year); // выведет 2025 console.log(month); // выведет 1 console.log(day); // выведет 31

В следующем коде части объекта записываются в соответствующие переменные:

let options = { width: 400, height: 500, }; let color; if (options.color !== undefined) { color = options.color; } else { color = 'black'; } let width = options.width; let height = options.height;

Переделайте этот код через деструктуризацию согласно изученной теории.

Другие переменные и значения по умолчанию

Можно также менять названия переменных на свои при этом задавая значения по умолчанию:

let obj = { month: 12, day: 31, }; let {year:y = 2025, month, day} = obj; console.log(year); // выведет 2025 console.log(month); // выведет 1 console.log(day); // выведет 31

В следующем коде части объекта записываются в соответствующие переменные:

let options = { width: 400, height: 500, }; let с; if (options.с !== undefined) { с = options.color; } else { с = 'black'; } let w = options.width; let h = options.height;

Переделайте этот код через деструктуризацию согласно изученной теории.

Функции в качестве значения по умолчанию

В качестве значений по умолчанию может выступать результат выполнения функции:

function func() { return (new Date).getFullYear(); } let obj = { month: 12, day: 31, }; let {year = func(), month, day} = obj;

Объект из функции

Объект для деструктуризации не обязательно должен хранится в переменной. Он также может быть результатом работы функции:

function func() { return obj = { year: 2025, month: 12, day: 31, }; } let {year, month, day} = func();

Объявление переменных

Не обязательно объявлять переменные при деструктуризации. Они могут быть объявлены заранее:

let obj = { year: 2025, month: 12, day: 31, }; let year, month, day; // объявим переменные заранее

Тут, однако, в отличии от массивов, есть нюансы. Без команды let перед фигурными скобками эти фигурные скобки не будут восприняты JavaScript как команда на деструктуризацию (а будут восприняты как блок кода):

{year, month, day} = obj; // не будет работать

Для решения проблемы команду на деструктуризацию объекта нужно брать в круглые скобки:

({year, month, day} = obj);