JavaScript

ES6 and beyond – What i really like

Hi dear software companions. It has been a long time. A lot had happened in between. I even changed a residence :)

But enough about me. Let’s talk some JavaScript. Recently i have read a book called You Don’t Know JS: ES6 & Beyond written by Kyle Simpson. I was fully overwhelmed with the amount of new features and syntax shortcuts (or how people like to call it syntax sugar) in ES6. Until now i did not have any contact with ES6.

Quite a few things i found interesting. For example one of those things are Proxies.

As i was reading about proxies i realized that many times in the past i was thinking how nice it would be to have structure like this available (together with some kind of syntax for classes which is now also available).

Let’s try to define a really simple Proxy in ES6. As you all probably know, proxy is nothing more than a “stand-in” object, which sits in front of real object. It can do some light-weight work or preparation until the real object is ready or created. Of course there are a lot of applications for proxies and software is full of them. You can easily find a lot of examples and explanations.

Proxy

In ES6 we define a proxy by passing the original object and handlers. What are these handlers? Handlers are just a list of specially named functions which we can use to do some work. So here is an example for handlers (sometimes called traps) which are invoked when when a property on an object is accessed and when the property is set:

var someObject = { a: 1 },
    handlers = { 
      get(target, key, context) {
          var value = Reflect.get(target, key, context);
          console.log(`accessing: ${key} and the value is ${value}`);
          return value;
      },
      set(target, key, value, context) {
          console.log(`setting: ${key} to the value ${value}`);
          return Reflect.set(target, key, value, context);  
      }
    },
    proxyObject = new Proxy(someObject, handlers);
 
proxyObject.a;
proxyObject.a = 2;
proxyObject.a;

If you run this for example in ES6 Fiddle you should get output like:

accessing: a and the value is 1
setting: a to the value 2
accessing: a and the value is 2

So pretty neat stuff. I really like this syntax and feature in ES6. It is clear and handy. I could also not resist using some template strings which also came with ES6.

You are probably wondering now how can you know which named functions are available for handlers. Have a look here at
MDN for a complete list of handler traps available to proxy object.

You will often use Proxy and Reflect (introduced also in ES6) in combination. Handlers/traps are called when a meta programming task is executed on an object and the Reflect API is used to execute those tasks directly on the object.

This is all for now. I will post shortly some more on proxies and how they could be used.

Reference: ES6 and beyond – What i really like from our WCG partner Branislav Vidovic at the Geek stuff :-) blog.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button