Proxy et Reflect : Les espions derrière le code 🕵️‍♂️💖

En JavaScript, Proxy et Reflect fonctionnent comme un agent et son partenaire de confiance : l’un observe tout, l’autre veille à ce que tout se passe correctement. Prépare-toi — libère ton hacker intérieur ! 😏💻

1️⃣ Proxy : L’espion qui observe 👀

Un Proxy est un espion qui se cache derrière un objet et surveille chacun de ses mouvements. Lorsqu’une propriété est consultée, modifiée ou supprimée, Proxy dit immédiatement :
« Je suis là. J’ai tout vu ! » 😎

Exemple 1 : Espionnage basique 🕵️‍♀️

const cible = { nom: "Cansu", age: 25 };

const espion = new Proxy(cible, {
  get(target, prop) {
    console.log(`La propriété '${prop}' a été consultée !`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`La propriété '${prop}' est modifiée : ${value}`);
    target[prop] = value;
    return true;
  }
});

console.log(espion.nom); // 👀 Console : La propriété 'nom' a été consultée !
espion.age = 26;         // 📝 Console : La propriété 'age' est modifiée : 26

Explication :

• get : S’exécute à chaque accès à une propriété. Affiche un message et renvoie la valeur réelle.
• set : S’exécute lors d’une modification. Affiche le changement et met à jour la valeur.
• Avec Proxy, tu peux désormais observer le comportement d’un objet — comme James Bond version code 😎

💡 Astuce : get et set ne servent pas uniquement aux propriétés ; ils fonctionnent aussi avec les fonctions et les tableaux.

2️⃣ Reflect : Le partenaire de confiance de l’espion 🛠️

Reflect est l’outil qui aide Proxy à faire son travail proprement. Proxy intercepte l’action, Reflect dit :
« T’inquiète, je m’en occupe correctement. » 😏

Exemple 2 : Proxy + Reflect = Espionnage parfait 🕵️‍♂️💥

const cible = { nom: Cansu", age: 25 };

const espion = new Proxy(cible, {
  set(target, prop, value) {
    console.log(`La propriété '${prop}' est modifiée : ${value}`);
    return Reflect.set(target, prop, value);
  },
  get(target, prop) {
    console.log(`La propriété '${prop}' a été demandée`);
    return Reflect.get(target, prop);
  }
});

espion.nom = "Cansu";
console.log(espion.nom);

Explication :

• Reflect.set : Assigne la valeur à l’objet cible en toute sécurité.
• Reflect.get : Récupère la valeur de manière propre et fiable.
• Reflect permet un espionnage propre, sûr et sans drame 😏

💡 Astuce pratique : Si tu ne veux pas que Proxy casse tout, utilise toujours Reflect. L’espion observe, mais ne crée pas le chaos 🕶️

3️⃣ Validation des données avec Proxy : « Pas d’âge négatif ! » 🚫

Proxy ne se contente pas d’observer — il impose aussi des règles.

Exemple 3 : Validation des données

const personne = { age: 25 };

const superEspion = new Proxy(personne, {
  set(target, prop, value) {
    if (prop === "age" && value < 0) {
      console.log("Un âge négatif ? Non merci !");
      return false;
    }
    return Reflect.set(target, prop, value);
  }
});

superEspion.age = -5; // Console : Un âge négatif ? Non merci !
superEspion.age = 30;
console.log(personne.age); // 30

Explication :

• Proxy intercepte les mauvaises données et les bloque.
• Reflect applique les changements valides en toute sécurité.
• La validation devient observation + contrôle — un vrai style d’espion 😎

💡 Astuce : Parfait pour la validation de formulaires, les entrées utilisateur ou la limitation des caractéristiques d’un personnage de jeu.

4️⃣ Espionnage des fonctions : Proxy surveille aussi les fonctions ! 🎯

Exemple 4 : Suivi des appels de fonction

function saluer(nom) {
  return `Bonjour ${nom} !`;
}

const espionFonction = new Proxy(saluer, {
  apply(target, thisArg, args) {
    console.log(`La fonction '${target.name}' a été appelée ! Arguments : ${args}`);
    return Reflect.apply(target, thisArg, args);
  }
});

console.log(espionFonction(Cansu"));

Explication :

• apply : Se déclenche lorsqu’une fonction est appelée.
• Reflect.apply : Exécute la fonction originale et renvoie le résultat.
• Les fonctions sont désormais sous surveillance : qui les appelle, avec quels arguments 🕵️‍♀️

💡 Astuce pratique : Idéal pour le logging, le débogage et le suivi des performances.

5️⃣ L’équipe d’espions ultime : Proxy + Reflect + règles personnalisées 💥🕶️

Allons encore plus loin 😏
Un objet qui surveille ses propriétés, bloque les mauvaises valeurs et applique des règles.

const agent = {
  nom: "007",
  mission: "Espionnage de code"
};

const superAgent = new Proxy(agent, {
  get(target, prop) {
    console.log(`[GET] '${prop}' a été demandée`);
    return Reflect.get(target, prop);
  },
  set(target, prop, value) {
    if (typeof value === "string" && value.length > 20) {
      console.log("Nom trop long ? Oh non !");
      return false;
    }
    return Reflect.set(target, prop, value);
  }
});

superAgent.nom = "James Bond, Espion du Code";
console.log(superAgent.mission);

Explication :

• Notre agent est désormais imbattable.
• Il surveille, contrôle et protège les données.
• Le code n’est plus seulement fonctionnel — il est amusant, sûr et pédagogique 😏💻

💌 Mini-astuces :

• Proxy + Reflect = espionnage sûr et puissant
• Parfait pour la validation et le logging
• Fonctionne avec les fonctions, les tableaux et les objets
• Modifie le comportement sans toucher à l’objet original
• Très utilisé en coulisses dans les frameworks
  (Vue, Angular, React – gestion du state) 😎