Bu ders için video bulunmamaktadır.

Bu derse başlamak veya ilerlemenizi kaydetmek için lütfen giriş yapın veya kayıt olun.

Ders İçeriği

Giriş

Gerçek dünyadaki birçok şeyi (bir araba, bir kişi, bir kitap) özellikleriyle tanımlarız. Örneğin, bir arabanın rengi, modeli, hızı gibi özellikleri vardır. JavaScript'te, bu tür gerçek dünya varlıklarını veya karmaşık veri yapılarını temsil etmek için nesneler (objects) kullanılır.

Nesneler, ilişkili verileri ve bu veriler üzerinde işlem yapabilen fonksiyonları (metodlar) bir arada tutan koleksiyonlardır. Dizilerden farklı olarak, nesnelerdeki veriler sıralı değildir ve anahtar-değer (key-value) çiftleri şeklinde saklanır. Her bir anahtar (key), nesne içinde benzersiz bir string veya semboldür ve bir değere (value) karşılık gelir. Değerler herhangi bir veri tipi olabilir (sayı, string, boolean, dizi, hatta başka bir nesne).

Bu derste, JavaScript nesnelerinin nasıl oluşturulduğunu, özelliklerine ve metodlarına nasıl erişildiğini, nesneler üzerinde nasıl döngü kurulduğunu ve nesnelerle ilgili diğer önemli kavramları öğreneceğiz.

Nesne Oluşturma

JavaScript'te nesne oluşturmanın birkaç yolu vardır:

1. Nesne Literali (Object Literal)

En yaygın ve basit yöntem, süslü parantezler {} kullanarak nesne oluşturmaktır. Anahtar-değer çiftleri virgülle ayrılır ve anahtar ile değer arasına iki nokta üst üste : konur.

nesne_literal.js
// Boş bir nesne
let bosNesne = {};

// Bir araba nesnesi
let araba = {
    marka: "Toyota",
    model: "Corolla",
    yil: 2022,
    renk: "beyaz",
    calisiyor: false,
    bilgiGoster: function() { // Bu bir metoddur
        console.log(`Marka: ${this.marka}, Model: ${this.model}, Yıl: ${this.yil}`);
    }
};

// Bir kişi nesnesi
let kisi = {
    ad: "Ahmet",
    soyad: "Yılmaz",
    yas: 30,
    meslek: "Mühendis",
    adres: {
        sehir: "İstanbul",
        ilce: "Kadıköy"
    },
    hobiler: ["kitap okumak", "yüzmek"]
};

console.log(araba);
console.log(kisi);

Not: Anahtarlar (property names) genellikle string'lerdir. Tırnak içinde yazılmasalar bile JavaScript motoru tarafından string olarak yorumlanırlar (sayısal anahtarlar veya özel karakter içerenler hariç). Değerler ise herhangi bir JavaScript veri tipi olabilir.

2. Object Constructor

new Object() yapıcısını kullanarak da boş bir nesne oluşturabilir ve daha sonra özelliklerini ekleyebilirsiniz. Ancak nesne literali genellikle daha okunabilir ve tercih edilir.

object_constructor.js
let kitap = new Object();
kitap.baslik = "Sefiller";
kitap.yazar = "Victor Hugo";
kitap.sayfaSayisi = 1463;

console.log(kitap);

3. Constructor Fonksiyonları (İleriki Konu)

Benzer yapıdaki nesneleri tekrar tekrar oluşturmak için constructor fonksiyonları kullanılır. Bu konu, nesne yönelimli programlama derslerinde daha detaylı ele alınacaktır.

Nesne Özelliklerine Erişme ve Değiştirme

Nesne özelliklerine (property) erişmenin ve değerlerini değiştirmenin iki yolu vardır:

1. Nokta Notasyonu (Dot Notation)

En yaygın kullanılan yöntemdir. Nesne adından sonra bir nokta . ve ardından özelliğin adı yazılır.

nokta_notasyonu.js
let bilgisayar = {
    marka: "Apple",
    model: "MacBook Pro",
    ram: 16,
    depolama: 512
};

// Özelliklere erişme
console.log(bilgisayar.marka); // "Apple"
console.log(bilgisayar.ram); // 16

// Özellik değerini değiştirme
bilgisayar.ram = 32;
console.log(bilgisayar.ram); // 32

// Yeni bir özellik ekleme
bilgisayar.renk = "Uzay Grisi";
console.log(bilgisayar.renk); // "Uzay Grisi"
console.log(bilgisayar);

// Olmayan bir özelliğe erişme
console.log(bilgisayar.islemci); // undefined

Uyarı: Nokta notasyonu, geçerli bir JavaScript tanımlayıcısı olmayan özellik adları için (örneğin, boşluk veya tire içerenler, sayıyla başlayanlar) kullanılamaz.

2. Köşeli Parantez Notasyonu (Bracket Notation)

Nesne adından sonra köşeli parantezler [] içine özelliğin adı (string olarak veya string içeren bir değişken) yazılır.

koseli_parantez_notasyonu.js
let telefon = {
    marka: "Samsung",
    "model-adi": "Galaxy S23", // Geçerli olmayan tanımlayıcı
    fiyat: 30000,
    "ekran boyutu": 6.1 // Boşluk içeren anahtar
};

// Özelliklere erişme
console.log(telefon["marka"]); // "Samsung"
console.log(telefon["model-adi"]); // "Galaxy S23"
console.log(telefon["ekran boyutu"]); // 6.1

// Özellik adını değişkenden alma
let ozellikAdi = "fiyat";
console.log(telefon[ozellikAdi]); // 30000

ozellikAdi = "marka";
console.log(telefon[ozellikAdi]); // "Samsung"

// Özellik değerini değiştirme
telefon["fiyat"] = 28000;
console.log(telefon.fiyat); // 28000

// Yeni özellik ekleme
telefon["garanti süresi"] = "2 yıl";
console.log(telefon);

İpucu: Köşeli parantez notasyonu, özellik adının bir değişkende saklandığı veya geçerli bir JavaScript tanımlayıcısı olmadığı durumlarda kullanışlıdır.

Nesne Metodları

Bir nesnenin özelliği bir fonksiyon ise, bu özelliğe metod (method) denir. Metodlar, nesnenin verileri üzerinde işlem yapmak için kullanılır.

nesne_metodlari.js
let dikdortgen = {
    uzunluk: 10,
    genislik: 5,
    // Alan hesaplayan metod
    alanHesapla: function() {
        return this.uzunluk * this.genislik;
    },
    // Çevre hesaplayan metod (ok fonksiyonu ile - dikkat!)
    // Ok fonksiyonları kendi 'this' bağlamına sahip değildir, dış kapsamı kullanır.
    // Bu nedenle nesne metodlarında genellikle geleneksel fonksiyon tercih edilir.
    cevreHesapla: function() {
        return 2 * (this.uzunluk + this.genislik);
    },
    // ES6 Kısayol Metod Tanımı
    bilgiVer() {
        console.log(`Uzunluk: ${this.uzunluk}, Genişlik: ${this.genislik}`);
    }
};

// Metodları çağırma
console.log("Alan:", dikdortgen.alanHesapla()); // 50
console.log("Çevre:", dikdortgen.cevreHesapla()); // 30
dikdortgen.bilgiVer(); // "Uzunluk: 10, Genişlik: 5"

this Anahtar Kelimesi

Metodların içinde kullanılan this anahtar kelimesi, metodun çağrıldığı nesneyi ifade eder. Bu sayede metod, aynı nesnenin diğer özelliklerine erişebilir (örneğin, this.uzunluk).

this anahtar kelimesinin davranışı, fonksiyonun nasıl çağrıldığına bağlı olarak değişebilir. Ok fonksiyonlarında this, fonksiyonun tanımlandığı kapsamdaki this değerini alır, bu nedenle nesne metodları için genellikle geleneksel fonksiyon ifadeleri veya ES6 metod kısayolu kullanılır.

Uyarı: this anahtar kelimesi JavaScript'in kafa karıştırıcı olabilen konularından biridir. Davranışı farklı durumlarda (global kapsam, fonksiyon çağrısı, metod çağrısı, constructor, olay yöneticileri, ok fonksiyonları) değişiklik gösterir. Bu konu ileriki derslerde daha detaylı ele alınacaktır.

Nesne Özellikleri Üzerinde Döngü

Bir nesnenin tüm özelliklerini (anahtarlarını ve değerlerini) dolaşmak için çeşitli yöntemler vardır:

1. for...in Döngüsü

Nesnenin numaralandırılabilir (enumerable) özelliklerinin anahtarları (key) üzerinde döngü yapar. Bu, nesnenin kendi özelliklerinin yanı sıra prototip zincirinden miras aldığı özellikleri de içerebilir.

for_in_dongusu.js
let ogrenci = {
    ad: "Zeynep",
    bolum: "Bilgisayar Mühendisliği",
    numara: 123,
    aktif: true
};

for (let anahtar in ogrenci) {
    // Sadece nesnenin kendi özelliklerini kontrol etmek için (miras alınanları dışlamak)
    if (ogrenci.hasOwnProperty(anahtar)) {
        console.log(`${anahtar}: ${ogrenci[anahtar]}`);
    }
}

// Çıktı:
// ad: Zeynep
// bolum: Bilgisayar Mühendisliği
// numara: 123
// aktif: true

Not: for...in döngüsü genellikle sadece nesnenin kendi özelliklerini işlemek istediğimizde hasOwnProperty() metodu ile birlikte kullanılır.

2. Object.keys(nesne)

Nesnenin kendi numaralandırılabilir özelliklerinin anahtarlarını içeren bir dizi döndürür.

object_keys.js
let meyve = { ad: "Elma", renk: "Kırmızı", tat: "Tatlı" };

let anahtarlar = Object.keys(meyve);
console.log(anahtarlar); // ["ad", "renk", "tat"]

// Anahtarları kullanarak değerlere erişme
anahtarlar.forEach(anahtar => {
    console.log(`${anahtar}: ${meyve[anahtar]}`);
});

3. Object.values(nesne)

Nesnenin kendi numaralandırılabilir özelliklerinin değerlerini içeren bir dizi döndürür.

object_values.js
let meyve = { ad: "Elma", renk: "Kırmızı", tat: "Tatlı" };

let degerler = Object.values(meyve);
console.log(degerler); // ["Elma", "Kırmızı", "Tatlı"]

degerler.forEach(deger => {
    console.log(deger);
});

4. Object.entries(nesne)

Nesnenin kendi numaralandırılabilir özelliklerinin [anahtar, değer] çiftlerini içeren bir dizi döndürür.

object_entries.js
let meyve = { ad: "Elma", renk: "Kırmızı", tat: "Tatlı" };

let girdiler = Object.entries(meyve);
console.log(girdiler); // [ ["ad", "Elma"], ["renk", "Kırmızı"], ["tat", "Tatlı"] ]

// for...of döngüsü ile kullanma (dizi destructuring ile)
for (let [anahtar, deger] of Object.entries(meyve)) {
    console.log(`${anahtar} -> ${deger}`);
}

// Çıktı:
// ad -> Elma
// renk -> Kırmızı
// tat -> Tatlı

Nesne Kopyalama ve Karşılaştırma

Nesne Kopyalama

Nesneleri bir değişkenden diğerine atadığınızda, aslında nesnenin kendisi kopyalanmaz, sadece bellekteki aynı nesneye işaret eden bir referans kopyalanır. Bu, bir değişken üzerinden yapılan değişikliğin diğerini de etkileyeceği anlamına gelir (shallow copy).

referans_kopyalama.js
let obj1 = { a: 1, b: 2 };
let obj2 = obj1; // Referans kopyalama

obj2.a = 100;

console.log(obj1.a); // 100 (obj1 de değişti!)
console.log(obj2.a); // 100

Nesnenin gerçek bir kopyasını (shallow copy - sığ kopya) oluşturmak için Object.assign() veya spread operatörü (...) kullanılabilir.

sig_kopyalama.js
let obj1 = { a: 1, b: { c: 3 } };

// Object.assign ile kopyalama
let obj2 = Object.assign({}, obj1);

// Spread operatörü ile kopyalama (daha modern)
let obj3 = { ...obj1 };

obj2.a = 100;
obj3.b.c = 300;

console.log(obj1.a); // 1 (obj1 değişmedi)
console.log(obj2.a); // 100

console.log(obj1.b.c); // 300 (İç içe nesne hala referans!)
console.log(obj3.b.c); // 300

Uyarı: Object.assign() ve spread operatörü sığ kopyalama (shallow copy) yapar. Yani, nesnenin sadece en üst seviyedeki özellikleri kopyalanır. Eğer özelliklerin değerleri de nesne veya dizi ise, onlar referans olarak kopyalanır. İç içe yapıların tamamen bağımsız kopyalarını oluşturmak için derin kopyalama (deep copy) teknikleri (örneğin, JSON.parse(JSON.stringify(nesne)) veya kütüphaneler) gerekir.

Nesne Karşılaştırma

İki nesne değişkeni, ancak bellekteki aynı nesneyi işaret ediyorlarsa == veya === ile karşılaştırıldığında true döndürür. İçerikleri aynı olsa bile farklı nesneler false döndürür.

nesne_karsilastirma.js
let nesne1 = { a: 1 };
let nesne2 = { a: 1 };
let nesne3 = nesne1;

console.log(nesne1 == nesne2); // false (Farklı nesneler)
console.log(nesne1 === nesne2); // false

console.log(nesne1 == nesne3); // true (Aynı nesneye referans)
console.log(nesne1 === nesne3); // true

Alıştırmalar

  1. Bir kitap nesnesi oluşturun (özellikler: baslik, yazar, sayfaSayisi, okunduMu (boolean)). Nesnenin bilgilerini konsola yazdırın.
  2. Kitap nesnesine, kitabın okundu durumunu değiştiren bir metod (toggleOkundu) ekleyin.
  3. Bir film nesnesi oluşturun (özellikler: ad, yonetmen, yil, oyuncular (dizi)). Object.keys() kullanarak nesnenin tüm özellik adlarını konsola yazdırın.
  4. Film nesnesindeki oyuncular dizisinin her bir elemanını forEach kullanarak konsola yazdırın.
  5. İki farklı öğrenci nesnesi oluşturun. Bu nesnelerin içeriklerinin aynı olup olmadığını kontrol eden bir fonksiyon yazın (nesnelerin referanslarını değil, içeriklerini karşılaştırın).

Bu derste JavaScript nesnelerini ve özelliklerini öğrendik:

  • Nesneler: Anahtar-değer çiftlerinden oluşan, ilişkili verileri ve metodları bir arada tutan koleksiyonlardır. Nesne literali {} ile oluşturulurlar.
  • Özellik Erişimi: Nokta notasyonu (nesne.ozellik) veya köşeli parantez notasyonu (nesne["ozellik"]) ile yapılır.
  • Metodlar: Nesnenin fonksiyon olan özellikleridir. Nesnenin diğer özelliklerine erişmek için genellikle this anahtar kelimesini kullanırlar.
  • Nesne Üzerinde Döngü: for...inObject.keys()Object.values()Object.entries() metodları ile nesne özellikleri dolaşılabilir.
  • Kopyalama: Basit atama referans kopyalar. Sığ kopya için Object.assign() veya spread operatörü (...) kullanılır. Derin kopyalama için ek teknikler gerekir.
  • Karşılaştırma: Nesneler referanslarına göre karşılaştırılır. İçerik karşılaştırması için manuel kontrol gerekir.

Nesneler, JavaScript'te karmaşık veri yapılarını modellemek ve programları organize etmek için temel bir yapı taşıdır. Dizilerle birlikte, JavaScript'teki en önemli veri yapılarından biridir.

Bir sonraki derste, web sayfalarının yapısını ve içeriğini değiştirmemizi sağlayan DOM (Document Object Model) manipülasyonuna giriş yapacağız.