ES6 more well-known as ECMAScript 2015 at the time of writing is the current JavaScript specification. Before ES6, we had ES5.1 which was released all the way back in June, 2011. To put this into perspective, ES6 was published on June, 2015 and included much needed improvements that the long-outdated ES5 specification didn’t deliver.

Now we have got a bit of history out of the way, lets dive into some of the key improvements:

  • let & const
  • Default function parameters
  • Template literals
  • Block level scopes
  • Classes (albeit, simplified)
  • Additional array functions
  • Arrow functions
  • Object literals
  • and much more…

Over time I will cover these and more in their own posts but for now I will go over some of the more important parts.

Default Function Parameters

Most languages support default values for function parameters, JavaScript didn’t which resulted in some pretty ugly code when we wanted a default value. Lets first have a look at a pretty basic example:

function sayHello(name) {
  name = name || 'Chris'
  console.log('Hello,', name)
}

I think we can all safely say this isn’t the nicest way to experience default values. With ES6 this nuance is now a thing of the past as we can move our fallback statement to be a part of the parameter declaration.

function sayHello(name = 'Chris') {
  console.log('Hello,', name)
}

Much nicer!

Arrow Functions

I’m an avid user of arrow functions1, but this doesn’t mean I completely removed traditional functions from my life. One misonception that arised with arrow functions is that they were a drop in replacement, this isn’t true and is where I say use them carefully.

With that said; lets get stuck in.

const numbers    = [1, 2, 3, 4, 5]
const multiplied = numbers.map((number) => number * 2)

console.log(multiplied) // [2, 4, 6, 8, 10]

What happenend though? Great question!

Arrow functions hold a secret feature which allows us to implicitly invoke return without needing to explicitly declare the return keyword. Now we reap the benefit of one line of code versus three which would would have had previously.

let & const

I’ll admit, when I first read that JavaScript was getting these keywords I was slightly confused by them but it simply comes down to context and immutability. Lets take the following example:

var foo = 'bar'
foo = 'foo'

Here we can see that our foo variable can be changed at any given time, this is a great example of an variable that we may not want to mutate directly after creating it. We can prevent any mutations by using const which prevents the original value of the variable from being changed.

const foo = 'bar'
foo = 'foo' // TypeError: Assignment to constant variable

Now we can see our mutation failed because it has been defined as a constant variable. One gothca that newcomers to ES6 struggle with is the concept of mutating objects and array without mutating the value. When we think about constant variables we only need to focus on the value that was first assigned. Arrays and objects are mutable by default which means we can do something similar to the below and it will work just fine.

const names = []
names.push('Chris')
names.push('John')

const people = {}

people.chris = {
  name: 'Chris',
}

These two examples show us how objects and arrays can be mutated without affecting the original value assigned to the variable.

What about let?

Most folk tend to believe that let2 replaces var for variable declarations, while this is not entirely false it isn’t true either. Think of let as a way of preventing us from writing bad code, this may sound counterintuitive but it is pretty much the easiest way to explain it.

console.log(foo) // undefined
var foo = 'bar'
console.log(foo) // 'bar'

Now using let…

console.log(foo) // ReferenceError: foo is not defined
let foo = 'bar'
console.log(foo) // This code onwards isn't executed

The second example is the most intriguing because it shows how the JavaScript compiler looks ahead in a stricter context that prevents us from hoisting a variable that isn’t defined.

Pretty freaking cool!

What’s next?

Over time I will be outling further ES6 topics but for now I won’t overwhelm yours and my poor brains.

Thanks for reading!

  1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions ↩

  2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let ↩