Оригінальна публікація: 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
.
Сподіваюсь, ви щось вивчили. Будь ласка, поділіться публікацією, якщо вона була корисною :)