Underrated ES2015 features

Object Property assignment

With the new and improved enhancement, enumerable properties from source objects, one or more; can be deep copied over to a destination object with ease. You might have used utility methods such as JQuery $.clone and loadash’s _.cloneDeep for doing the deed. There was also the vanilla JS approach — loop through keys using Object.keys(src1) and for each key, assign its value to the destination object.

Object.keys(source).forEach(function(key) { dest[key] = source[key]; });

Enter ES6 — Use Object.assign(dest, sourceA, sourceB)

Chop, Chop, that is it!

Array find

Array.prototype.indexOf() does not offer to take in a callback for defining conditions. Also, to use it, you need to know the value already. This does not scale well and ends up developers looping through the entire array to find a value and then deducing the index of the value. With ES6, arrays are supplemented with 2 new methods — find and findIndex. They accept a callback and return the first matched value.

let costs = [20, 34, 10, 5];

let costlyItem = costs.find(cost => cost > 20); // 34

let costlyItemIndex = costs.findIndex(cost => cost > 20); // 1

String searches

String.prototype.indexOf > -1 , regex and str.search(regexp) have been used so far to search on strings. Enter ‘includes’, you can now use –

“javascript”.startsWith(“script”, 4) //true

“javascript”.endsWith(“java”, 4) //true

“javascript”.includes(“java”) //true

“javascript”.includes(“script”, 5) //false

Meta Programming with Proxy & Reflection

Meta-Programming is a technique to read, assess and mutate other programs to during runtime. ES2015 has introduced metaprogramming with Proxy and Reflect to override JavaScripts fundamental operations such as property lookup, function calls and assignment with custom handlers.

Proxy

Proxy object enables interception of common operations to create custom handlers. To create a proxy instance, initialize the Proxy constructor with 2 parameters; target object and a handler object. The target object is the object on which you want to intercept operations, and the handler object is a plain old object with methods known as ‘Traps’. Traps — I ain’t a bodybuilder you might say, or I ain’t an Operating System trap expert. And that is ok. Traps in proxy handlers are methods — get, set, has, enumerate and more. They cater to use cases such as access control, validation, and encapsulation.

Reflect

You should have noticed ‘Reflect’ in the above example; and you guessed it right — Reflect has been used as an alternative approach to traverse and find prop in obj. So what is Reflect exactly? Reflect is an object which helps to forward default operations from its handler to the target. But isn’t it better to just use ob.prop? Yes, it is. But the real power of using Reflect starts manifesting when you use other traps which require lots of code to replicate the functionality. And plus, it can be used as a common interface for all operations.

Based on the new additions, clearly, TC39 is introducing features which guarantee longevity of the language. I’m thrilled about 7th and 8th edition of JavaScript. How about you?

Originally published at javascriptstore.com on September 21, 2017.