LearnJS

Доступ к свойствам объекта в JavaScript

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

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

console.log(user.name); // Анна
console.log(user['name']); // Анна

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

Два способа получить свойство

Синтаксис через точку выглядит короче и читается проще.

object.property

Синтаксис через квадратные скобки более гибкий.

object['property']

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

Доступ через точку

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

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

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

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

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

Квадратные скобки позволяют передать имя свойства строкой.

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

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

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

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

Главный случай для квадратных скобок - имя свойства хранится в переменной.

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

let field = 'name';

console.log(user[field]); // Анна

JavaScript сначала получает значение переменной field. В ней лежит строка ‘name’, поэтому в итоге читается свойство user.name.

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

let field = 'name';

console.log(user.field); // undefined

user.field ищет свойство с именем field, а не значение переменной field.

Свойства со сложными именами

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

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

console.log(course['lesson count']); // 24
console.log(course['main-topic']); // objects
console.log(course['2026']); // new course

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

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

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

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

user.name = 'Мария';
user['age'] = 30;

console.log(user); // { name: 'Мария', age: 30 }

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

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

let settings = {
  theme: 'light',
};

let option = 'theme';

settings[option] = 'dark';

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

Вложенные свойства

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

let user = {
  name: 'Анна',
  contacts: {
    email: 'anna@example.com',
    'home city': 'Москва',
  },
};

console.log(user.contacts.email); // anna@example.com
console.log(user.contacts['home city']); // Москва

Главное - на каждом шаге выбрать подходящий способ доступа к нужному свойству.

Что выбрать

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

user.name

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

user[field]
user['home city']

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

Итого

  • object.property - короткий способ для простых имен свойств.
  • object[‘property’] - способ для строковых имен.
  • object[field] - доступ к свойству, имя которого лежит в переменной.
  • object.field не использует переменную field, а ищет свойство с таким именем.
  • Точку и квадратные скобки можно комбинировать при работе с вложенными объектами.