13 Mayıs 2016 Cuma

Javascript'de Nesneler

Merhaba Webkolog Takipçileri!

Bugün JavaScript'in en temel ve en güçlü yapı taşlarından birine, yani Nesneler (Objects) konusuna odaklanacağız. JavaScript'te neredeyse her şey bir nesnedir; diziler, fonksiyonlar, hatta ilkel veri tipleri bile gerektiğinde nesne gibi davranabilir. Nesneler, verileri ve bu veriler üzerinde işlem yapan fonksiyonları (metotları) bir araya getirerek, gerçek dünya varlıklarını modellememizi sağlar. Hadi, bu önemli yapıyı daha yakından inceleyelim!


Nesne Nedir ve Neden Önemlidir?

Bir nesne, özelliklerin (properties) ve metotların (methods) bir koleksiyonudur. Özellikler, bir nesnenin karakteristiklerini (isim, yaş, renk gibi) tanımlayan anahtar-değer çiftleridir. Metotlar ise bir nesnenin yapabileceği eylemleri (konuşmak, yürümek, hesaplamak gibi) tanımlayan fonksiyonlardır. Nesneler, dağınık verileri düzenli bir yapıya sokmamızı ve bu verilerle ilgili işlemleri tek bir çatı altında toplamamızı sağlar.


Nesne Oluşturma Yöntemleri

1. Obje Literali (Object Literal) Kullanarak

Bu, JavaScript'te nesne oluşturmanın en yaygın ve en basit yoludur. Süslü parantezler {} kullanarak doğrudan bir nesne tanımlarsınız.


    const kisi = {
        // Özellikler (Properties)
        isim: "Ali",
        "soy isim": "Mantar", // Anahtar boşluk içeriyorsa tırnak içine alınmalı
        yas: 32,
        unvanlar: ["WebMaster", "Software Developer"],
        evcilHayvan: { // İç içe nesne
            adi: "Yeşil",
            tur: "Kedi"
        },
        // Metot (Function olarak tanımlanmış özellik)
        bilgiVer: function() {
            return `Merhaba, ben ${this.isim} ${this["soy isim"]}. ${this.yas} yaşındayım.`;
        }
    };

    // Özelliklere erişim
    console.log(kisi.isim);          // Ali
    console.log(kisi["soy isim"]);   // Mantar (Boşluk içeren anahtara erişim)
    console.log(kisi.evcilHayvan.adi); // Yeşil
    console.log(kisi["evcilHayvan"].tur); // Kedi

    // Metot çağırma
    console.log(kisi.bilgiVer()); // Merhaba, ben Ali Mantar. 32 yaşındayım.

Not: this anahtar kelimesi, metodun çağrıldığı nesneyi temsil eder.

2. new Object() Kullanarak

Daha az yaygın olsa da, bir nesneyi Object yapıcı fonksiyonunu kullanarak da oluşturabilirsiniz.


    const araba = new Object();
    araba.marka = "Opel";
    araba.model = "Astra";
    araba.yil = 2020;

    console.log(araba.marka); // Opel
3. Yapıcı Fonksiyon (Constructor Function) Kullanarak (ES5 ve Öncesi)

ES6 öncesinde, birden fazla benzer nesne oluşturmak için yapıcı fonksiyonlar kullanılırdı. Bu, sınıfların (classes) ortaya çıkmasından önceki OOP yaklaşımıdır.


    function Ogrenci(ad, soyad, sinif) {
        this.ad = ad;
        this.soyad = soyad;
        this.sinif = sinif;
        this.selamla = function() {
            console.log(`Merhaba, ben ${this.ad}. ${this.sinif}. sınıf öğrencisiyim.`);
        };
    }

    const ogrenci1 = new Ogrenci("Elif", "Demir", 10);
    const ogrenci2 = new Ogrenci("Can", "Kara", 9);

    ogrenci1.selamla(); // Merhaba, ben Elif. 10. sınıf öğrencisiyim.
    console.log(ogrenci2.soyad); // Kara

Nesne Özelliklerini Yönetme

1. Özellik Silme (delete Operatörü)

Bir nesnenin bir özelliğini silmek için delete operatörünü kullanabilirsiniz.


    const kullanici = {
        isim: "Deniz",
        email: "[email protected]",
        yas: 28
    };

    delete kullanici.email;
    console.log(kullanici); // { isim: "Deniz", yas: 28 }
2. Özellik Var Mı Kontrolü (hasOwnProperty ve in Operatörü)

Bir nesnede belirli bir özelliğin olup olmadığını kontrol etmek için iki yaygın yöntem vardır:

  • hasOwnProperty(): Özelliğin nesnenin kendi doğrudan özelliği olup olmadığını kontrol eder (prototip zincirindeki özellikleri saymaz).
  • in operatörü: Özelliğin nesnede veya prototip zincirinde olup olmadığını kontrol eder.

    const bilgisayar = {
        marka: "HP",
        ram: "16GB"
    };

    console.log(bilgisayar.hasOwnProperty('marka')); // true
    console.log(bilgisayar.hasOwnProperty('islemci')); // false

    console.log('ram' in bilgisayar);     // true
    console.log('toString' in bilgisayar); // true (toString Object.prototype'da olduğu için)
3. Özellikleri Döngü ile Gezme

Bir nesnenin özelliklerini gezmek için for...in döngüsünü kullanabiliriz.


    const urun = {
        ad: "Laptop",
        fiyat: 12000,
        stok: 50,
        kategori: "Elektronik"
    };

    for (let anahtar in urun) {
        console.log(`${anahtar}: ${urun[anahtar]}`);
    }
    // Çıktı:
    // ad: Laptop
    // fiyat: 12000
    // stok: 50
    // kategori: Elektronik

Sadece kendi doğrudan özelliklerini gezmek istiyorsanız, hasOwnProperty() ile birlikte kullanın:


    function onlineKullaniciSay(kullanicilarObj) {
        let onlineSayisi = 0;
        for (let kullaniciAdi in kullanicilarObj) {
            if (kullanicilarObj.hasOwnProperty(kullaniciAdi) && kullanicilarObj[kullaniciAdi].online === true) {
                onlineSayisi++;
            }
        }
        return onlineSayisi;
    }

    let kullanicilar = {
        Alan: { age: 27, online: true },
        Jeff: { age: 32, online: true },
        Sarah: { age: 48, online: false },
        Ryan: { age: 18, online: true }
    };

    console.log(onlineKullaniciSay(kullanicilar)); // 3

Nesne Kopyalama ve Birleştirme

1. Spread Operatörü (...) ile Klonlama/Birleştirme (ES6+)

Spread operatörü, nesneleri (veya dizileri) kolayca kopyalamak ve birleştirmek için modern ve pratik bir yoldur. Sığ (shallow) klonlama yapar, yani iç içe nesneler referans olarak kopyalanır.


    const obje1 = { a: 1, b: 2 };
    const obje2 = { b: 3, c: 4 };

    // Obje klonlama (sığ kopya)
    const klonlanmisObje = { ...obje1 };
    console.log(klonlanmisObje); // { a: 1, b: 2 }

    // Obje birleştirme (aynı anahtar varsa sonuncu kazanır)
    const birlestirilmisObje = { ...obje1, ...obje2 };
    console.log(birlestirilmisObje); // { a: 1, b: 3, c: 4 }
2. Object.assign() Metodu (ES6+)

Object.assign() metodu, bir veya daha fazla kaynak nesnenin numaralandırılabilir, kendi sahip olduğu özelliklerinin tümünü bir hedef nesneye kopyalamak için kullanılır. Bu da sığ klonlama yapar.


    const kaynak1 = { x: 10, y: 20 };
    const kaynak2 = { y: 30, z: 40 };
    const hedef = {};

    Object.assign(hedef, kaynak1, kaynak2);
    console.log(hedef); // { x: 10, y: 30, z: 40 }

    // Klonlama için pratik yol
    let orijinalPersonel = { isim: 'Murat', yas: 30 };
    let yeniPersonel = Object.assign({}, orijinalPersonel); // Boş bir objeye kopyalar
    yeniPersonel.isim = 'Ayşe';
    console.log(orijinalPersonel.isim); // Murat (orijinal değişmez)
    console.log(yeniPersonel.isim);     // Ayşe

Nesne Destructuring (ES6+)

Nesne destructuring, bir nesnenin özelliklerini alıp ayrı değişkenlere atamanın kolay ve okunabilir bir yoludur.


    const ayarlar = {
        theme: "dark",
        fontSize: 16,
        notifications: true
    };

    // Klasik yöntem (ES5)
    // const tema = ayarlar.theme;
    // const boyut = ayarlar.fontSize;

    // Destructuring ile (ES6)
    const { theme, fontSize } = ayarlar;
    console.log(theme);     // dark
    console.log(fontSize);  // 16

    // Farklı değişken ismiyle atama
    const { theme: currentTheme, fontSize: currentFontSize } = ayarlar;
    console.log(currentTheme); // dark

    // Varsayılan değer atama (özellik yoksa kullanılır)
    const { notifications, language = "tr" } = ayarlar;
    console.log(notifications); // true
    console.log(language);      // tr (ayarlar objesinde 'language' olmadığı için varsayılan kullanıldı)

    // İç içe nesnelerde destructuring
    const havaDurumu = {
        bugun: { min: 20, max: 28 },
        yarin: { min: 22, max: 30 }
    };
    const { yarin: { max: yarinMaxSicaklik } } = havaDurumu;
    console.log(yarinMaxSicaklik); // 30

    // Fonksiyon parametrelerinde destructuring
    const kullaniciBilgisi = {
        ad: "Zeynep",
        soyad: "Demir",
        email: "[email protected]"
    };

    function bilgileriGoster({ ad, soyad, email }) { // Parametre olarak doğrudan destructuring
        console.log(`Ad: ${ad}, Soyad: ${soyad}, Email: ${email}`);
    }
    bilgileriGoster(kullaniciBilgisi); // Ad: Zeynep, Soyad: Demir, Email: [email protected]

Map ve Set Nesneleri (ES6+)

Geleneksel JavaScript nesneleri genellikle string anahtarlar kullanır ve bazı sınırlamaları vardır. ES6 ile gelen Map ve Set, bu sınırlamaları gideren ve belirli senaryolar için daha uygun olan özel nesne türleridir.

1. Set Nesnesi

Bir Set, sadece benzersiz değerleri (tekrarlamaya izin vermez) saklayan bir koleksiyondur. Değerler herhangi bir türde olabilir (ilkel değerler veya objeler).

  • Oluşturma: new Set([iterable])
  • Metotlar: add(value), delete(value), has(value), clear(), size (özellik), values() (yineleyici döndürür)

    let sayilarKumesi = new Set();
    sayilarKumesi.add(1).add(5).add(1); // 1 tekrar olduğu için bir kez eklenir
    sayilarKumesi.add(10);

    console.log(sayilarKumesi.size);    // 3 (1, 5, 10)
    console.log(sayilarKumesi.has(5));  // true
    console.log(sayilarKumesi.has(20)); // false

    // Set üzerinde gezinme
    for (let sayi of sayilarKumesi.values()) {
        console.log(sayi);
    }
    // Çıktı:
    // 1
    // 5
    // 10

    sayilarKumesi.delete(1);
    console.log(sayilarKumesi); // Set(2) { 5, 10 }
    sayilarKumesi.clear();
    console.log(sayilarKumesi.size); // 0
2. Map Nesnesi

Bir Map, anahtar-değer (key-value) çiftlerini saklayan bir koleksiyondur. Geleneksel objelerden farklı olarak, anahtarlar herhangi bir veri türünde olabilir (sayı, boolean, obje, hatta fonksiyon).

  • Oluşturma: new Map([iterable]) (iterable genellikle [key, value] çiftlerinden oluşan bir dizi dizisi olur)
  • Metotlar: set(key, value), get(key), has(key), delete(key), clear(), size (özellik), keys(), values(), entries() (yineleyiciler döndürür)

    let userMap = new Map();

    // Değer ekleme
    userMap.set("id_1", { ad: "Cem", yas: 30 });
    userMap.set("id_2", { ad: "Zeynep", yas: 25 });
    userMap.set(123, "Bir sayı anahtarı"); // Sayı anahtarı

    // Değer okuma
    console.log(userMap.get("id_1")); // { ad: "Cem", yas: 30 }
    console.log(userMap.get(123));    // Bir sayı anahtarı

    console.log(userMap.has("id_2")); // true
    console.log(userMap.size);        // 3

    // Map üzerinde gezinme
    for (let [anahtar, deger] of userMap.entries()) {
        console.log(`${anahtar}: ${deger.ad || deger}`); // ad yoksa doğrudan değeri yazdır
    }
    // Çıktı:
    // id_1: Cem
    // id_2: Zeynep
    // 123: Bir sayı anahtarı

    userMap.delete("id_1");
    console.log(userMap.has("id_1")); // false

Sonuç

JavaScript'teki nesneler, programlama mantığınızın merkezinde yer alan, verileri ve işlevselliği bir araya getiren güçlü yapılardır. Obje literatürlerinden destructuring'e, Spread operatöründen modern Map ve Set koleksiyonlarına kadar birçok farklı özelliğiyle, veri yönetimi ve manipülasyonunda size inanılmaz esneklik sunarlar.

Bu konuyu derinlemesine kavramak, daha düzenli, ölçeklenebilir ve etkili JavaScript kodları yazmanız için kritik öneme sahiptir. Nesnelerle bol bol pratik yapın ve onların sunduğu imkanları keşfedin!

Webkolog'u takipte kalın!

Hepinize bol kodlu ve başarılı projeler dilerim!

0 yorum:

Yorum Gönder