Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Додавання властивості до об'єкта». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Властивість додають присвоєнням через крапку (`obj.key = value`) або через квадратні дужки (`obj['key'] = value`), а також через `Object.assign()`, spread-синтаксис `{ ...obj, key: value }` і `Object.defineProperty()`.** Крапка працює, коли ім'я властивості є валідним ідентифікатором; дужки потрібні для динамічних ключів або імен зі спецсимволами. `Object.assign()` додає одразу кілька властивостей і змінює початковий об'єкт, spread створює новий об'єкт і не чіпає початковий (імутабельний спосіб), а `Object.defineProperty()` дозволяє точно налаштувати дескриптор: `writable`, `enumerable`, `configurable`. ```javascript const user = { name: 'Maria' }; user.age = 25; // крапка user['city'] = 'Kyiv'; // дужки Object.assign(user, { role: 'admin' }); const copy = { ...user, active: true }; // новий об'єкт ``` **Ключове:** присвоєння, `Object.assign()` і `Object.defineProperty()` мутують об'єкт, а spread повертає нову копію.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Нову властивість додають простим присвоєнням через крапку або квадратні дужки, а коли потрібно більше контролю, використовують `Object.assign()`, spread-синтаксис або `Object.defineProperty()`.** Вибір способу зводиться до двох питань: чи ключ відомий заздалегідь і чи можна змінювати початковий об'єкт. ## Теорія ### TL;DR - `obj.key = value`, найпростіший спосіб, працює для валідних ідентифікаторів. - `obj['key'] = value`, потрібен для динамічних ключів і імен зі спецсимволами. - `Object.assign(target, source)` додає кілька властивостей одразу і змінює `target`. - `{ ...obj, key: value }` створює новий об'єкт, початковий лишається незмінним. - `Object.defineProperty()` дає повний контроль над дескриптором властивості. - `const` не забороняє додавати властивості: він фіксує саме посилання, а не вміст об'єкта. ### Швидкий приклад ```javascript const user = { name: 'Maria' }; user.age = 25; // крапка user['city'] = 'Kyiv'; // дужки console.log(user); // { name: 'Maria', age: 25, city: 'Kyiv' } ``` ### Крапка і квадратні дужки Через **крапку** (`.`): ```javascript const user = { name: 'Maria' }; user.age = 25; // додаємо нову властивість console.log(user); // { name: 'Maria', age: 25 } ``` Працює, якщо ім'я властивості є **валідним ідентифікатором**: без пробілів, без спецсимволів, не починається з цифри. Через **квадратні дужки** (`[]`): ```javascript const user = { name: 'Maria' }; user['city'] = 'Kyiv'; console.log(user); // { name: 'Maria', city: 'Kyiv' } ``` Цей спосіб підходить, якщо ключ зберігається у **змінній**: ```javascript const key = 'email'; user[key] = 'maria@example.com'; ``` або містить **невалідні символи**: ```javascript user['favorite color'] = 'blue'; ``` ### Object.assign() ```javascript const user = { name: 'Maria' }; Object.assign(user, { age: 25, city: 'Kyiv' }); console.log(user); // { name: 'Maria', age: 25, city: 'Kyiv' } ``` Можна одразу додати кілька властивостей. Метод змінює початковий об'єкт (перший аргумент) і повертає його ж. Копіювання поверхневе: вкладені об'єкти переносяться за посиланням. ### Spread-синтаксис ```javascript const user = { name: 'Maria' }; const updatedUser = { ...user, age: 25 }; console.log(updatedUser); // { name: 'Maria', age: 25 } ``` Початковий об'єкт **не змінюється**, створюється **нова копія**. Це імутабельний спосіб, саме він потрібен у React, Redux і будь-де, де порівняння стану йде за посиланням. Якщо ключ повторюється, виграє той, що записаний пізніше, тож `{ ...user, name: 'Oleh' }` перезапише ім'я. ### Object.defineProperty() ```javascript const user = {}; Object.defineProperty(user, 'age', { value: 25, writable: true, enumerable: true, configurable: true }); console.log(user); // { age: 25 } ``` Дозволяє точно налаштувати властивість: зробити її, наприклад, тільки для читання (`writable: false`) або прихованою при переборі (`enumerable: false`). Важливо: якщо прапорці не вказати явно, усі три за замовчуванням дорівнюють `false`, на відміну від звичайного присвоєння. ### Порівняння способів | Спосіб | Змінює початковий об'єкт | Підходить для | | --- | --- | --- | | `obj.key = value` | Так | прості випадки | | `obj['key'] = value` | Так | динамічні ключі | | `Object.assign()` | Так | масове додавання | | `{ ...obj, key: value }` | Ні | створення нового об'єкта | | `Object.defineProperty()` | Так | особливі налаштування властивості | ### Типові помилки - **Думати, що `const` забороняє додавати властивості.** `const user = {}` фіксує посилання, а не вміст: `user.age = 25` спрацює. Щоб заборонити зміни, потрібні `Object.freeze()` або `Object.seal()`. - **Використовувати крапку зі змінною.** `user.key = 1` створить властивість з іменем `"key"`, а не значення змінної `key`. Для змінної потрібні дужки: `user[key] = 1`. - **Вважати `Object.assign()` глибоким копіюванням.** Воно поверхневе: вкладені об'єкти лишаються спільними. Для глибокої копії беріть `structuredClone()`. - **Забувати прапорці в `Object.defineProperty()`.** Без явних `writable`, `enumerable`, `configurable` властивість буде нередаговною і невидимою для `Object.keys()` та `JSON.stringify()`. - **Мутувати об'єкт там, де очікують нове посилання.** Якщо стан порівнюється за посиланням, пряме присвоєння не спричинить оновлення, потрібен spread.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.