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

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

Это базовая операция в JavaScript, но есть много способов, и каждый имеет свои особенности. Расскажу про самые практичные подходы и когда их использовать.

1. Простое присваивание (самый частый способ)

const user = { name: 'Alice' };
user.age = 30;
console.log(user); // { name: 'Alice', age: 30 }

Это самый быстрый и понятный способ. Объект мутируется в месте.

Проблема: если объект был заморожен (Object.freeze()), будет ошибка в strict mode.

2. Использование скобочной нотации

const user = { name: 'Alice' };
user['age'] = 30;

// Если название свойства в переменной
const key = 'email';
user[key] = 'alice@example.com';

console.log(user); // { name: 'Alice', age: 30, email: 'alice@example.com' }

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

• Когда название свойства динамическое (в переменной)
• Когда название содержит спецсимволы (user['first-name'])
• Когда название начинается с цифры (user['0-index'])

3. Object.assign() — для добавления нескольких свойств

const user = { name: 'Alice' };
Object.assign(user, { age: 30, email: 'alice@example.com' });
console.log(user); // { name: 'Alice', age: 30, email: 'alice@example.com' }

Плюсы:

• Добавляет сразу несколько свойств
• Можно объединить несколько объектов

Минусы:

• Мутирует оригинальный объект

4. Spread оператор (...) — функциональный подход

const user = { name: 'Alice' };
const updatedUser = { ...user, age: 30 };
console.log(updatedUser); // { name: 'Alice', age: 30 }
console.log(user); // { name: 'Alice' } — оригинал не изменился

Плюсы:

• НЕ мутирует оригинал
• Идеально для React (нужны новые объекты)
• Читаемо и современно

Минусы:

• Создаёт новый объект (небольшой оверхед памяти)

5. Object.defineProperty() — для большего контроля

const user = { name: 'Alice' };

Object.defineProperty(user, 'age', {
  value: 30,
  writable: true,      // Можно ли изменить?
  enumerable: true,    // Видна ли в for...in?
  configurable: true   // Можно ли удалить?
});

console.log(user); // { name: 'Alice', age: 30 }

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

• Когда нужен контроль над свойствами (read-only, скрытые свойства)
• Редко в обычном коде, часто в библиотеках

// Пример: read-only свойство
Object.defineProperty(user, 'id', {
  value: 123,
  writable: false // Нельзя изменить
});

user.id = 456; // Ошибка в strict mode

6. Условное добавление свойства

const user = { name: 'Alice' };

// Способ 1: if
if (shouldAddAge) {
  user.age = 30;
}

// Способ 2: && оператор (очень компактно)
shouldAddAge && (user.age = 30);

// Способ 3: spread оператор (функциональный)
const updatedUser = {
  ...user,
  ...(shouldAddAge && { age: 30 })
};

console.log(updatedUser);

7. Добавление свойства внутри цикла

const users = [
  { name: 'Alice' },
  { name: 'Bob' },
  { name: 'Charlie' }
];

// Способ 1: Мутация
users.forEach((user, index) => {
  user.id = index + 1;
});

// Способ 2: Создание новых объектов (лучше)
const updatedUsers = users.map((user, index) => ({
  ...user,
  id: index + 1
}));

console.log(updatedUsers);
// [
//   { name: 'Alice', id: 1 },
//   { name: 'Bob', id: 2 },
//   { name: 'Charlie', id: 3 }
// ]

8. Добавление вычисляемого свойства

const firstName = 'Alice';
const lastName = 'Smith';

// Способ 1: вычисленное свойство в объекте
const user = {
  firstName,
  lastName,
  fullName: firstName + ' ' + lastName // Статичное
};

// Способ 2: getter (динамичное, пересчитывается каждый раз)
const user2 = {
  firstName,
  lastName,
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(user2.fullName); // 'Alice Smith'
user2.firstName = 'Bob';
console.log(user2.fullName); // 'Bob Smith' — автоматически обновилось

9. Добавление методов к объекту

const user = { name: 'Alice', age: 30 };

// Способ 1: функция как свойство
user.greet = function() {
  return `Hello, I am ${this.name}`;
};

// Способ 2: стрелочная функция (не работает с this)
user.calculateAge = () => {
  // this здесь не сработает как ожидается
};

// Правильно для методов
user.getDescription = function() {
  return `${this.name} is ${this.age} years old`;
};

console.log(user.greet()); // 'Hello, I am Alice'
console.log(user.getDescription()); // 'Alice is 30 years old'

10. Массовое добавление свойств из другого источника

const user = { name: 'Alice' };
const defaults = { age: 0, role: 'user' };

// Способ 1: Object.assign (мутирует)
Object.assign(user, defaults);

// Способ 2: spread (функциональный, более современный)
const merged = { ...defaults, ...user }; // user перезаписывает defaults

console.log(merged);
// { name: 'Alice', age: 0, role: 'user' }

Сравнение способов

Практический пример: добавление свойства в React

// Плохо: мутация
const handleAddAge = () => {
  user.age = 30; // Мутация
  setUser(user); // React может не обнаружить изменение
};

// Хорошо: создание нового объекта
const handleAddAge = () => {
  setUser({ ...user, age: 30 });
};

// Или:
const handleAddAge = () => {
  setUser(prev => ({ ...prev, age: 30 }));
};

Ключевой вывод

Для добавления свойства в объект в большинстве случаев используй:

1. Точечная нотация — если свойство одно и оно статично

   user.age = 30;
   

2. Spread оператор — если работаешь с React или нужна функциональность

   const updated = { ...user, age: 30 };
   

3. Скобочная нотация — если свойство динамичное

   user[dynamicKey] = value;
   

Выбирай инструмент в зависимости от контекста!