Two years later, what ES6 (ES2015) features I use most

It has been almost two years since the ES6 standard have been released, and thanks to tools like Babel we didn’t have to wait for browsers support in order to adopt the new standard.
I have to admit that initially some of the new language features seemed weird and unnecessary, but as I started to use them their benefits became clear.
I thought it would be an interesting exercise to review the new features and list the ones that I use the most as JS developer (of course, your list could be different..).

Each section title links to the relevant MDN documentation, and I tried to add a short example for each feature that showcases its benefits.


These new declarations are block-scoped, which make good sense and is more intuitive. 
Being able to define consts allows to be more specific with describing the intended use of the variables which in turn leads to more readable code which is safer to refactor (even though const’s can be mutated).

const foo = {a: 1, b: 2}
foo.a = 3 //allowed
foo = {} //error

Arrow functions

The intuitive scoping and minimalistic syntax make this the new go-to way of defining functions.

const foo = name => {
console.log(`Hello ${name}`)

Destructuring assignment

I use it mostly with objects and it really cuts-down on code repetition:

const foo = {a: 1, b: 2, c: 3, d: 4}
// ES6
let {a, b, c} = foo
// ES5
a = foo.a
b = foo.b
c = foo.c


Really useful for doing immutable transformations and augmenting existing objects — for example, integrating user specified options with defaults in a library.

const config = {a: 1, b: 2, c: 3}
const options = {b: 8}
// mutate
Object.assign(config, options)
console.log(config) // output: Object {a: 1, b: 8, c: 3}
// immutable update
const foo = {a: 1, b: 2, c: 3}
const bar = Object.assign({}, foo, {b: 8}, {c: 9})
console.log(bar) // output: Object {a: 1, b: 8, c: 9}

Default parameters

Being able to give default values to function arguments just makes sense and was really missing from the language.
Saves us from using ugly code like this:

// ES5
function oldWay (a, b) {
a = (typeof a !== 'undefined') ? a : 'foo';
b = (typeof b !== 'undefined') ? b : 'bar';
return a + b;
// ES6
function newWay (a = 'foo', b = 'bar') {
return a + b


This one is huge. We had module systems before (like CommonJs, RequireJs), but having a standard way of using modules in the browser is a big step forward. 
Modules allow to easily structure the code in a modular way that encourages encapsulation and composability and lead to more maintainable and reusable code.

Note that this feature is not currently supported natively in any browser.

Template literals

Again, this new feature just makes sense and saves us from unreadable code and excessive typing:

const foo = 1
// ES5
const str1 = 'Baz: '+ foo + ', '+ (foo + 1) + ', '+ (foo + 2) + ', '+ (foo + 3) + '!'
// ES6
const str2 = `Baz: ${foo}, ${foo + 1}, ${foo + 2}, ${foo + 3}!`


One of the ways to make async code more manageable and readable, aPromise represents a value which may be available now, or in the future, or never.

Through different library implementations, promises have shown their benefits for a while and now they are part of the standard.

const delayed = new Promise(resolve => {
setTimeout(() => {
}, 500)
delayed.then(() => {console.log('Hello!')})
console.log('Wait for it...')

Property Shorthands

This is a small and simple new feature that can make the code shorter with all the benefits it brings:

const aaa = 1, bbb = 2, ccc = 3, ddd = 4;
// ES5
const foo = {
aaa: aaa,
bbb: bbb,
ccc: ccc,
ddd: ddd,
// ES6
const bar = {

To summarize, ES6 brought many new features into the language, and the ones listed above have proven to be very useful for me, making my life as a developer easier.
Most of these features are already supported natively in modern browsers, and there are good tools that enable support for older browsers. 
So, in my opinion there’s really no excuse not to use them.