Сравнение способов доступа к свойствам в JavaScript: . vs []

Быстрый ответ

Для обращения к статическим и верно именованным свойствам объекта в JavaScript предпочтительнее использовать точечную нотацию (object.property). Однако, при работе с динамическими свойствами или названиями, которые содержат специальные символы, следует применять нотацию с квадратными скобками (object['property']). Рассмотрим это на примере:

let obj = { a: 1, 'b c': 2 };

console.log(obj.a);         // точечная нотация: имя свойства состоит только из допустимых символов 
console.log(obj['b c']);    // нотация с квадратными скобками: имя содержит пробел

Выбор между точечной нотацией и нотацией с квадратными скобками также определяется стилистическими требованиями к оформлению кода и его особенностями.

Учет правил именования свойств

Использование зарезервированных ключевых слов

При использовании зарезервированных ключевых слов с точечной нотацией могут появляться ошибки:

let obj = { class: 'A' }; // SyntaxError: 'class' не допускается

В этом случае следует использовать нотацию с квадратными скобками:

let obj = { 'class': 'A' };
console.log(obj['class']); // Выводит 'A': в скобках проблем не возникнет

Подробнее об этом расскажет наш спикер на видео

Работа с числовыми ключами

Точечная нотация не предназначена для работы с числовыми ключами:

let arrayLikeObj = { 0 : 'a', 1 : 'b' };

console.log(arrayLikeObj.0);  // SyntaxError: точечная нотация не предусматривает использование чисел

Нотация с квадратными скобками позволяет эффективно обходить это ограничение:

console.log(arrayLikeObj[0]); // Выводит 'a': скобки универсальны

Обращение к динамическим именам свойств и выполнение выражений

Использование переменных в качестве ключей

Для свойств с динамическими именами незаменима нотация в скобках:

let propertyName = 'username';
let user = { [propertyName]: 'Alex123' };

console.log(user.username); // Выводит 'Alex123': используем переменную как ключ

Применение выражений для имен свойств

Скобки позволяют вставлять сложные выражения:

let suffix = 'name';
console.log(user['user' + suffix]); // Выводит 'Alex123': используем конкатенацию в скобках

Использование специальных символов и пробелов в именах свойств

Специальные символы и пробелы в именах свойств несовместимы с точечной нотацией. Нотация с квадратными скобками решает эту проблему:

let peculiarObj = {
  'hello-world': true,
  'data-123': 'xyz'
};

console.log(peculiarObj['hello-world']); // Выводит true: скобки позволяют всё!

Генерация кода и работы со специфическими случаями

Генераторы скриптов и динамический код

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

Устаревший код и хитрости для IE8

При работе с устаревшим кодом, особенно для IE8, где возникают проблемы с зарезервированными словами, применяется нотация в скобках:

let oldIEObject = {
    'class': 'old-school',
    'default': 'value' // 'default' – зарезервированное слово
};

// Для IE8 подходят скобки:
console.log(oldIEObject['class']);       // Выводит 'old-school'
console.log(oldIEObject['default']);

Поддержание читаемости и доступности кода

Нотация с квадратными скобками требует большего внимания при написании, но она обеспечивает доступность использования в сложных случаях. При уверенности в корректности имени свойства и его соответствии правилам именования, точечная нотация делает код более читаемым:

let car = {
  make: 'Ford',
  model: 'Mustang'
};

console.log(car.make); // Чисто и ясно

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

console.log(car['model']); // Технически верно, но субъективно труднее воспринимается

Визуализация

Вот сравнение основных отличий между точечной нотацией (obj.property) и нотацией с квадратными скобками (obj["property"]):

        Задача   | Точечная нотация 🔑 | Нотация с квадратными скобками 🛠️
----------------|-------------------|---------------------
Простой доступ  | ✔️ Прямая работа с свойствами   | ❌ Требуется создать ключ
Переменные в ключах | ❌ Недоступны    | ✔️ Поддерживаются
Специальные символы и пробелы| ❌ Запрещены    | ✔️ Допускаются
Вычисление свойства | ❌ Ограничено    | ✔️ Без ограничений
Переименование     | ❌ Фиксируется в коде   | ✔️ Может быть динамическим

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

// Точечная нотация: Как хозяин дома
house.door = "Open Sesame"

// Нотация в скобках: Как эксперт-взломщик
house["any" + "Door" + 123] = "Let me in"

Полезные сценарии использования каждой из нотаций

Обращение к элементам массива

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

let colors = ['red', 'green', 'blue'];
let index = 2;

console.log(colors[index]); // Выводит 'blue': индексы динамичны

Перебор свойств

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

for (let key in obj) {
  console.log(obj[key]); // пройдемся по свойствам, как по тропинке
}

Работа с JSON

При работе с JSON обращение к свойствам через скобки является стандартным подходом, так как свойства воспринимаются как строки:

let jsonData = '{"name": "John", "age": 31}';
let parsedData = JSON.parse(jsonData);

console.log(parsedData['age']); // Выводит 31: извлекаем данные из JSON через скобки