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

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

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

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

Контент

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

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

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

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

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

**скорочений запис властивостей** (або *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' }` | Можна змішувати |
| Працює з функціями | Так | Спрощує повернення об'єктів |

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

Для рев’юера

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

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