Свойства объекта в JavaScript

Объект удобно представлять как набор подписанных значений. Каждая такая запись называется свойством.

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

В этом примере у объекта user три свойства: name, age и isAdmin.

Что такое свойство объекта

Свойство состоит из имени и значения. Имя еще часто называют ключом.

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

name - это имя свойства. ‘Анна’ - значение свойства.

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

let user = {
  name: 'Анна',
  age: 28,
  skills: ['HTML', 'CSS', 'JavaScript'],
  contacts: {
    email: 'anna@example.com',
  },
};

Имена свойств

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

let course = {
  title: 'JavaScript',
  lessons: 24,
};

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

let course = {
  title: 'JavaScript',
  'lesson count': 24,
  'main-topic': 'objects',
  '2026': 'new course',
};

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

Получение значения свойства

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

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

console.log(user.name); // Анна
console.log(user.age); // 28

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

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

let field = 'age';

console.log(user[field]); // 28
console.log(user['home city']); // Москва

В записи user[field] JavaScript сначала смотрит значение переменной field, а потом ищет свойство с таким именем.

Добавление и изменение свойств

Свойство можно добавить после создания объекта.

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

user.age = 28;
user.city = 'Москва';

console.log(user);

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

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

user.age = 29;

console.log(user.age); // 29

То же самое работает через квадратные скобки.

let user = {};

user['home city'] = 'Москва';

console.log(user['home city']); // Москва

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

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

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

delete user.city;

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

delete удаляет свойство из объекта полностью. Если свойство должно остаться, но значения пока нет, чаще записывают null.

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

Короткая запись свойств

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

let name = 'Анна';
let age = 28;

let user = {
  name,
  age,
};

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

Такая запись равнозначна обычной.

let user = {
  name: name,
  age: age,
};

Вычисляемые свойства

Имя свойства можно взять из переменной прямо при создании объекта. Для этого имя записывают в квадратных скобках.

let field = 'email';

let user = {
  name: 'Анна',
  [field]: 'anna@example.com',
};

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

В этом примере JavaScript взял значение переменной field и создал свойство email.

Такой подход удобен, когда имя свойства зависит от данных, которые стали известны только во время выполнения программы.

let settingName = 'theme';
let settingValue = 'dark';

let settings = {
  [settingName]: settingValue,
};

console.log(settings.theme); // dark

Проверка наличия свойства

Проверить, есть ли свойство в объекте, можно с помощью оператора in.

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

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

in проверяет именно наличие свойства, а не его значение. Поэтому для email результат true, хотя значение равно undefined.

Итого

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

  • Свойство состоит из имени и значения.
  • Через точку удобно обращаться к простым именам: user.name.
  • Квадратные скобки нужны для сложных и динамических имен: user[field].
  • Присваивание создает новое свойство или изменяет существующее.
  • delete удаляет свойство из объекта.
  • in проверяет, есть ли свойство в объекте.