Скорочений запис властивостей

JavaScriptJunior~2 хв читання

Скорочений запис властивостей (property shorthand), це синтаксичний цукор JavaScript, який дозволяє створювати об'єкт коротше, коли ім'я властивості збігається з ім'ям змінної. З'явився в ES6 і сьогодні є стандартним способом збирати об'єкти зі змінних.

Теорія

TL;DR

{ x, y } повністю еквівалентно { x: x, y: y }, це лише коротший запис.
Працює тільки тоді, коли ключ і змінна називаються однаково; інакше потрібен звичайний запис key: value.
Скорочені та звичайні властивості можна змішувати в одному літералі.
Особливо зручно у фабриках і функціях, що повертають об'єкт з власних параметрів.
Поєднується з обчислюваними ключами [key]: value і зі скороченим записом методів method() {}.

Швидкий приклад

javascript

const x = 10;
const y = 20;

const point = { x, y };

console.log(point); // { x: 10, y: 20 }

Довгий запис і скорочений

До ES6 (або без скорочення) те саме писали так:

javascript

const x = 10;
const y = 20;

const point = {
  x: x,
  y: y
};

console.log(point); // { x: 10, y: 20 }

Тут ключі та змінні мають однакові імена, тому запис виглядає надлишковим. Зі скороченням достатньо вказати саме ім'я, і JavaScript сам створить пару ключ: значення:

javascript

const point = { x, y };

Під капотом це те саме:

javascript

{ x, y }
// еквівалентно
{ x: x, y: y }

Ім'я властивості береться буквально з імені змінної, тому перейменування змінної змінює і ключ об'єкта.

Змішування звичайних і скорочених властивостей

В одному літералі можна вільно поєднувати обидва стилі:

javascript

const name = 'Maria';
const age = 25;

const user = {
  name,
  age,
  country: 'Ukraine'
};

console.log(user);
// { name: 'Maria', age: 25, country: 'Ukraine' }

Скорочення застосовується до тих властивостей, для яких є змінна з таким самим іменем, решта записується звичайно.

Приклад з функцією

javascript

function createUser(name, age) {
  return { name, age };
}

console.log(createUser('Oleh', 30));
// { name: 'Oleh', age: 30 }

Це помітно спрощує код фабрик і конструкторів, де ключі збігаються з параметрами функції. Той самий прийом зручний під час деструктуризації, коли ви розбираєте об'єкт на змінні, а потім збираєте з них новий:

javascript

const { id, email } = response;
const payload = { id, email };

Поєднання з обчислюваними властивостями та методами

javascript

const key = 'city';
const value = 'Kyiv';

const obj = { [key]: value, country: 'Ukraine' };
console.log(obj); // { city: 'Kyiv', country: 'Ukraine' }

Скорочений запис працює паралельно з іншими можливостями об'єктних літералів. Зокрема, ES6 має і скорочений запис методів, де замість greet: function () {} пишуть просто greet() {}:

javascript

const name = 'Maria';

const user = {
  name,
  greet() {
    return `Hello, ${this.name}`;
  }
};

console.log(user.greet()); // Hello, Maria

Підсумкова таблиця

Запис	Еквівалент	Що робить
`{ x, y }`	`{ x: x, y: y }`	створює властивості з тими самими іменами, що й змінні
`{ name, age, country: 'Ukraine' }`	`{ name: name, age: age, country: 'Ukraine' }`	дозволяє змішувати обидва стилі
`{ [key]: value }`	обчислюваний ключ	ім'я властивості береться зі значення змінної
`{ greet() {} }`	`{ greet: function () {} }`	скорочений запис методу

Типові помилки

Очікувати скорочення там, де імена різні. { userName } створить ключ userName, а не name. Якщо ключ має називатися інакше, пишіть { name: userName }.
Плутати скорочення з обчислюваним ключем. { key } дає ключ "key", а { [key]: value } бере ім'я ключа зі значення змінної key.
Забувати, що властивість може затінити іншу. У літералі { x, x: 5 } перемагає останнє входження, тому результат буде { x: 5 }.
Думати, що це щось змінює в об'єкті. Скорочення впливає лише на вигляд коду; властивості створюються звичайні, зі стандартними дескрипторами.
Використовувати в старому середовищі без транспіляції. Це синтаксис ES6, тому дуже старі рушії без Babel його не зрозуміють.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.