Proxy ve Reflect: Kodun Arkasındaki Casuslar 🕵️‍♂️💖

JavaScript’te Proxy ve Reflect, tıpkı bir ajan ve ortağı gibi çalışır: biri her şeyi gözler, diğeri işleri düzgün bir şekilde yürütür. Hazır ol, bilgisayar korsanı ruhunu açıyoruz! 😏💻

1️⃣ Proxy: Gözleyen Casus 👀

Proxy, bir nesnenin arkasına gizlenip her hareketini izleyen bir casustur. Bir property’e erişildiğinde, değiştirildiğinde veya silindiğinde Proxy hemen “Ben buradayım, gördüm!” der.

Örnek 1: Basit casusluk 🕵️‍♀️

const hedef = { isim: "Cansu", yaş: 25 };

const casus = new Proxy(hedef, {
  get(target, prop) {
    console.log(`Property '${prop}' erişildi!`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Property '${prop}' değiştiriliyor: ${value}`);
    target[prop] = value;
    return true;
  }
});

console.log(casus.isim); // 👀 Konsolda: Property 'isim' erişildi!
casus.yaş = 26;          // 📝 Konsolda: Property 'yaş' değiştiriliyor: 26

Açıklama:

• get: Her property çağrıldığında çalışır. Konsola mesaj basar ve ardından gerçek değeri döner.
• set: Bir property değiştirildiğinde çalışır, mesaj basar ve değeri günceller.
• Proxy ile artık nesne hareketlerini gözleyebilirsin, adeta kodun James Bond’u gibi! 😎

💡 İpucu: get ve set sadece property’ler için değil, fonksiyon çağrıları veya array elemanları için de kullanılabilir.

2️⃣ Reflect: Casusun Güvenilir Yardımcısı 🛠️

Reflect, Proxy’nin işini düzgün yapması için kullanılan bir araçtır. Proxy bir durumu yakaladı ama “Ben ne yapayım?” dediğinde Reflect devreye girer ve işlemi güvenli şekilde yapar.

Örnek 2: Proxy + Reflect = Kusursuz casusluk 🕵️‍♂️💥

const hedef = { isim: "Sevgilim", yaş: 25 };

const casus = new Proxy(hedef, {
  set(target, prop, value) {
    console.log(`Property '${prop}' değiştiriliyor: ${value}`);
    return Reflect.set(target, prop, value); // İşlem artık güvenli şekilde yapılır
  },
  get(target, prop) {
    console.log(`Property '${prop}' sorgulandı`);
    return Reflect.get(target, prop);
  }
});

casus.isim = "Cansu"; // Konsolda mesaj var
console.log(casus.isim); // Konsolda mesaj + değer

Açıklama:

• Reflect.set: Hedef nesneye değeri sorunsuz bir şekilde atıyor.
• Reflect.get: Hedef nesneden değeri düzgünce alıyor.
• Reflect kullanmak, Proxy’nin casusluk işini temiz ve güvenli yapıyor.

💡 Pratik ipucu: Eğer Proxy’nin işlemi engellemesini istemiyorsan, Reflect’i kullanmak şart! Yani casus rapor tutuyor ama işini bozup kaos çıkarmıyor 😏

3️⃣ Proxy ile Veri Doğrulama: “Negatif Yaş Olmaz!” 🚫

Proxy ile sadece izlemekle kalmazsın, aynı zamanda kurallar koyabilirsin.

Örnek 3: Veri doğrulama

const kişi = { yaş: 25 };

const süperCasus = new Proxy(kişi, {
  set(target, prop, value) {
    if(prop === "yaş" && value < 0) {
      console.log("Negatif yaş mı? Hayır, teşekkürler!");
      return false; // Değeri atama
    }
    return Reflect.set(target, prop, value);
  }
});

süperCasus.yaş = -5;  // Konsol: Negatif yaş mı? Hayır, teşekkürler!
süperCasus.yaş = 30;  // Konsol: Property 'yaş' değiştiriliyor
console.log(kişi.yaş); // 30

Açıklama:

• Proxy ile kuralları yakalayabilir ve kötü verileri engelleyebilirsin.
• Reflect yine işlemi güvenli yapıyor.
• Artık JavaScript’te veri doğrulama gözlem + yönetim ile yapılabilir, tam bir süper casus 😎

💡 İpucu: Bu yöntem, kullanıcıdan gelen veriyi kontrol etmek, form validation yapmak veya oyun karakterinin özelliklerini sınırlandırmak için mükemmel.

4️⃣ Fonksiyon Casusluğu: Proxy sadece nesne değil, fonksiyon da izler! 🎯

Örnek 4: Fonksiyon çağrılarını gözlemleme

function selamla(isim) {
  return `Merhaba ${isim}!`;
}

const casusFonksiyon = new Proxy(selamla, {
  apply(target, thisArg, args) {
    console.log(`Fonksiyon '${target.name}' çağrıldı! Argümanlar: ${args}`);
    return Reflect.apply(target, thisArg, args);
  }
});

console.log(casusFonksiyon(Cansu"")); 
// Konsol: Fonksiyon 'selamla' çağrıldı! Argümanlar: Cansu
// Merhaba Cansu!

Açıklama:

• apply: Fonksiyon çağrıldığında tetiklenir.
• Reflect.apply: Orijinal fonksiyonu çağırır ve sonuç döner.
• Artık fonksiyonlar da casusluk altındadır; kim ne çağırdı, hangi argümanla geldi, hepsi görülebilir! 🕵️‍♀️

💡 Pratik ipucu: Logger, debugger veya metrik toplamak için süper yöntem!

5️⃣ Sıradışı Casus Takımı: Proxy + Reflect + Özel Kurallar 💥🕶️

Bunu biraz daha yaratıcı yapalım: bir obje hem property’leri izlesin, hem negatif değerleri engellesin, hem fonksiyon çağrılarını gözetlesin.

const ajan = {
  isim: "007",
  görev: "Kod casusluğu"
};

const süperAjan = new Proxy(ajan, {
  get(target, prop) {
    console.log(`[GET] '${prop}' sorgulandı`);
    return Reflect.get(target, prop);
  },
  set(target, prop, value) {
    if(typeof value === "string" && value.length > 20) {
      console.log("Çok uzun isim? Aman Tanrım!");
      return false;
    }
    return Reflect.set(target, prop, value);
  },
  apply(target, thisArg, args) {
    console.log(`Fonksiyon '${target.name}' çağrıldı`);
    return Reflect.apply(target, thisArg, args);
  }
});

süperAjan.isim = "James Bond, Kod Casusu"; // Konsol: Çok uzun isim? Aman Tanrım!
console.log(süperAjan.görev);               // Konsol: [GET] 'görev' sorgulandı

Açıklama:

• Artık ajanımız süper: property’leri izliyor, kuralları uyguluyor ve hatta fonksiyonları gözetleyebiliyor.
• Kod artık sadece çalışmıyor, aynı zamanda eğlenceli, güvenli ve öğretici bir oyun alanı gibi! 😏

💌 Mini İpuçları:

1. Proxy + Reflect = güvenli casusluk.
2. Veri doğrulama ve logging için mükemmel.
3. Fonksiyonlar, array’ler ve objeler için kullanılabilir.
4. Hedefi bozmadan davranışları değiştirmek mümkün.
5. Özellikle frameworklerde (Vue, Angular, React state yönetimi) gizli ajan olarak kullanılıyor! 😎