Ada dua cara untuk menyetel, mengubah, dan mengakses properti objek: notasi titik dan notasi tanda kurung.
Notasi titik
Seperti yang terlihat dalam beberapa contoh sebelumnya, notasi titik menggunakan titik (.
) di antara objek dan kunci properti yang 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
, sehingga mencoba mengakses myObj.myMissingProp
akan menghasilkan undefined
. Mencoba mengakses properti di undefined
, seolah-olah
objek, akan 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 chaining opsional" (?.
)
untuk mengakses properti bertingkat objek 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 tanda kurung
Notasi tanda kurung menggunakan serangkaian 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 sintaksis ini terletak pada fleksibilitasnya, yang memungkinkan penggunaan string yang dibuat secara dinamis untuk mengakses properti. Contoh berikut menggunakan angka 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 baru, menggunakan operator penetapan:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }