Two ES6 guys you may not know

Ecmascript is defined as a Standard for scripting languages. Languages like Javascript are built on top of Ecmascript specification, ruled by an entity called Ecma International.

We lived so long with the same features of Javascript, and the web kept evolving and while we created web applications, the entire ecosystem of Javascript started to demand more and more features of a language that was not intended to be as used as it is.

The latest survey made by Stackoverflow shows that Javascript is the most popular programming language nowadays.

Stackoverflow survey 2017

In 2015, Ecmascript6 was released and a bunch of new features came out, preparing us for the next generation of Javascript applications. Features like Classes, arrow functions, template literals, generators, etc. appeared in this version.

However, recently I found myself reading a page that contains all the es6 features called and I found two guys that I've never seen before, and that's what I am going to explain right away. Even in 2017, I think it's worth to spread the existence of these features :)

Proxy Object

The proxy object is defined by the MDN Web Docs as follows

The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).

The proxy object may have a lot of applications, but I will focus in one that I find really interesting:

  • Multiple Inheritance

Multiple Inheritance, in object oriented languages, is the ability to extend features, methods, etc. from more than one parent. Since languages like Java, this is not possible natively.

Andre Staltz posted recently a tweet that forwarded to a thread in Stack Overflow that showed how we can have Multiple Inheritance in Javascript through ES6 Proxy and Prototype-based OOP.

Basically, the proxy object has a concept called trap, that is analogous to the operating systems traps. In the Proxy world, traps are methods that are called when some operation is called. So for example, if I use the proxy object within an iterator, it may use the get, set, and has traps.

To illustrate the behavior of the Proxy object, look at the following snippet

The function multiInherit will create an object with properties that come from different parents. We can use it as follows

Some interesting facts:

  • The type of the variable obj will be Object
  • The value of the variable obj.a is 1
  • The value of the variable obj.b is 2
  • The value of the variable obj.c is undefined

The last three calls will trigger the get trap because we wanted to get the value of some object property. If we try to use the basic operation in, the has trap will be triggered.

Reflect Object

The Reflect object is defined by the MDN Web Docs as follows

Reflect is a built-in object that provides methods for interceptable JavaScript operations. The methods are the same as those of proxy handlers. Reflect is not a function object, so it's not constructible.

For those who came from languages like Java or C#, you should know that reflection is the way of finding methods and attributes of classes dynamically. This can be very useful when we have to call methods dynamically, or get and set the value of some attributes that are defined at runtime.

While learning and using React, I found myself building classes that inside constructors had a lot of method bindings in order to be able to use the this keyword with the same context.

Well, you may disagree that the repetition of bindings inside the constructor is verbose, but I think it is. Using the power of reflection I refactored the component to be as follows

With the method bindMethodsWithContext I won't worry anymore with binding every new created method of my class with the this context.

Furthermore, you can put this method in a BaseClass that is extended from every component of your app, and keep out future binding bugs.

These were a small set of applications of the objects Reflect and Proxy, and I will be happy if this article helped you somehow. If you are using one of these objects differently, please share with us too!

Thanks for reading and leave a feedback :)

Like what you read? Give Juan Pablo Rivillas a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.