Как добавить новое свойство объекту?

Краткий ответ

Добавить свойство объекту можно несколькими способами: через точечную нотацию, квадратные скобки, Object.assign или spread-оператор. Самые простые и часто используемые — это точечная нотация и квадратные скобки.

Полный ответ

В JavaScript есть несколько способов добавить новое свойство к существующему объекту. Все они простые, но имеют свои особенности.

Способы добавления свойств

1. Точечная нотация

Самый простой и часто используемый способ:

const user = { name: 'Иван' };
user.age = 25; // Добавляем свойство age

2. Квадратные скобки

Позволяет использовать переменные в качестве ключей:

const user = { name: 'Иван' };
user['city'] = 'Москва'; // Добавляем свойство city

3. Object.assign

Добавляет несколько свойств сразу:

const user = { name: 'Иван' };
Object.assign(user, { age: 25, city: 'Москва' });

4. Spread-оператор

Создаёт новый объект с добавленными свойствами:

const user = { name: 'Иван' };
const newUser = { ...user, age: 25 };

Когда что использовать

Точечная нотация

// Когда ключ — простая строка без пробелов
user.age = 25;
user.isActive = true;

Квадратные скобки

// Когда ключ — переменная или содержит пробелы
const key = 'user-age';
user[key] = 25;
user['имя пользователя'] = 'Иван';

Object.assign

// Когда нужно добавить много свойств
Object.assign(user, {
  age: 25,
  city: 'Москва',
  isActive: true
});

Spread-оператор

// Когда не хотим менять исходный объект
const newUser = { ...user, age: 25 };

Простые правила

Используй точечную нотацию когда:

Ключ — простое слово без пробелов
Ключ известен заранее

Используй квадратные скобки когда:

Ключ хранится в переменной
Ключ содержит пробелы или специальные символы
Ключ формируется динамически

Частые ошибки

1. Неправильный выбор способа

// ❌ Сложный способ для простой задачи
const user = { name: 'Иван' };
Object.assign(user, { age: 25 }); // Лишний код
 
// ✅ Простой способ
user.age = 25;

2. Попытка использовать точечную нотацию с переменными

// ❌ Не работает
const key = 'user-age';
user.key = 25; // Создаст свойство 'key', а не 'user-age'
 
// ✅ Правильно
user[key] = 25; // Создаст свойство 'user-age'

Важные моменты

Мутирующие методы — точечная нотация и квадратные скобки меняют исходный объект
Немутирующие методы — spread и Object.assign могут создавать новые объекты
Динамические ключи — только квадратные скобки позволяют использовать переменные как ключи
Простота — точечная нотация самый простой и читаемый способ
Гибкость — квадратные скобки дают больше возможностей

Добавление свойств — одна из базовых операций в JavaScript. Понимание разных способов помогает писать более чистый и эффективный код.

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪