The Ultimate Guide to ES6
ES6 is short for ECMAScript2015. ECMAScript is simply a javascript implementation, and ES6 is the latest major release. This article explores the highlights of ES6 as well as the ECMAScript implementations and how they've evolved over time.
ECMAScript: A Brief History
Javascript was first released in 1995 as 'livescript'. In 1997, the ECMAScript standard was established. ECMA was organized as a scripting language specification for JavaScript. ECMA released ES3 in 1999. From 2000-20005 AJAX grew in popularity and in 2009 ES5 was released.
ES5 remains the most widely used specification. ES6 was finalized in June 2015 but remains only partially supported in major browsers. Although developers can transpile ES6 mark up to ES5, it means more build process.
This is not to say that ES6 should be ignored. In fact, frameworks like Angular 2 are built on TypeScript (a strict ES6 compliant javascript superset). Through its syntactic sugar and object oriented approach, ES6 is quickly becoming the new status quo for javascript developers.
ES6 What's New?
There are many things that are syntactically different in ES6. Below is a list of the most relevant changes that make ES6 better than it's predecessor.
Multi line string
Have you ever wanted to assign a block of plain text to variable? With ES5, you can achieve this, however it involves concatenating strings with '+' for new lines. This gets messy fast. With ES6, you can define a block of text as a multi line string.
Enhanced Parameters
In ES6, you can pre define parameter values when defining functions. For instance, you could do something like the following:
function(x,y=4,z=30){}
This is great because you can assign pre defined values more easily, not having to explicitly define them default values inside the function. This greatly reduces the lines of code you have to write!
Classes
ES6 uses class structures. This makes it easier to define classes without having to use the overly verbose 'prototype' declarations. This makes inheritance cleaner and easier to define as well. With ES6 classes, developers can take a more object oriented approach to front end design.
Promises
ES6 incorporates promises, which represent asynchronous requests and their eventual result. This provides a cleaner way to manage asynchronous operations, avoiding messy callbacks and taking on more of a try...catch approach.
Arrow Functions
One of the best syntactic sugar elements is arrow functions. Using a traditional array map function is a great example:
array.map(x=> x + 1)
Object Matching
If you've worked with any JSON api, you will greatly appreciate this one. Object matching involves implicitly mapping values from one object to another. This allows you to 'destruct' objects into distinct variables. This is best explained through example. Say you have an object
{a:'one', b:'two', c:'three'}
If you set this object equal to a variable like so:
{a,b,c} = {a:'one', b:'two', c:'three'}
you can then do...
console.log(a) // one
console.log(b) // two
This makes it much easier to deconstruct JSON objects into more managable parts.
Block Scope Constructs
With ES6, you can use the lets and const constructs to more easily control variable scope. Defining constants allows for easy creation of global variables. Replacing 'var' with 'lets' provides block level definitions, avoiding 'scope creep'.
Other benefits
This covers some of the more common benefits that developers see from using ES6. Below is a list of other things not discussed in detail:
- Modules & imports/exports
- Array element finding
- String repeating
- String searching
- Template literals
- Build in methods
- String interpolation
Conclusion
If you're using some of the more cutting edge frameworks (Angular 2, React Native), then there is a good chance you're already writing code with ES6 (especially if you're using TypeScript). While ES6 continues its gradual rollout, precompilers like Bable make it easy for transpiling ES6 code into the more widely accepted ES5 standard. This leaves little reason to not start utilizing ES6 standards in your javascript development.
