Перевод статьи 3 Ways To Access Object Properties in JavaScript.

В этой статье подробно рассматриваются особенности использования трех методов доступа к значениям свойств объектов, а также их преимущества и недостатки. Ее материалы помогут начинающим разработчикам изучить основы синтаксиса языка Javascript, а также в дальнейшем грамотно применять их на практике.

Получить доступ к свойствам объекта в JavaScript возможно с использованием следующих трех методов доступа:

1. С использованием точки (точечная нотация): object.property;
2. С использованием квадратных скобок: object['property'];
3. Деструктуризация объекта (деструктурирующее присваивание): const { property } = object.

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

1. Метод доступа с использованием точки

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

expression.identifier

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

Например, давайте получим доступ к свойству name объекта hero:

const hero = {
  name: 'Batman'
};

// Доступ к значению свойства с использованием точки
hero.name; // => 'Batman'

Таким образом, hero.name — это метод доступа к свойству с использованием точки, который в нашем случае получает значение свойства name объекта hero.

Для доступа к свойствам, находящимся на более глубоком уровне вложенности можно использовать это метод по цепочке: object.prop1.prop2.

Используйте метод доступа к свойству с синтаксисом точки, в том случае если вам заранее известно имя свойства . Для свойств, имена которых состоят из нескольких слов, доступ к их значению «через точку» не работает.

1.1 Метод доступа с использованием точки требует использования корректных идентификаторов

Так метод доступа к свойствам, использующий точку работает правильно, если имя свойства объекта является допустимым идентификатором. Так корректный идентификатор в языке JavaScript может содержать символы Unicode, $, _ и цифры 0..9, но не может начинаться с цифры.

Обычно это не является проблемой, потому что на практике мы в качестве имен свойств чаще всего используем корректные идентификаторы, например, name, address, street, createdBy (название, адрес, улица, создан).

Но иногда подобранные по этому принципу названия свойств не будут корректными как идентификаторы:

const weirdObject = {
  'prop-3': 'three',
  '3': 'three'
};

console.log(weirdObject.prop-3); // => NaN    
console.log(weirdObject.3); // исключение: SyntaxError: Unexpected number

Поскольку prop-3 и 3 не являются допустимыми идентификаторами, то наш метод доступа к свойству с использованием точечной нотации не работает:

• значение свойства weirdObject.prop-3 определяется как NaN вместо ожидаемого ‘tree’;
• weirdObject.3 приводит к возбуждению исключения SyntaxError (ошибка синтаксиса).

Подумайте, почему результат выполнения выражения weirdObject.prop-3 равен NaN? Пожалуйста, напишите свой ответ в комментарии ниже!

Тем не менее для получения доступа к значениям свойств, имена которых представляют собой некорректные идентификаторы Javascript, можно использовать такой метод, как доступ с “квадратными скобками” (его мы рассмотрим ниже):

const weirdObject = {
  'prop-3': 'three',
  '3': 'three'
};

console.log(weirdObject['prop-3']); // => 'three'
console.log(weirdObject[3]);        // => 'three' 

Используя синтаксис метода доступа, использующего квадратные скобки, мы без проблем получим значения нужных свойств и даже с такими достаточно специфическими именами: weirdObject['prop-3'] и weirdObject[3].

2. Метод доступа к свойствам объекта, использующий квадратные скобки

Метод доступа с квадратными скобками имеет следующий синтаксис:

expression1[expression2]

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

Рассмотрим следующий пример:

const property = 'name';
const hero = {
  name: 'Batman'
};

// Square brackets property accessor:
console.log(hero['name']);   // => 'Batman'
console.log(hero[property]); // => 'Batman'

Обе инструкции hero['name'] и hero[property] корректно считывают свойство name , используя синтаксис с квадратными скобками.

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

3. Деструктуризация объекта

Базовый синтаксис деструктуризации объекта довольно прост:

const { identifier } = expression;

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

Рассмотрим следующий пример:

const hero = {
  name: 'Batman'
};

// Деструктуризация объекта
const { name } = hero;
console.log(name); // => 'Batman'

Инструкция const { name } = heroвыполняет деструктуризацию объекта. Деструктуризация определяет переменную name, которой передается значение свойства name объекта hero.

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

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

Обратите внимание, что вы можете извлечь значения стольких свойств, сколько захотите:

const { identifier1, identifier2, .., identifierN } = expression;

3.1 Используем псевдоним переменной для деструктуризации

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

const { identifier: aliasIdentifier } = expression;

Здесь identifier имя свойства к которому мы хотим получить доступ, aliasIdentifier имя, создаваемой переменной, а expression соответственно содержит или возвращает объект. После деструктуризации переменная aliasIdentifier будет содержать значение свойства identifier.

Рассмотрим следующий пример:

const hero = {
  name: 'Batman'
};

// Деструктуризация объекта:
const { name: heroName } = hero;
console.log(heroName); // => 'Batman'

В инструкции const { name: heroName } = hero происходит деструктуризация объекта hero. В ходе его деструктуризации определяется новая переменная heroName (вместо имени name соответствующего названию свойства, как в предыдущем примере) и присваивает heroName значение hero.name.

3.2 Динамическое имя свойства

Что именно делает деструктуризацию объектов еще более полезной, так это то, что вы можете извлекать в переменные их свойства с динамически изменяющимися именами:

const { [expression1]: identifier } = expression2;

Первое выражение expression1 возвращает имя свойства к которому мы хотим получить доступ. В identifier указывается имя переменной, создающейся после деструктуризации, в которую затем будет передано извлекаемое значение. Второе выражение expression2 должно возвращать или содержать объект, который мы хотели бы деструктурировать.

Рассмотрим следующий пример:

const property = 'name';
const hero = {
  name: 'Batman'
};

// Деструтуризация объекта:
const { [property]: name } = hero;
console.log(name); // => 'Batman'

Так в инструкции const {[property]: name} = hero мы деструктурируем объект hero и далее динамически, во время выполнения кода, определяем название его свойства, которое нам необходимо извлечь.

4. Случай когда свойство объекта не существует

Если свойство объекта, к значению которого нам необходимо получить доступ, не существует, то все три, рассмотренных нами выше, синтаксиса методов доступа будут возвращать значение undefined:

const hero = {
  characterName: 'Batman'
};

console.log(hero.name);    // => undefined
console.log(hero['name']); // => undefined
const { name } = hero;
console.log(name);         // => undefined

Свойства name не существует в объекте hero. Поэтому результатом использования методов доступа с точечной нотацией hero.name, квадратными скобками hero ['name'], а также содержимым переменной name после деструктуризации будет значение undefined .

5. Вывод

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

Синтаксис доступа к свойствам объекта с использованием точки object.property прекрасно работает, когда вам заранее известно название свойства property. А также для случая когда его имя представляет собой корректный идентификатор Javascript.

В случае если имя свойства определяется динамически или не является допустимым идентификатором, то лучшей альтернативой являются использование метода доступа с квадратными скобками: object [propertyName].

При деструктуризации объекта извлекается значение свойства непосредственно в создаваемую переменную: {property} = object. Кроме того, вы можете извлечь динамические имена свойств объекта (то есть определяемые во время выполнения кода): {[PropertName]: variable} = object.

Какой метод доступа к свойствам объектов вам выбрать зависит от конкретной задачи, которую решает ваш код. Надеюсь, что представленные на ваше рассмотрение материалы этой статьи помогут вам в будущем.