Как добавить пару ключ-значение в объект JavaScript?

Основные способы добавления свойств в объект

Отличный вопрос! Давайте разберем все способы по порядку, от самых простых до более продвинутых.

1. Точечная нотация (dot notation)

Самый простой и интуитивно понятный способ:

let user = { name: "Анна" };
user.email = "anna@example.com";
console.log(user); // { name: "Анна", email: "anna@example.com" }

Ограничение: имя свойства должно быть валидным идентификатором (без пробелов, дефисов, не начинаться с цифры).

2. Скобочная нотация (bracket notation)

Более гибкий способ, позволяющий использовать строки и переменные:

let user = { name: "Анна" };
let key = "email";
user[key] = "anna@example.com";

// Можно даже использовать "сложные" ключи:
user["favorite color"] = "blue"; // работает!
user["123key"] = "value"; // тоже работает

3. Object.assign()

Позволяет добавить сразу несколько свойств или скопировать их из другого объекта:

let user = { name: "Анна" };
Object.assign(user, { email: "anna@example.com", age: 25 });
console.log(user); // { name: "Анна", email: "anna@example.com", age: 25 }

4. Spread-оператор (ES2018+)

Создает новый объект, объединяя существующие свойства с новыми:

let user = { name: "Анна" };
user = { ...user, email: "anna@example.com", age: 25 };
console.log(user); // { name: "Анна", email: "anna@example.com", age: 25 }

Важные нюансы

• const не запрещает изменение объекта: даже если объект объявлен через const user = {}, вы можете добавлять/изменять его свойства. const запрещает только переприсваивание переменной.
• Мутация vs создание нового: точечная нотация, скобки и Object.assign изменяют исходный объект (мутируют его). Spread-оператор создает новый объект.
• Производительность: для единичного добавления точечная или скобочная нотация быстрее. Для массового копирования — Object.assign или spread.
• Безопасность: если ключ приходит из пользовательского ввода, используйте скобочную нотацию, чтобы избежать конфликтов с зарезервированными словами.

Рекомендации для начинающих

1. Если ключ известен заранее и является простым идентификатором — используйте точечную нотацию (obj.key = value).
2. Если ключ хранится в переменной или содержит спецсимволы — используйте скобочную нотацию (obj[key] = value).
3. Если нужно добавить несколько свойств — Object.assign() или spread-оператор.
4. Если вы работаете с иммутабельными данными (Redux, React state) — используйте spread-оператор, чтобы не мутировать исходный объект.

Все перечисленные способы корректны, выбор зависит от контекста. Главное — будьте последовательны в своем коде.

let user = { name: "Анна", email: "old@email.com" };

// Добавим, только если свойство отсутствует
if (!("phone" in user)) {
  user.phone = "+7-999-123-45-67";
}

// Или через Object.defineProperty для тонкого контроля
Object.defineProperty(user, "id", {
  value: 12345,
  writable: false,   // запретить изменение
  enumerable: true,  // будет видно в циклах
  configurable: false // запретить удаление
});

let user = {
  firstName: "Анна",
  lastName: "Иванова",
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(user.fullName); // "Анна Иванова"

let user = {};
let entries = [["name", "Анна"], ["age", 25], ["email", "anna@example.com"]];

entries.forEach(([key, value]) => {
  user[key] = value;
});
// Или более элегантно:
Object.fromEntries(entries); // { name: "Анна", age: 25, email: "anna@example.com" }