Pengakses properti

Ada dua cara untuk menyetel, mengubah, dan mengakses properti objek: notasi titik dan notasi tanda kurung.

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." }