Javascript Nesneler

JavaScript’te hemen her şey nesne olarak çalışır. Diziler, fonksiyonlar, tarih objeleri ve hatta JSON verileri bile aslında nesnelerdir. Nesneler, birden fazla veriyi bir arada saklaman ve bu verilere anlamlı bir yapı kazandırman için kullanılır. JavaScript nesne konusunu öğrenmek, yazılım projelerinde karmaşık verileri daha okunabilir ve yönetilebilir hale getirmeni sağlar. Özellikle JSON verileriyle çalışırken veya API’den veri çekerken bir adım öne taşır.

Javascript Nesne Nedir?

Javascript Nesne (object), içerisinde anahtar-değer (key-value) çiftleri barındıran veri yapısıdır. Verileri birbiriyle ilişkili şekilde tutmak için iyi bir araçtır.

Yukarıdaki örnekte personel bir nesnedir. İçinde ad, yas ve departman adında anahtarlar (key) ve bunlara karşılık gelen değerler (value) vardır.

Javascript Nesne Oluşturma Yöntemleri

• Object Literal

Object Literal (Nesne Değişmezi), Basit ve hızlı bir şekilde nesne oluşturmak için kullanılan bir yöntemdir. Süslü parantez {} içinde key-value (anahtar-değer) çiftleri tanımlanarak oluşturulur.

• Object Constructor

Object Constructor (Nesne Yapıcı), Aynı türden birden fazla nesne oluşturmak için kullanılan bir fonksiyondur. new anahtar kelimesiyle çağrılarak yeni bir nesne örneği (instance) oluşturulur.

Javascript Nesne Özelliklere Erişim

• Nokta (Dot Notation)

JS kodu yazan yazılımcılar arasında en yaygın kullanılan yöntemdir. Doğrudan özellik adı yazılır ve nesneye erişilir. Özellik adı basit ve sabit olduğunda kullanılması daha uygundur.

• Köşeli Parantez (Bracket Notation)

Özelliğin adı string türde olarak yazılır. Ayrıca özellik adında boşluk veya özel karakter varsa kullanılması gerekir.

• Değişken ile Köşeli Parantez Notasyonu

Özellik adı bir değişkende saklandığında kullanılır. Dinamik olarak özellik seçmeye olanak tanır.

Javascript Nesne Özellikleri Ekleme, Güncelleme ve Silme

• Özellik Ekleme

Yeni bir özellik eklemek için basitçe var olmayan bir özelliğe değer atayabilirsiniz.

• • Nokta ile Ekleme

    let araba = { marka: "Toyota" }; araba.model = "Corolla"; // Yeni özellik ekleme console.log(araba); // { marka: "Toyota", model: "Corolla" }

    1 2 3 4 5 6

    let araba = {   marka: "Toyota" };   araba.model = "Corolla"; // Yeni özellik ekleme console.log(araba); // { marka: "Toyota", model: "Corolla" }

     

  • Köşeli Parantez ile Ekleme

    araba["yil"] = 2022; // Yeni özellik ekleme console.log(araba); // { marka: "Toyota", model: "Corolla", yil: 2022 }

    1 2	araba["yil"] = 2022; // Yeni özellik ekleme console.log(araba); // { marka: "Toyota", model: "Corolla", yil: 2022 }

     

  • Dinamik Özellik Ekleme

    let ozellikAdi = "renk"; araba[ozellikAdi] = "Kırmızı"; console.log(araba); // { ..., renk: "Kırmızı" }

    1 2 3

    let ozellikAdi = "renk"; araba[ozellikAdi] = "Kırmızı"; console.log(araba); // { ..., renk: "Kırmızı" }

     

• Özellik Güncelleme

  Var olan bir özelliğin değerini değiştirmek için aynı özelliğe yeni bir değer atanır.

  • Nokta ile Güncelleme

    araba.model = "Yaris"; // Modeli güncelle console.log(araba.model); // "Yaris"

    1 2	araba.model = "Yaris"; // Modeli güncelle console.log(araba.model); // "Yaris"

     

  • Köşeli Parantez ile Güncelleme

    araba["yil"] = 2007; // Yılı güncelle console.log(araba.yil); // 2007

    1 2	araba["yil"] = 2007; // Yılı güncelle console.log(araba.yil); // 2007

     

  • Dinamik Özellik Güncelleme

    let guncellenecekOzellik = "renk"; araba[guncellenecekOzellik] = "Gri"; console.log(araba.renk); // "Gri"

    1 2 3

    let guncellenecekOzellik = "renk"; araba[guncellenecekOzellik] = "Gri"; console.log(araba.renk); // "Gri"

• Özellik Silme

  Bir özelliği tamamen silmek için delete operatörü kullanılır.

  • Nokta ile Silme

    delete araba.renk; // Renk özelliğini sil console.log(araba); // { marka: "Toyota", model: "Yaris", yil: 2007}

    1 2	delete araba.renk; // Renk özelliğini sil console.log(araba); // { marka: "Toyota", model: "Yaris", yil: 2007}

     

  • Köşeli Parantez ile Silme

    delete araba["yil"]; // Yıl özelliğini sil console.log(araba); // { marka: "Toyota", model: "Yaris" }

    1 2	delete araba["yil"]; // Yıl özelliğini sil console.log(araba); // { marka: "Toyota", model: "Yaris" }

     

  • Dinamik Özellik Silme

    let silinecekOzellik = "model"; delete araba[silinecekOzellik]; console.log(araba); // { marka: "Toyota" }

    1 2 3

    let silinecekOzellik = "model"; delete araba[silinecekOzellik]; console.log(araba); // { marka: "Toyota" }

JavaScript Nesnelerde Döngü Kullanımı

JavaScript’te nesnelerin özellikleri üzerinde döngü oluşturmak için çeşitli yöntemler bulunur.

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

Nesnenin numaralandırılabilir (enumerable) özelliklerinde döner. Basit döngüler içerisinde kullanılır.

• Object.keys() + forEach()

Nesnenin kendi özelliklerinin anahtarlarını dizi olarak alır.

• Object.values()

Nesnenin değerlerini döngüye alır. Sadece değerlerle çalışmak için kullanılır.

İç İçe Nesneler (Nested Objects)

JavaScript’te iç içe (nested) nesnelerle çalışırken döngü yöntemlerini özelleştirmek gerekir.