Ada dua cara untuk menyetel, mengubah, dan mengakses properti objek: notasi titik dan notasi tanda kurung.
Notasi titik
Seperti yang terlihat di beberapa contoh sebelumnya, notasi titik menggunakan titik (.
) di antara
kunci properti yang sedang diakses:
const myObj = {
"myProp": "String value."
};
myObj.myProp;
> "String value."
Anda dapat menggunakan notasi titik untuk mengakses, mengubah, atau membuat properti baru menggunakan operator penetapan:
const myObj = {};
myObj.myProp = "String value.";
myObj;
> Object { myProp: "String value." }
Membuat rantai kunci properti menggunakan notasi titik memungkinkan Anda mengakses properti objek yang merupakan properti dari suatu objek:
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myProp.childProp;
> true;
Namun, menggunakan sintaks ini ketika kunci
yang ditentukan dalam rantai mungkin tidak
dapat menyebabkan error. Dalam contoh berikut, myMissingProp
bukan
properti objek myObj
, jadi mencoba mengakses myObj.myMissingProp
menghasilkan undefined
. Mencoba mengakses properti di undefined
, seolah-olah
objek tersebut adalah objek, yang menyebabkan error:
const myObj = {
"myProp": {
"childProp" : true
}
};
> myObj.myMissingProp
> undefined
myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined
Untuk mengatasi masalah ini, ES2020 memperkenalkan "operator rantai opsional" (?.
)
untuk mengakses properti objek
bertingkat dengan aman.
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myMissingProp?.childProp;
> undefined
Kunci yang diakses menggunakan notasi titik tidak diapit tanda kutip seperti string literal. Artinya, Anda dapat menggunakan notasi titik untuk mengakses kunci properti saja yang merupakan ID yang valid:
const myObj = {
"1": true,
"key with spaces": true
};
myObj.1;
> Uncaught SyntaxError: unexpected token: numeric literal
myObj.key with spaces;
> Uncaught SyntaxError: unexpected token: keyword 'with'
Oleh karena itu, sebaiknya ikuti aturan ID saat menentukan kunci properti jika memungkinkan. Jika tidak memungkinkan bagi kunci tertentu, sintaksis notasi kurung alternatif memungkinkan Anda menetapkan dan mengakses kunci objek berbasis string yang tidak mengikuti aturan ID.
Notasi kurung
Notasi kurung menggunakan kumpulan tanda kurung ([]
) yang berisi nilai yang mengevaluasi
string (atau Simbol) yang mewakili
kunci properti.
const myObj = {
"myProp": "String value."
};
myObj["myProp"];
> "String value."
{i>Syntax<i} ini jauh lebih permisif, dan berpotensi cukup permisif
membingungkan, karena nilai dalam tanda kurung dievaluasi sebagai literal string
terlepas dari jenis datanya. Misalnya, di sini nilai boolean false
dan
nilai angka 10
digunakan untuk mengakses properti yang terkait dengan string
kunci literal "false"
dan "10"
:
const myObj = {
"false": 25,
"10" : true,
"key with spaces": true
};
myObj[false];
> 25
myObj[10];
> true
myObj["key with spaces"];
> true
Kekuatan {i>syntax<i} ini terletak pada fleksibilitasnya, yang memungkinkan penggunaan string yang dibuat secara dinamis untuk mengakses properti. Contoh berikut menggunakan nomor acak untuk memilih salah satu dari tiga properti objek:
const colors = {
"color1" : "red",
"color2" : "blue",
"color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );
colors[ "color" + randomNumber ];
> "blue"
Seperti notasi titik, Anda dapat menggunakan notasi tanda kurung untuk mengakses dan membuat properti, menggunakan operator penetapan:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }