Lightweight ES6 Features That Pack A PunchECMAScript 6's "Quick Wins" that you should know.
I had been staying away from ECMAScript 6 (ES6) for quite a while now despite the offerings of advanced features and syntactic sugars by ES6. Back then, ES6 was still in the draft stage. I did not want to devote my time into some fancy features that might suddenly be yank out.
I grouped the feature list into two categories - The heavyweight features and the lightweight features. The heavyweight features are features like class, modules, promises, iterators, generators, etc. These features are refreshingly different and will bring major paradigm shift in terms of code structure for web developers.
Lightweight features are like "quick wins".
On the other hand, lightweight features are features that are much easier to digest but yet still bring immense amount of benefits to web developers. They are easy to use and your code structure doesn't need to undergo major face-lift. Hopefully by understanding these lightweight features, it will eventually help to ease you into ES6.
var keyword defines a variable that is accessible within the function scope. But with
let, you are able to limit the scope of the variable to the block.
Use Case: Prevent the variable
nameBlock from being changed by the
If you are normally careful about variables and its scope, this shouldn't be a worry for you. A more practical use case will be to bind variables within the scope of the loop.
Use Case: Bind variables within the scope of the loop.
Notice that the variable
i is still visible outside of the
for loop. By using
let in loop, you are safe from overwriting variables outside of the
for loop and the variables within the loop are invisible to the outside block.
2) Destructuring Assignment
destructuring assignment syntax allows you to extract data from array or object using a syntax that mimics the structure of the array or object literal.
Use Case: Initialize the variables
The above example demonstrates
Array Destructuring and
Object Destructuring. The
destructuring assignment syntax looks slightly awkward at first glance. But with enough practice, you will be using it without skipping a beat.
3) Default Parameters
Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed.
Use Case: If parameters are undefined, set parameter
seller to be "John" and
price at 2
Default parameters are self-explanatory. Use ES6's default function parameters if you have the need to explicitly set the default value of the parameters.
4) Rest Parameter
rest parameter syntax allows us to easily create variadic function - a function that can take in different numbers of argument. Just append the
... in front of the argument.
Use Case: Iterate over the arguments with
The funny thing about the
arguments object is that it looks like an array and behave like an array but it is not an array. Thus, it is not able to use native Array methods such as
Instead you can convert it into a native array using the unsightly
Array.prototype.slice.call function. Rest parameter on the other hand readily provides us with an array literal.
5) Spread Operator
The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.
Use Case: Replaces
apply when you want to use an array as an argument for the function. The
spread operator replaces this clumsy solution.
Use Case: Create a new alphabet array that are arranged in order
Instead of using
apply, you can simply use the
spread operator to flexibly arrange and form the new array.
The Set object lets you store unique values of any type, whether primitive values or object references.
Use Case: Find unique values in an array
To find an unique set of values in an array without the
set object, you will need to
filter through the collections. The
filter callback checks whether the value is first occuring. If it's not, it is a duplicate value and will not be included in the
tempArr. As for the
set object, it will automatically include unique values only.
Note: You can directly set the array as the Set's argument with
var set = new Set(arr). However, that particular method was not working on my ES6Fiddle nor Firefox's console hence I decided to use
forEach to manually add the array's item into the Set. Thanks to tulchin for pointing it out.
Map object is a simple key/value map. Unlike the object literal, the object's key can be an object literal instead of a string.
Use Case: Map each DOM element with the associated content
In the example above, we first setup the
map object with the DOM elements and its associated content. After we click on the "Change box content" button, the box will update its content.
By setting the DOM element as a key, I still hold on to the meta data of the DOM element which I'm able to manipulate later on.
I don't see myself using this
map object very often but when the situation calls for it, the
map object will be an elegant solution. Credit to this article for the inspiration of the example.
ES6 looks really cool! I'm so ready to use it now.
There are actually some features that you can use right now on your modern browsers such as
map objects. You can check out the full range of ES6 supports right here.
To know what transpilers to use to compile ES6 into valid ES5 code, check out the article by 2ality. Addy Osmani also aggregated an extensive list of ES6 tools: https://github.com/addyosmani/es6-tools.
When will it be ready?
According to multiple readings online, ES6 is said to be a standard by mid 2015. Anyone with official sources, please drop me an email or a tweet.
How about the heavyweight features?
The heavyweight features will be coming soon. Subscribe for updates.