Home » JavaScript » ES6 and beyond – What i really like

About Branislav Vidovic

Branislav Vidovic

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.
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments