5. Literal nesneler

Burada, kodda doğrudan tanımlanan nesnelere "literal nesneler" diyoruz. JavaScript'te sınıf ve sınıf örneği kavramları vardır. Dolayısıyla şu anda bahsettiğimiz nesne türü bu değildir.

5.1. script [obj-01]

Burada literal nesnelerin temel özelliklerini tanıtıyoruz. En önemli özellik, nesnenin bir işaretçi aracılığıyla işlenmesidir.

'use strict';
// boş bir nesne
const obj1={};
// nesnenin özellikleri dinamik olarak oluşturulabilir
obj1.prop1="abcd";
console.log('obj1=',obj1);
// başka bir özellik
obj1.prop2=[1,2,3];
console.log("obj1=",obj1);
// farklı bir notasyonla başka bir özellik
obj1['prop3']=true;
console.log("obj1=",obj1);
// obj1, nesnenin kendisi değil, nesneye bir referanstır (işaretçi)
const obj2=obj1;
// obj2 ve obj1 aynı nesneye işaret eder
obj2.prop1="xyzt";
console.log("obj1=",obj1);
console.log("obj2=",obj2);
// özellikler değişken olabilir
const var1='prop1';
console.log('prop1=',obj1[var1]);

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-01.js"
obj1=[object Object]
obj1= { prop1: 'abcd', prop2: [ 1, 2, 3 ] }
obj1= { prop1: 'abcd', prop2: [ 1, 2, 3 ], prop3: true }
obj1= { prop1: 'xyzt', prop2: [ 1, 2, 3 ], prop3: true }
obj2= { prop1: 'xyzt', prop2: [ 1, 2, 3 ], prop3: true }
prop1= xyzt

Yorumlar

• kodun 3. satırı: bir nesne bir işaretçi aracılığıyla işlenir. Dolayısıyla [obj1] bir işaretçidir. İşaret edilen nesneyi değiştirmek, [obj1] işaretçisini değiştirmez. Bu nedenle, dizilerde olduğu gibi, [const] anahtar sözcüğüyle bir nesne referansı tanımlanır;
• kodun 6. satırı: dizilerde olduğu gibi, [console.log] nesneleri görüntüleyebilir;
• kodun 11. satırı: obj1.prop3, obj1.[‘prop3’] şeklinde yeniden yazılabilir. Bu son yazım biçimi, ‘prop3’ün aslında bir değişken olduğu durumlarda (20-21. satırlar) kullanışlıdır;
• kodun 13-18. satırları: [obj2=obj1] komutunun nesnenin kendisi değil, nesne referansının bir kopyası olduğunu gösterir;

5.2. [obj-02] komut dosyası

Bu komut dosyası, bir nesnenin özelliklerinin değeri olarak bir nesne alabileceğini gösterir. Böylece çok düzeyli nesneler elde edilir. Ayrıca, nesne ↔ karakter dizisi dönüşümleri yapmayı sağlayan [JSON] küresel nesnesi de tanıtılır.

''use strict';
// çok katmanlı bir nesne
const personne = {
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  }
}
// özelliklere erişim
console.log("prénom personne=", personne.prénom);
console.log("prénom mère=", personne.mère.prénom);
personne.mère.âge = 40;
console.log("âge mère=", personne.mère.âge);
// console.log nesneleri görüntüleyebilir
console.log("personne=", personne);
console.log("mère=", personne.mère);
// nesnenin jSON dizesini de görüntüleyebiliriz
let json = JSON.stringify(personne);
console.log("jSON=", json);
// jSON yeniden okunabilir
let personne2 = JSON.parse(json);
console.log("père=", personne2.père);

Açıklamalar

• 24. satır: Bir JavaScript nesnesinin jSON dizesine dönüştürülmesi;
• 27. satır: Bir dizenin jSON nesnesine dönüştürülmesi;

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-02.js"
prénom personne= martin
prénom mère= micheline
âge mère= 40
personne= { 'prénom': 'martin',
'yaş': 12,
'baba': { 'ad': 'paul', 'yaş': 45 },
''anne': { 'ad': 'micheline', 'yaş': 40 } }
mère= { 'prénom': 'micheline', 'âge': 40 }
jSON= {"prénom":"martin","âge":12,"père":{"prénom":"paul","âge":45},"mère":{"prénom":"micheline","âge":40}}
père= { 'prénom': 'paul', 'âge': 45 }

Yorumlar

• 10. satır: jSON dizesinde, özellikler ve dize türündeki değerler mutlaka tırnak işaretleri içine alınmalıdır;

5.3. [obj-03] komut dosyası

Bu komut dosyası, bir nesnenin özelliğinin getter / setter kavramını tanıtmaktadır:

'use strict';
// bir nesnenin getter ve setter'ları
const personne = {
  // getter
  get nom() {
    console.log("getter nom");
    return this._nom;
  },
  // setter
  set nom(unNom) {
    console.log("setter nom");
    this._nom = unNom;
  }
};
// setter
personne.nom = "Hercule";
// getter
console.log(personne.nom);
// nesnenin kendisi
console.log("personne=", personne);
// bu, [_nom] özelliğine doğrudan erişilmesini engellemez
personne._nom = "xyz";
console.log("personne=", personne);

Açıklamalar

• 5-7. satırlar: [getter] tanımlanmıştır; bu, genellikle nesnenin bir özelliğinin değerini döndüren, ancak aslında herhangi bir şeyi döndürebilen bir işlevdir. [function] anahtar sözcüğü, [get] anahtar sözcüğü ile değiştirilmiştir;
• 7. satır: getter, [_nom] özelliğini döndürür. Bu özelliğin bildirilmesine gerek olmadığı görülmektedir;
• 10-13. satırlar: [setter] adlı bir fonksiyonun tanımı; bu fonksiyon genellikle alınan değeri nesnenin bir özelliğine atar, ancak aslında herhangi bir işlem yapabilir. [function] anahtar sözcüğü, [set] anahtar sözcüğüyle değiştirilir. [setter], [setter]'e parametre olarak geçirilen değerin geçerliliğini kontrol etmek için kullanılabilir;
• 16. satır: [set nom] işlevi örtük olarak çağrılacaktır;
• 18. satır: [get nom] işlevi örtük olarak çağrılacaktır;
• 22. satır: getter/setter kullanımının geliştiricinin tercihine bağlı olduğunu gösterir. Geliştirici, bunların yönettiği özelliğin adını biliyorsa, bu özelliğe doğrudan erişebilir;

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-03.js"
setter nom
getter nom
Hercule
personne= { nom: [Getter/Setter], _nom: 'Hercule' }
personne= { nom: [Getter/Setter], _nom: 'xyz' }

5-6. satırlarda, [console.log]'in işlev olan özellikleri de görüntülediği dikkat çekmektedir.

5.4. [obj-04] komut dosyası

Bu komut dosyası, bir nesnenin özellik adlarını yazmanın üç yolunu ve bunlara erişmenin iki yolunu gösterir.

'use strict';
// bir nesnenin özellik adları  [nom] gibi sabit değerler olabilir, tırnak işaretleri ['nom']
// ya da tırnak işaretleri ile çevrelenebilir ["nom"]

// sabit değerler
const obj1 = {
  nom: "martin",
  prénom: "jean"
};
console.log("prénom=", obj1.prénom);

// apostroflarla çevrili
const obj2 = {
  'isim': "martin",
  'soyadı': "jean"
};
console.log("nom=", obj2.nom);

// tırnak işaretleri içinde
const obj3 = {
  "nom": "martin",
  "prénom": "jean"
};

// [nom] özelliğine erişmek için iki olası sözdizimi
console.log("nom=", obj3.nom);
console.log("nom=", obj3['nom']);

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-04.js"
prénom= jean
nom= martin
nom= martin
nom= martin

5.5. [obj-05] betiği

Bu komut dosyası, bir literal nesnenin özelliklerinin işlevler olabileceğini gösterir. Bu durumda, özelliklere ve yöntemlere sahip sınıf örneği nesnesine çok yakın bir durum ortaya çıkar.

'use strict';

// bir nesne, [function] türünde özelliklere sahip olabilir
const personne = {
  // özellikler
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  },
  // yöntem
  toString: function () {
    return JSON.stringify(this);
  }
}

// kullanım
console.log("personne=", personne);
console.log("personne.toString=", personne.toString());

• 17-19. satırlar: nesneye ait bir iç yöntem. Bu yöntemde, [this] anahtar sözcüğü (18. satır) aracılığıyla nesnenin özelliklerine erişilir. [this] nesnenin kendisini, [this.prénom] ise nesnenin [prénom] özelliğini belirtir;

Çalıştırma

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-05.js"
personne= { 'prénom': 'martin',
'yaş': 12,
'baba': { 'ad': 'paul', 'yaş': 45 },
'anne': { 'ad': 'micheline', 'yaş': 42 },
toString: [Function: toString] }
personne.toString= {"prénom":"martin","âge":12,"père":{"prénom":"paul","âge":45},"mère":{"prénom":"micheline","âge":42}}

5.6. [obj-06] komut dosyası

Bu komut dosyası, özelliklerin adlarını önceden bilmediğimiz durumlarda bir nesnenin özelliklerine nasıl erişebileceğimizi gösterir.

'use strict';

// bir nesne, [function] türünde özelliklere sahip olabilir
let personne = {
  // özellikler
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  },
  // yöntem
  toString: function () {
    return JSON.stringify(this);
  }
}

// kullanım
console.log(personne);
// özellikler
console.log("-----------------------");
for (const key in personne) {
  if (personne.hasOwnProperty(key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}
// eslint uyarısından kaçınmak için (1)
console.log("-----------------------");
for (const key in personne) {
  if (Object.prototype.hasOwnProperty.call(personne, key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}
// eslint uyarısından kaçınmak için (2)
console.log("-----------------------");
for (const key in personne) {
  // eslint-disable-next-line no-prototype-builtins
  if (personne.hasOwnProperty(key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}

Açıklamalar

• 26-31. satırlar: Bir nesnenin yöntemleri hariç özelliklerinin listesini elde etmeyi sağlayan kod. Bu kod, ESLint uyarısına konu olmaktadır:

• 32-39. satırlar: ESLint uyarısından kurtulmayı sağlayan kod. [Object] sınıfının prototipi kullanılır;
• 41-47. satırlar: ya da uyarıyı devre dışı bırakmakla yetinebiliriz (43. satır);

5.7. [obj-07] betiği

[obj-07] betiği, bir nesneyi parçalara ayırma olasılığını gösterir:

'use strict';
// de-structuring

// literal değerler
const obj1 = {
  nom: "martin",
  prénom: "jean"
};

// obj1'in değişkenlere ayrıştırılması [n,p]
const { nom: n, prénom: p } = obj1;
console.log("n=", n, "p=", p);

// obj1'in değişkenlere ayrıştırılması [n2,p2]
function f({ nom: n2, prénom: p2 }) {
  console.log("f-n2=", n2, "f-p2=", p2);
}
f(obj1);

// obj1'in değişkenlere ayrıştırılması [nom,prénom]
function g({ nom: nom, prénom: prénom }) {
  console.log("g-nom=", nom, "g-prénom=", prénom);
}
g(obj1);

// obj1'in [nom,prénom] değişkenlerine ayrıştırılması
// h({soyadı:soyadı,adı:adı}) ile eşdeğer kısaltılmış gösterimle
function h({ nom, prénom }) {
  console.log("h-nom=", nom, "h-prénom=", prénom);
}
h(obj1);

Yorumlar

• 11. satır: {} parantezleri, yapı sökme işlemini mümkün kılar. Sözdizimi

const { nom: n, prénom: p } = obj1

sözdizimi, [n] ve [p] adlı iki değişken oluşturur ve aşağıdakine eşdeğerdir:

const n = obj1.nom
const p = obj1.prénom

Bildirim şu şekilde okunabilir:

const { nom => n, prénom => p } = obj1

[nom, prénom] özniteliklerinin değerlerinin [n, p] değişkenlerine atandığını hatırlatmak için;

• deyim, 15., 21. ve 28. satırlarda tekrarlanır. Her seferinde, {} parantezlerinin varlığı, bir nesnenin değişkenlere ayrıştırılacağını gösterir;
• 28. satır kafa karıştırıcı olabilir. Bu, şu notasyonun kısaltmasıdır:

function h({ nom : nom, prénom : prénom })

Çalıştırma sonuçları şunlardır:

n= martin p= jean
f-n2= martin f-p2= jean
g-nom= martin g-prénom= jean
h-nom= martin h-prénom= jean

5.8. [obj-08] betiği

[obj-08] komut dosyası, bir nesnenin kopyasını nasıl alacağınızı gösterir:

'use strict'

// nesnelerin klonlanması
const obj1 = {
  nom: "martin",
  prénom: "jean"
};

// obj1'in spread operatörüyle klonlanması (kopyalanması)
const obj2 = { ...obj1 }

// doğrulamalar
// obj2, obj1'in bir kopyasına işaret ediyor
console.log("obj2===obj1 :", obj1 === obj2)
console.log("obj2=", obj2)

• 10. satır: [obj1] nesnesinin kopyalanması işlemi. ... operatörü, yayılma operatörü olarak adlandırılır;

Çalıştırma sonuçları şöyledir:

obj2===obj1 : false
obj2= { nom: 'martin', 'prénom': 'jean' }

• 1. satır: [obj1] ve [obj2] referanslarının aynı nesneye işaret etmediğini gösterir;
• 2. satır: [obj2]'in işaret ettiği nesnenin, [obj1]'in işaret ettiği nesnenin bir kopyası olduğunu gösterir;

5.9. Conclusion

Bu bölümdeki komut dosyaları, JavaScript'teki literal nesnenin, nesne yönelimli dillerindeki sınıf örneği nesnesine yakın olduğunu göstermiştir. Bu nesneye özellikler, yöntemler ve getter/setter'lar tanımlanabilir. Bu, yürütme sırasında özellikleri tanımlanabilen dinamik bir nesnedir. Bu durumda, elemanları herhangi bir türde olabilen ve özellikle [fonction] türünde olabilen bir sözlük gibi davranır.