Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Скорочений запис властивостей». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Скорочений запис властивостей (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 його не зрозуміють.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати668 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.