The Future of JavaScript with ES6

Banning the var statement

function loop (array) { for (var index = 0; i < array.length; index++) { /* do stuff */ } console.log(index); // => STILL AVAILABLE??? }

Use let instead

function loop (array) { for (let index = 0; i < array.length; index++) { /* do stuff */ } console.log(index); // Not anymore!!! }

There’s also const

const x = 1; x = 2; // not possible!

const obj = { x: 1 }; obj.x = 2; // possible!

Remember anonymous functions?

[1,2,3,4].map(function(n){ return n * n; });

Hello arrow functions!

[1,2,3,4].map((n) => n * n);

Also default parameters are in town!

function (x, y = 2) { return x + y);

Consider this

Getting the rest

function addPlayersToTeam (team /*, players*/) { var players = arguments.slice(1); for (var i = 0; args.length; i++) { team.addPlayer(args[i]); } }

Thank you rest parameter

function addPlayersToTeam (team, …rest) { rest.forEach((player) => team.addPlayer(player)); }

Destructing your object

var {a, c} = {a: 1, b: 2, c: 3}

console.log(a); // logs 1

Destructing arrays

var foo = [“one”, “two”, “three" ] var one = foo[0]; var [one, two] = foo;

Easier Recursive

function sum ([x, …rest]) { if (x) return x + sum(rest); else return 0;

}

console.log(sum([1,2,3]));

Fetch me some data!

fetch(‘/some/url’) .then(function(response){ return response.json(); }) .then(function(json) {

// something with json }).catch(function(err) {

// error :( });

Fetch me some data!

fetch(‘/some/url’) .then( (response) => response.json() ) .then( (json) => doStuff(json) ) .catch( (error) => handleError(error) );

Template my string

var a = 5; var b = 10; console.log(`Fifteen is ${a+b} and not ${2*a + b}`);

Template my stringvar user = { … }; var html = ` <div> <span>${user.username}</span>

</div> `

Enhanced Object Literals

var obj = { __proto__: protoObj, handler

}

Enhanced Object Literals

var obj = { toString () { return super.toString(); }, [‘prop_’+key()]: key()

}

How to use ES6 NOW