Оригінальна публікація: Dot Notation vs Bracket Notation for Object Properties – What's the Difference?

Отримати доступ до властивостей об’єкта у JavaScript можна декількома способами. А ось найпопулярнішими є точкова нотація та дужкова нотація.

У цій публікації я розповім різницю між ними.

Завдяки точковій та дужковій нотаціям ви можете:

  • отримати доступ до значення властивості за ключем
  • змінити значення існуючої властивості за ключем
  • додати нову властивість до об’єкта

Однак ці способи отримують доступ до властивостей по-різному і використовуються у різних ситуаціях.

Точкова нотація

Точкова нотація передбачає використання крапки (.) та ключа, щоб отримати властивість. Ось синтаксис:

об’єкт.ключ

Після крапки потрібно написати ключ властивості, яку хочемо отримати. Цей вираз поверне значення властивості. Ось приклад:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const target = obj.name
// deeecode

Використавши крапку та ключ name (.name), ми отримали «deeecode», що є значенням властивості name.

Цю нотацію також можна використовувати, щоб змінити існуючу властивість:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

obj.age = 100

console.log(obj)
// {
//   name: "deeecode",
//   age: 100,
//   language: "javascript"
// }

Ми змінили властивість age.

За допомогою такого підходу також можна додати нову властивість:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

obj.location = "Mercury"

console.log(obj)
// {
//   name: "deeecode",
//   age: 80,
//   language: "javascript",
//   location: "Mercury"
// }

Ми додали властивість location.

Але цей підхід має обмеження, які ми незабаром розглянемо. Далі розберемося, як працює дужкова нотація.

Ось відеоверсія цієї теми, якщо вам цікаво.

Дужкова нотація

Дужкова нотація передбачає використання квадратних дужок, у яких знаходиться вираз, який оцінюється як значення. Це значення служить ключем для доступу до властивості. Ось синтаксис:

об’єкт[вираз]

Вираз у дужках оцінюється як ключ властивості, до якої ви хочете отримати доступ, та цей вираз поверне значення властивості. Розглянемо приклад:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const target = obj["name"]
// deeecode

Використавши квадратні дужки та вираз "name" (["name"]), ми отримали «deeecode», що є значенням властивості name.

Цю нотацію також можна використовувати, щоб змінити існуючу властивість:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

obj["age"] = 100

console.log(obj)
// {
//   name: "deeecode",
//   age: 100,
//   language: "javascript"
// }

Ми змінили властивість age за допомогою виразу "age".

За допомогою квадратних дужок також можна додати нову властивість:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

obj["location"] = "Mercury"

console.log(obj)
// {
//   name: "deeecode",
//   age: 80,
//   language: "javascript",
//   location: "Mercury"
// }

Ми додали нову властивість location за допомогою виразу "location".

Дужкова нотація має більше можливостей, ніж точкова нотація. Зараз поясню.

Різниця між точковою та дужковою нотаціями

Точкова нотація дозволяє лише статичні ключі, а дужкова нотація приймає динамічні ключі. Статичний ключ означає, що ключ вводиться напряму, а динамічний ключ означає, що ключ обчислюється у виразі.

Розглянемо декілька прикладів.

Використання обох підходів для доступу до властивостей

Починаємо з точкової нотації:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "language"

const target = obj.myKey
// undefined

Я призначив значення «language» до змінної myKey. Я очікую, що при використанні точкової нотації (тобто obj.myKey) «myKey» зміниться на «language». Тобто це читатиметься як obj.language та поверне «javascript».

Однак цього не стається, а результатом є undefined.

Причиною є те, що точкова нотація приймає лише статичні ключі. Тому коли ви використовуєте obj.myKey, JavaScript шукає властивість з ключем myKey у obj. Але такої властивості не існує, тому ми отримуємо undefined.

А ось дужкова нотація дозволяє динамічні ключі. Оскільки ця нотація приймає вирази, ви можете використати будь-який вираз, який дорівнюватиме значенню. Це може бути:

  • hello + Hi, що дорівнюватиме helloHi у ролі ключа
  • returnKey(), що дорівнюватиме значенню у ролі ключа
  • isTrue ? "trueKey" : "falseKey", що дорівнюватиме «trueKey» або «falseKey» у ролі ключа
  • variable, що дорівнюватиме значенню змінної у ролі ключа

Тому, використовуючи попередній приклад, ми можемо використати наступне:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "language"

const target = obj[myKey]
// javascript

Переданий у квадратні дужки вираз myKey є змінною. Цей вираз перетвориться на «language», що є значенням змінної. Використовуючи це значення, квадратні дужки можуть отримати значення властивості, тобто «javascript».

А якщо ви передасте рядок "myKey", ви отримаєте undefined:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "language"

const target = obj["myKey"]
// undefined

Причиною є те, що рядок "myKey" оцінюється як значення "myKey", яке служить як ключ для отримання властивості. Оскільки в obj немає ключа myKey, поверненим значенням є undefined.

Використання обох підходів для зміни властивостей

Розпочнемо з точкової нотації:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "age"

obj.myKey = 100

console.log(obj)
// {
//   name: "deeecode",
//   age: 80,
//   language: "javascript",
//   myKey: 100
// }

Ми маємо myKey зі значенням «age». Спроба виконати obj.myKey = 100, щоб змінити властивість age, не спрацює. Причина в тому, що точкова нотація приймає статичний ключ. Тому obj.myKey приймає myKey як ключ. Оскільки в obj не існує mykey, інструкція додає ключ. Отже, obj має новий ключ myKey зі значенням 100.

Якщо використати дужкову нотацію, поведінка інша:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "age"

obj[myKey] = 100

console.log(obj)
// {
//   name: "deeecode",
//   age: 100,
//   language: "javascript"
// }

Замість того, щоб додавати нову властивість myKey до obj, дужкова нотація змінює властивість age. Причина в тому, що ми передаємо myKey як вираз до квадратних дужок. Цей вираз у ролі змінної перетворюється на "age", що є значенням змінної.  Використовуючи «age» у ролі ключа, цей підхід змінює значення властивості age на 100.

А якщо нам потрібно додати нову властивість за допомогою квадратних дужок, ми передаємо вираз, що повертає новий ключ, який не існує. Наприклад:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "location"

obj[myKey] = "Mercury"

console.log(obj)
// {
//   name: "deeecode",
//   age: 100,
//   language: "javascript",
//   location: "Mercury"
// }

Змінна myKey отримує нове значення "location". Передавши його до квадратних дужок та призначивши значення «Mercury», ми отримаємо нову властивість з парою ключ-значення: location та «Mercury».

Яку нотацію використовувати?

Ми розглянули кожну нотацію, використавши різні приклади для доступу/зміни існуючих властивостей та додавання нових властивостей. Отож, яку нотацію використовувати при написанні коду JavaScript?

Головним фактором, який допоможе прийняти рішення, є ключ властивості, до якої ви хочете отримати доступ. Якщо це статичний ключ, використовуйте точкову нотацію. А якщо це динамічний ключ (обчислюється у виразі під час виконання), використовуйте дужкову нотацію.

Точкова нотація корисна, якщо ви знаєте властивість заздалегідь. Ви просто використовуєте object.key, щоб прочитати/змінити існуючу властивість чи додати нову властивість.

Дужкова нотація корисна, якщо ви хочете динамічно отримати доступ до властивості. Ключ такої властивості може походити від виразів типу getKey(), "my" + "key" чи keyVariable.

Сподіваюсь, ви щось вивчили. Будь ласка, поділіться публікацією, якщо вона була корисною :)