Everyday ECMAScript 6

ECMAScript History

Edition	Release Date	Browser Support	a.k.a.
3	Dec. 1999	All	ES3
5	Dec. 2009	IE 9, FF 4, Chrome 7	ES5
6	June 2015	Not supported yet	ES2015

Use next generation JavaScript, today.

ES2015 features to use today

let declarations
template strings
object methods
fat arrow functions
destructuring

Let


// var: function scoping, variables are hoisted
var array = [];
console.log(i); // prints undefined
for (var i = 0; i < 10; i++) {
  array.push(Math.random());
}
console.log(i);  // prints 10


// let: block scoping, no hoisting
let array = [];
console.log(i);  // ReferenceError
for (let i = 0; i < 10; i++) {
  array.push(Math.random());
}
console.log(i);  // ReferenceError

Template Strings


var pageNumber = "( " + getCount() + " / " + pageTotal + " )";


let pageNumber = `( ${getCount()} / ${pageTotal} )`;

Methods


var Duck = Backbone.Model.extend({
  name: function name() {
    return "duck";
  },
  sound: function sound() {
    return "quack";
  }
});


let Duck = Backbone.Model.extend({
  name() {
    return "duck";
  },
  sound() {
    return "quack";
  }
});

Fat Arrows


promise.then(function (data) {
  return data.response;
}).display();


promise.then(data => data.response).display();

Fat Arrows & this


var self = this;
var getValue = function () {
  return self.value;
});


let getValue = () => this.value;

Destructuring Arrays


var numbers = [1, 4, 2, 3];
var x = numbers[0];
var y = numbers[1];
var z = numbers[2];


let numbers = [1, 4, 2, 3];
let [x, y, z] = numbers;

Destructuring Objects


var emoji = {category: "people", char: "😁", name: "smile"};
var char = emoji.char;
var name = emoji.name;
var category = emoji.category;


let emoji = {category: "people", char: "😁", name: "smile"};
let {name, category, char} = emoji;

Go Forth and Babel

Try it out: http://babeljs.io/repl

http://trey.in/everyday-es6-demo

Final

http://treyhunner.com/everday-es6

Web consultant available for hire
http://truthful.technology