Intro to ES2015

Resources

• https://github.com/ericdouglas/ES6-Learning
• https://babeljs.io/docs/learn-es2015/
• https://babeljs.io/repl/
• http://www.es6fiddle.net/
• http://jsrocks.org/
• https://kangax.github.io/compat-table/es6/

Arrow Functions

var square = x => x * x;

square(2); // 4


var add = (a, b) => a + b;

add(10, 5); // 5


var pi = () => 3.1415;

pi(); // 3.1415


var rand = limit => {
    return Math.floor(Math.random() * limit);
}

• Shares the context (this) of it's parent

Spread

function add(...numbers) {
  let sum = 0;
  for(let number of numbers) {
    sum += number;
  }
  return number;
}

add(1, 2, 3, 4);

Block scoping

const PI = 3.14;
{
  let x = 0;
}

console.log(PI);
console.log(x);

• MDN let
• MDN const

Classes

class Logger {

  constructor(namespace = "") {
    this._namespace = namespace;
  }

  static staticMsg() {
    console.log('Can be called without an instance');
  }

  get namespace() {
    return this._namespace;
  }

  set namespace(value) {
    this._namespace = value;
  }

  log(msg) {
    console.log(this.namespace, ':', msg);
  }

}

Not hoisted!

Enhanced Object Literals

var test = 'hello world';

var obj = {

    // Shorthand for ‘test: test’
    test,

    // Methods
    log(msg) {

     console.log(msg);

    },

    // Computed (dynamic) property names
    [ 'foo' + 'bar' ]: 42
};

Classes

var square = x => x * x;

square(2); // 4


var add = (a, b) => a + b;

add(10, 5); // 5


var pi = () => 3.1415;

pi(); // 3.1415


var rand = limit => {
    return Math.floor(Math.random() * limit);
}

Template Strings

var foo = 'world';

console.log(`hello ${foo}`);

Destructuring

var foo = { bar: true, dee: 'test' };


var { dee } = foo; //dee === 'test'


var [x, y, z] = [1, 2, 3]; // x === 1, y === 2, etc.
var [a, ,b] = [1, 0, 1];   // a === 1, b === 1


// Argument destructuring
function hello({ bar = false}) {
   if (bar) {
     console.log('hello world');
   }
}

hello(foo);

Iterables and Iterators

let iterable = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3,
    [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
    console.log(item); // 'a', 'b', 'c'
}