JavaScript 6 - ECMASCript 6 - ES 2015

Variables and Parameters

Let

The new let keyword allows you to define block-scoped variables in JavaScript(As opposed to function scoped variables that we have had so far in JavaScript). let is not only useful for its block scope but it also solves the hoisting problem inherent to var.

The destructuring assignment syntax also allows you to define different variables names than the original property names:

// This is interesting, the syntax used is the opposite// to what we are accustomed to when using object literals// the first part 'race' is the property we want to destructure// in the original object whiles the second part 'cucumber'// is the name of the new variablevar{ race:{ cucumber },
charClass:{ orange }}={ race:'human',
charClass:'barbarian',
origin:'summeria'};
console.log(cucumber);// => 'human'
console.log(organe);// => 'barbarian'

And if you need to go deeper within an object structure you can very well do it:

Template literals

// what we use to do like thisfunctionsayHi(firstName, lastName){ console.log("Hi my friend "+ firstName +" "+ lastName);}// no we can do like thisfunctionsayHi(fisrtName, lastName){ console.log(`Hi my friend ${firstName}${lastName}`);}// Note that the template literal uses backtick `` instead of quotes

The different variables to inject in a template are evaluated in the scope where the template literal is declared. Additionally we are not limited to using variables but can also use any valid expression.

The templating engine also allows to define custom formatting functions known as tags filters that can be applied to the template literals to customize the formatting process:

// example from MDNvar a =5, b =10;// where strings are the different parts of the template literal// and values are the variables been injected in the templatefunctiontag(strings,...values){
console.log(strings[0]);// "Hello "
console.log(strings[1]);// " world "
console.log(values[0]);// 15
console.log(values[1]);// 50return"Bazinga!";}
tag `Hello ${ a + b } world ${ a * b}`;// "Bazinga!"

Classes

Functional JavaScript

Built-in objects

Asynchronous Programming in ES2015

ES2015 Objects

ES2015 Modules

How to Start Writing ES2015 Today

Traceur

You can use traceur at plunkr by adding a reference to traceur.js, the traceur bootstrapper and including script tags with the type="module".

Playground

TDDBin supports ES6 and allows you to play with code using a TDD approach.

Would you like to receive more articles like this one on programming, web development, JavaScript, Angular, developer productivity, tools, UX and even exclusive content like free versions of my books in your mailbox? Then sign up to my super duper awesome inner circle.

Did Ya Know I've Written Some Books?

I have! The JavaScript-mancy series is the lovechild of three of my passions: JavaScript, writing and Fantasy. In the pages of each one of the books of the series you’ll find a breadth of JavaScript knowledge, delivered with a humorous and casual style of writing and sprinkled with Fantasy at every turn.

They are the weirdest and quirkiest JavaScript books you'll ever find. There's nothing out there quite like it.