Скорочений запис властивостей ({ x, y })
скорочений запис властивостей (або property shorthand) - це синтаксичний цукор у JavaScript, який дозволяє створювати об'єкт коротше, якщо ім'я властивості збігається з ім'ям змінної.
Звичайний запис (довгий)
До ES6 (або без скорочення) ти писав би так:
javascript
const x = 10;
const y = 20;
const point = {
x: x,
y: y
};
console.log(point); // { x: 10, y: 20 }Тут ключі та змінні мають однакові імена, тому запис виглядає надлишковим.
Скорочений запис (ES6 shorthand)
Тепер те саме можна записати простіше:
javascript
const x = 10;
const y = 20;
const point = { x, y };
console.log(point); // { x: 10, y: 20 }Коли ім'я властивості збігається з ім'ям змінної,
достатньо вказати просто ім'я -
JS автоматично створить пару ключ: значення.
Як це працює під капотом
javascript
{ x, y }
// еквівалентно
{ x: x, y: y }Можна поєднувати звичайні та скорочені властивості
javascript
const name = 'Tim';
const age = 25;
const user = {
name,
age,
country: 'Ukraine'
};
console.log(user);
// { name: 'Tim', age: 25, country: 'Ukraine' }Приклад з функцією
javascript
function createUser(name, age) {
return { name, age };
}
console.log(createUser('Oleh', 30));
// { name: 'Oleh', age: 30 }Це спрощує код фабрик і конструкторів, де ключі збігаються з параметрами функції.
Можна комбінувати з обчислюваними властивостями
javascript
const key = 'city';
const value = 'Lviv';
const obj = { [key]: value, country: 'Ukraine' };
console.log(obj); // { city: 'Lviv', country: 'Ukraine' }Скорочений запис працює паралельно з іншими можливостями об'єктних літералів.
Підсумок
| Запис | Еквівалент | Що робить |
|---|---|---|
{ x, y } | { x: x, y: y } | Створює властивості з такими самими іменами, як у змінних |
{ name, age, country: 'Ukraine' } | { name: name, age: age, country: 'Ukraine' } | Можна змішувати |
| Працює з функціями | Так | Спрощує повернення об'єктів |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.