LearnJS

Добавление и удаление свойств объекта в JavaScript

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

let user = {
  name: 'Анна',
};

user.age = 28;

console.log(user); // { name: 'Анна', age: 28 }

В этом примере у объекта сначала было только свойство name, а затем появилось свойство age.

Что делает присваивание

Для добавления и изменения свойства используется обычное присваивание через знак =.

object.property = value;

Если свойства с таким именем нет, оно будет создано. Если свойство уже есть, его значение изменится.

let user = {};

user.name = 'Анна'; // добавили свойство
user.name = 'Мария'; // изменили свойство

console.log(user.name); // Мария

Добавление через точку

Если имя свойства простое и заранее известно, удобнее использовать точку.

let product = {};

product.title = 'Клавиатура';
product.price = 2500;
product.inStock = true;

console.log(product);

Такой вариант хорошо читается и подходит для большинства обычных свойств.

Добавление через квадратные скобки

Квадратные скобки нужны, когда имя свойства записано строкой или содержит пробелы, дефис и другие символы.

let product = {};

product['main category'] = 'accessories';
product['item-code'] = 'kb-102';

console.log(product['main category']); // accessories
console.log(product['item-code']); // kb-102

Через точку к таким свойствам обратиться не получится, поэтому для них используют скобки.

Имя свойства в переменной

Иногда имя свойства становится известно только во время выполнения программы. В таком случае его можно взять из переменной.

let user = {
  name: 'Анна',
};

let field = 'email';

user[field] = 'anna@example.com';

console.log(user.email); // anna@example.com

В переменной field лежит строка ‘email’. Поэтому запись user[field] создает свойство email.

Изменение существующего свойства

Изменение выглядит так же, как добавление. Разница только в том, что свойство уже есть в объекте.

let task = {
  title: 'Выучить объекты',
  done: false,
};

task.done = true;

console.log(task.done); // true

Через скобки это работает так же.

let task = {
  title: 'Выучить объекты',
  done: false,
};

let field = 'done';

task[field] = true;

console.log(task.done); // true

Удаление свойства через delete

Для удаления свойства используют оператор delete.

let user = {
  name: 'Анна',
  age: 28,
  city: 'Москва',
};

delete user.city;

console.log(user); // { name: 'Анна', age: 28 }

delete удаляет из объекта всю пару ключ: значение.

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

let user = {
  name: 'Анна',
  age: 28,
};

let field = 'age';

delete user[field];

console.log(user); // { name: 'Анна' }

Если свойства нет, delete не вызовет ошибку.

let user = {
  name: 'Анна',
};

delete user.age;

console.log(user); // { name: 'Анна' }

Удалить или очистить значение

Удаление свойства и очистка значения - это разные действия.

let user = {
  name: 'Анна',
  city: 'Москва',
};

delete user.city;

console.log('city' in user); // false

После delete свойства city в объекте больше нет.

let user = {
  name: 'Анна',
  city: null,
};

console.log('city' in user); // true

Здесь свойство city осталось, но его значение пустое. Такой вариант используют, когда поле должно быть в объекте, но значения пока нет.

Объект, объявленный через const

const запрещает присвоить переменной новый объект, но не запрещает менять свойства уже созданного объекта.

const user = {
  name: 'Анна',
};

user.age = 28;
delete user.name;

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

Такой код работает, потому что переменная user по-прежнему ссылается на тот же объект.

const user = {
  name: 'Анна',
};

user = {}; // ошибка

А вот заменить объект целиком уже нельзя.

Итого

  • Присваивание добавляет новое свойство или изменяет существующее.
  • Через точку удобно добавлять свойства с простыми именами.
  • Квадратные скобки нужны для сложных имен и имен из переменных.
  • delete удаляет свойство из объекта полностью.
  • null оставляет свойство в объекте, но показывает, что значения нет.
  • У объекта, объявленного через const, свойства все равно можно менять.