Деструктуризация объектов в 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(y);     // выведет 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);