Getting Started with Modern JavaScript — Proxy

Getting Started with Modern JavaScript — Proxy

JavaScript proxies were introduced in 2015 with ECMAScript 6. A Proxy object wraps another object and acts as a middleman. They allow us to intercept and override operations such as object property lookup and assignment.

JavaScript proxies were introduced in 2015 with ECMAScript 6. They allow us to intercept and override operations such as object property lookup and assignment. A Proxy object wraps another object and acts as a middleman.

proxy.png

Syntax

A proxy is created using the new Proxy constructor with two required arguments: the target and the handler.

let proxy = new Proxy(target, handler);<>
  • target — The object we wrap.
  • handler — An object that defines the methods (also called traps) to control the behaviors of the target.

A Proxy creates an undetectable barrier around the target object that redirects all operations to the handler object. If we send in an empty handler, the proxy is just an empty wrapper around the original object.

let user = { 
  name: 'Max', 
  age: 42
};

let proxyUser = new Proxy(user, {});

console.log(user.name); // -> Max
console.log(proxyUser.name); // -> Max
<>

To give the proxy meaning, we need to add some functionality to the handler.

Traps

Whenever you interact with an object, you are calling an internal method. Proxies allow you to intercept the execution of a given internal method with traps.

So when we run user.name we are telling the JavaScript engine to call the internal [[GET]] method to retrieve the name property.

When we run proxyUser.name the get trap calls the get() function defined in the handler to execute before sending the call through to the original object.

proxyuser.png

Get

The get() method has two required parameters:

  • target — Object passed to the proxy.
  • property — Name of the accessed property.

To customize the proxy, we define functions on the handler object. Here we define the get method to log the access:

const handler = {
  get(target, property) {
    console.log(`GET ${property}`);
    return target[property];
  }
};
<>

To let the call through, we return target[property].

Now, if we create a proxy with this handler and try to access the original object, we log the call:

const proxyUser = new Proxy(user, handler);

console.log(proxyUser.age);
// -> GET age
// -> 42
<>

We can see that when we access a property of the user object via the proxyUser object, the get() method fires in the handler object.

javascript programming developer web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.