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 const s 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

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

const foo = name => {

console.log(`Hello ${name}`)

}

foo('world')

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}

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.

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, a Promise 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(() => {

resolve()

}, 500)

})

delayed.then(() => {console.log('Hello!')})

console.log('Wait for it...')

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