Proxy - The Bouncer in JavaScript

Ever tried directly meeting the CEO of a big company?

Yeh company ka CEO hai, koi aise hi mil sakta hai kya?

You'd probably have to go through the Personal Assistant (PA), maybe even get filtered out. That’s exactly what a Proxy is in JavaScript - a powerful feature that lets you intercept and redefine fundamental operations for objects.

Proxy acts like a PA or bouncer to an object. Every time someone tries to access or change something in the object, Proxy steps in and decides: "Allowed hai ya nahi?"

Arre bhai, pehle mujhe pass karna padega!

Let’s say you have a ceo object:

const ceo = {
  name: 'Mr. Sharma',
  salary: '7 crore',
  meetings: 5
};

Now, you want to prevent people from directly accessing the salary and changing the name. Here's how Proxy helps:

const proxyCEO = new Proxy(ceo, {
  get(target, prop) {
    if (prop === 'salary') {
      return 'Aree beta, salary toh confidential hai!';
    }
    return target[prop];
  },
  set(target, prop, value) {
    if (prop === 'name') {
      console.log('Naam badalne ki koshish? Not allowed!');
      return false;
    }
    target[prop] = value;
    return true;
  }
});

Try it in action:

console.log(proxyCEO.name);     // Mr. Sharma
console.log(proxyCEO.salary);   // Aree beta, salary toh confidential hai!
proxyCEO.name = 'Mr. Bansal';   // Naam badalne ki koshish? Not allowed!
proxyCEO.meetings = 6;          // Works

You're not directly dealing with the CEO (original object). You're dealing with the assistant (proxy) who handles things smartly.

Here's what's happening:

1. The get trap intercepts the read operation.

2. The set trap controls the write/update operation.

3. You're never actually touching the real ceo object.

Yeh kaam allowed hai... par yeh nahi!

But wait, why even use a Proxy?

• To hide sensitive data

• Add custom validation

• Act as audit logs (logging every access/change)

• Protect internal logic from outside tampering

It’s like a CCTV, firewall, and HR manager rolled into one.

Bhaiya, yeh toh sirf HR aur founders dekh sakte hain!

Use Cases

• React.js uses Proxy for reactivity (tracking changes in components)

• Zustand and MobX leverage proxies to detect state changes

• React DevTools use proxies to safely inspect component state

• Even browser internals like textContent and localStorage behave proxy-like

• Array's .length updates? Also handled smartly behind the scenes!

For Interviews just say,

JavaScript Proxy is like a bodyguard for your object.
It was added in ES6 and helps you control or customize what happens when someone reads (get) or changes (set) a property.

You create it using:

• a target (the original object)

• a handler (an object with traps like get, set, etc.)

Use Proxy when you want to:

• Protect data

• Add validations

• Track changes

Basically, it's like a gatekeeper that intercepts fundamental operations and lets you override their behavior.

TL;DR

A Proxy gives you control over how an object behaves when it's accessed or modified.
It’s like having a personal assistant (or bouncer) for your JavaScript objects in smart, alert, and funny. 😄

JS Objects be like:
Don’t talk to me. Talk to my Proxy.

Learning Proxy isn’t just useful, it’s a superpower when working with frameworks, clean code, or even building your own smart wrappers.