JavaScript Academy · Lesson

Creating a Proxy

Wrap objects to intercept operations.

Creating a Proxy is a free JavaScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Proxy?

A Proxy wraps an object and lets you intercept fundamental operations like reading, writing, and deleting properties.

You create one with new Proxy(target, handler), where the handler defines traps that customize behavior.

An Empty Handler

With an empty handler, the proxy behaves exactly like the target. Every operation passes straight through.

const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});

console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);

Target and Proxy Share State

The proxy does not copy the target. They reference the same underlying object, so a change through either is visible in both.

const target = { count: 0 };
const proxy = new Proxy(target, {});

proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);

Adding a get Trap

The get trap intercepts property reads. Here every read is logged before returning the value.

const proxy = new Proxy({ name: 'Ada' }, {
  get(target, prop) {
    console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.name);

Trap Parameters

The get trap receives the target, the property name, and the receiver (the proxy). You decide what to return.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 'missing';
  }
});

console.log(proxy.a);
console.log(proxy.b);

Computed Properties on Read

A get trap can return values the target does not actually store, computing them on the fly.

const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
  get(target, prop) {
    if (prop === 'full') return target.first + ' ' + target.last;
    return target[prop];
  }
});

console.log(proxy.full);

Adding a set Trap

The set trap intercepts writes. You must return true to signal success, or the assignment is treated as failing.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    console.log('setting ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.score = 42;
console.log(proxy.score);

The has Trap

The has trap intercepts the in operator, letting you customize membership checks.

const proxy = new Proxy({ a: 1 }, {
  has(target, prop) {
    console.log('checking ' + prop);
    return prop in target;
  }
});

console.log('a' in proxy);
console.log('b' in proxy);

The deleteProperty Trap

The deleteProperty trap intercepts delete. Return true for success.

const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
  deleteProperty(target, prop) {
    console.log('deleting ' + prop);
    delete target[prop];
    return true;
  }
});

delete proxy.secret;
console.log(Object.keys(proxy));

Many Traps Available

Beyond get and set, proxies support traps for has, deleteProperty, ownKeys, apply (for functions), construct, and more. You implement only the ones you need.

const proxy = new Proxy({ x: 1, y: 2 }, {
  ownKeys(target) {
    console.log('listing keys');
    return Object.keys(target);
  }
});

console.log(Object.keys(proxy));

Why Proxies Matter

Proxies let you add validation, logging, default values, and reactivity without changing the target object. They power frameworks like Vue's reactivity system. Next you will dig deeper into get and set traps.

const logged = new Proxy({ v: 0 }, {
  get: (t, p) => { console.log('get ' + p); return t[p]; },
  set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);

Quick Check

What does new Proxy(target, handler) create?

Recap: Creating a Proxy

You learned to intercept object operations:

new Proxy(target, handler) wraps an object with traps.
An empty handler passes everything through; proxy and target share state.
Common traps: get, set, has, deleteProperty, ownKeys.
set and delete traps must return true on success.

Frequently asked questions

Is the “Creating a Proxy” lesson free?

Yes — the full text of “Creating a Proxy” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Creating a Proxy”?

Wrap objects to intercept operations. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Creating a Proxy” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy