ECMAScript 2015 (6th Edition), commonly referred to as “ES6”, is the current version of the ECMAScript Language Specification standard.
In this post I go through leveraging some of its new feature to rewrite a recursive implementation of the document API method getElementsByClassName().
getElementsByClassName() returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.
A recursive implementation could look something like this:
Let’s see how ES6 could come handy:
Arrow functions are always anonymous. Also known as fat arrow function, have a shorter syntax compared to function expressions and lexically binds the this value. Let’s refactor the previous version using Arrow functions expressions instead:
Not much but we shaved off some characters anyway.
We are all familiar with those array-like objects, especially if we deal with the DOM. The Array.from() method creates a new Array instance from an array-like or iterable object. Forgot about those? Here a refresher:
This is why in our earlier implementation we relied on underscore (_.each()) to iterate through that array-like object. Lets refactor again and get rid of that underscore dependency:
Note that defaults are not yet supported in chrome, therefore you won’t be able to fully test this ES6 refactored solution out of the box. Because of that, I strongly encourage you to use the babel transpiler.