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

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

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

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

Контент

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

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

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

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

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

## 1. Через **крапку** (`.`)

```javascript
const user = { name: 'Tim' };

user.age = 25; // додаємо нову властивість

console.log(user);
// { name: 'Tim', age: 25 }
```

Працює, якщо ім'я властивості - **валідний ідентифікатор** (без пробілів, без спецсимволів, не починається з числа).

---

## 2. Через **квадратні дужки** (`[]`)

```javascript
const user = { name: 'Tim' };

user['city'] = 'Kyiv';

console.log(user);
// { name: 'Tim', city: 'Kyiv' }
```

Цей спосіб підходить, якщо:

- ключ зберігається у **змінній**:

```javascript
  const key = 'email';
  user[key] = 'tim@mail.com';
  ```
- або містить **невалідні символи**:

```javascript
  user['favorite color'] = 'blue';
  ```

---

## 3. За допомогою **Object.assign()**

```javascript
const user = { name: 'Tim' };

Object.assign(user, { age: 25, city: 'Kyiv' });

console.log(user);
// { name: 'Tim', age: 25, city: 'Kyiv' }
```

Можна одразу додати кілька властивостей.
Метод змінює вихідний об'єкт.

---

## 4. За допомогою **spread-оператора (**`...`**)** - створює новий об'єкт

```javascript
const user = { name: 'Tim' };

const updatedUser = { ...user, age: 25 };

console.log(updatedUser);
// { name: 'Tim', age: 25 }
```

Вихідний об'єкт **не змінюється** - створюється **нова копія** (іммутабельний спосіб).

---

## 5. Через **Object.defineProperty()** (рідше, але гнучко)

```javascript
const user = {};

Object.defineProperty(user, 'age', {
  value: 25,
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(user); // { age: 25 }
```

Дозволяє точно налаштувати властивість: зробити її, наприклад, тільки для читання або прихованою під час перебору.

---

## ПІДСУМОК

| Спосіб | Змінює вихідний об'єкт | Підходить для |
|---|---|---|
| `obj.key = value` | Так | простих випадків |
| `obj['key'] = value` | Так | динамічних ключів |
| `Object.assign()` | Так | масового додавання |
| `{ ...obj, key: value }` | Ні | створення нового об'єкта |
| `Object.defineProperty()` | Так | особливих налаштувань властивості |

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

Для рев’юера

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

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