Search⌘ K
Home
Courses
Let's learn ES6! Master new JavaScript features faster and easier

Proxies & Reflect

Explore how ES6 Proxies enable you to intercept and customize operations on JavaScript objects, such as property access and assignment. Understand how to implement handlers with traps like get and set to create dynamic, programmable behaviors. Discover the Reflect API, which complements Proxies by providing reliable static methods to work with objects. This lesson helps you apply these concepts to build intuitive APIs and implement features like validation and auto-rendering in components.

We'll cover the following...

A Proxy in ES6 is a special type of object that allows us to intercept operations preformed on an Object. Operations like property lookups, assignments and more. Proxies all us to set up a target object with a handler. The handler object is used to override the operations on our target object. Let’s first look at the syntax for our Proxy.

Javascript (babel-node)
new Proxy(target,handler);

With this in mind, let’s create a person object with two simple properties on it.

Javascript (babel-node)
const person = new Proxy({
    name: 'Ryan',
    age: 31
},{
    //Handler goes here.
})

On this person object, we have only two properties name and age. The handler object is used to list ‘traps’, these trap methods include get(), set(), and much more. As an example, lets set up a Proxy that has a get trap.

Javascript (babel-node)
const person = new Proxy({
  name: 'Ryan',
  age: 31
}, {
  get(target, prop) {
    return target[prop]
  }
});

Here we implement a get trap on our handler, notice that the method gets passed two arguments, target, and prop. target is the object we are trying to access the property from. And prop is what key we want to access. Calling person.name will trigger the get trap, as we are trying to access the name property. In our trap here we simply return the value, but image that we could alter the values.

Let’s change this to return all uppercase strings from our object.

Javascript (babel-node)
const person = new Proxy({
  name: 'Ryan',
  age: 31
}, {
  get(target, prop) {
    const val = target[prop];
    return typeof val === 'string' ? val.toUpperCase() : val;
  }
});
console.log(person.name); //RYAN

This opens up a ...