ES6

Variables

var x = 10; // good ol' var
let y = 10; // block scoped
const MY_NUMBER = 10; // can't change it
            

let

function test() {
  var x = 10;
  if (true) {
    let x = 15;
  }
  console.log(x); // 10
}

for (let i = 0; i < 100; i++) {}
console.log(i); // undefined
            

const

const x = 100;
x = 5; // error
            

Desctructing Assignment

var stuff = [10, 20];
var [x, y] = stuff;

console.log(x); // 10
console.log(y); // 20
            

Swapping Vars

var temp = x;
x = y;
y = temp;
              

[x, y] = [y, x];
              

Objects

var a = 5;
var b = 6;
var c = {a, b};

console.log(c.a); // 5
console.log(c.b); // 6

var {x, y} = {x: 10, y: 20};

console.log(x); // 10
console.log(y); // 20
            

Spread Opperator

var x = [2, 3, 4];
var y = [1, ...x, 5] // [1, 2, 3, 4, 5]

var z = [1];
z.push(...x); // [1, 2, 3, 4]
            

Bye Bye apply

var fn = function(a, b, c) {};
var x = [1, 2, 3];

// old way
fn.apply(null, x);

// new way
fn(...x);
            

Paraments, Better arguements

function fn() {
  Array.isArray(arguements); // false
}

function fn(...args) {
  Array.isArray(args); // true
}

function fn(a, b, ...others) {
  // don't need to try to slice arguements any more
}
            

Parameter Defaults

function myFunction(a, b, c) {
  a = a || "default";
  b = b || "bye";
  c = c || "c";
}
              

function myFunction(a="default", b="bye", c="c") {

}
              

Array-like to Array

var divs = document.querySelectorAll("div");
divs.forEach(/*...*/) // error
[].forEach.call(divs, function(){});
              

var divs = document.querySelectorAll("div");
Array.from(divs).forEach(function() {});
              

Better for loops

for...of

var x = ["a", "b", "c"];
for (let n of x) {
  console.log(n);
} // "a", "b", "c"
            

Arrow Function

var add = function(x, y) {
  return x + y
}
              

var add = (x, y) => x + y;
              

Scope

function Thing() {
  this.things = [1, 2, 3];
  /*this.squaredThings = this.things.map(function(x) {
    return this.square(x);
  }.bind(this));*/
  this.squaredThings = this.things.map(x=>this.square(x)); // [1, 4, 9]
}

Thing.prototype.square = function(n) {
  return n * n;
}
            

Strings - the back tick

Multiline and templating

var myString = `this is a
  multiline string
  that just works`;

// basic templating
var name = "Eric";
var greeting = `Hello, ${name}`;

var x = 2;
var y = `There is ${x * 10} of those`;
            

Contains

"hello".indexOf("lo") > -1; // true
              

"hello".contains("lo"); // true
              

Classes!

class AwesomeThing {
  constructor(a) {
    this.a = a;
  }

  method1() {}

  method2() {}
}
            

Inheritance

var Dog = function() {
  Animal.call(this);
};
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constuctor = Dog;
              

class Dog extends Animal {
  constuctor() {
    super();
  }
}