Mülk erişimcileri

Bir nesnenin özelliklerini ayarlamanın, değiştirmenin ve bu özelliklere erişmenin iki yolu vardır: nokta gösterimi ve parantez gösterimi.

Nokta gösterimi

Önceki bazı örneklerde görüldüğü gibi, nokta gösterimi, nesne ile erişilen özellik anahtarı arasında bir nokta (.) kullanır:

const myObj = {
    "myProp": "String value."
};

myObj.myProp;
> "String value."

Atama operatörlerini kullanarak yeni özelliklere erişmek, özellikleri değiştirmek veya oluşturmak için nokta gösterimini kullanabilirsiniz:

const myObj = {};

myObj.myProp = "String value.";

myObj;
> Object { myProp: "String value." }

Nokta notasyonunu kullanarak özellik anahtarlarını zincirlemek, bir nesnenin özellikleri olan nesnelerin özelliklerine erişmenizi sağlar:

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myProp.childProp;
> true;

Bununla birlikte, zincirde belirtilen bir anahtar tanımlanmamışken bu söz diziminin kullanılması hatalara neden olabilir. Aşağıdaki örnekte myMissingProp, myObj nesnesinin bir özelliği değildir. Bu nedenle, myObj.myMissingProp öğesine erişmeye çalışılması undefined sonucunu verir. undefined üzerindeki bir özelliğe, bir nesneymiş gibi erişmeye çalışmak bir hataya neden olur:

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

> myObj.myMissingProp
> undefined

myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined

Bu sorunu gidermek amacıyla ES2020, nesnelerin iç içe yerleştirilmiş özelliklerine güvenli bir şekilde erişmek için "isteğe bağlı zincirleme operatörünü" (?.) kullanıma sunmuştur.

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myMissingProp?.childProp;
> undefined

Nokta gösterimi kullanılarak erişilen anahtarlar, dize değişmez değerleri gibi tırnak işaretleri arasına alınmaz. Bu, yalnızca geçerli tanımlayıcı olan özellik anahtarlarına erişmek için nokta gösterimini kullanabileceğiniz anlamına gelir:

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'

Bu nedenle, mümkün olduğunda özellik anahtarlarını belirtirken tanımlayıcı kurallarına uymak en iyi uygulamadır. Belirli bir anahtar için bu mümkün değilse alternatif bir parantez gösterimi söz dizimi, tanımlayıcı kurallarına uymayan dize tabanlı nesne anahtarları ayarlamanıza ve bu anahtarlara erişmenize olanak tanır.

Ayraç gösterimi

Köşeli parantez gösterimi, özellik anahtarını temsil eden bir dizeyi (veya Sembol) değerlendiren bir değer içeren bir parantez ([]) kullanır.

const myObj = {
    "myProp": "String value."
};

myObj["myProp"];
> "String value."

Bu söz dizimi, çok daha geniş kapsamlıdır ve kafa karıştıracak kadar kapsamlı olabilir. Bunun nedeni, parantez içindeki değer, veri türünden bağımsız olarak dize değişmez değeri olarak değerlendirilmesidir. Örneğin, burada false boole değeri ve 10 sayı değeri, "false" ve "10" dize değişmez anahtarlarıyla ilişkilendirilen özelliklere erişmek için kullanılır :

const myObj = {
    "false": 25,
    "10" : true,
    "key with spaces": true
};

myObj[false];
> 25

myObj[10];
> true

myObj["key with spaces"];
> true

Bu söz diziminin gücü, özelliklere erişmek için dinamik olarak oluşturulan dizelerin kullanılabilmesini sağlayan esnekliğindedir. Aşağıdaki örnekte, bir nesnenin üç özelliğinden birini seçmek için rastgele bir sayı kullanılmaktadır:

const colors = {
    "color1" : "red",
    "color2" : "blue",
    "color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );

colors[ "color" + randomNumber ];
> "blue"

Nokta gösteriminde olduğu gibi, atama operatörlerini kullanarak hem yeni özelliklere erişmek hem de yeni özellikler oluşturmak için köşeli parantez gösterimini kullanabilirsiniz:

const myObj = {};

myObj[ "myProp" ] = "String value.";

myObj;
> Object { myProp: "String value." }