ECMAScript 2015

Why?

http://www.ecma-international.org/ecma-262/6.0/

Influences

  • Arrow functions: CoffeeScript
  • const: The name comes from C++ (the latest C standard borrowed it from C++), but it behaves more like Java’s final.
  • let: Became popular via BASIC. Used as immutable binding in Lisp.
  • Template literals: E (quasi literals)
  • Destructuring: Lisp (destructuring bind)
  • Modules: CommonJS, AMD
  • Promises: old construct from concurrent programming languages

Reference:

http://www.2ality.com/2015/10/es6-influences.html

How?

  • Rely on browser implementation
  • Use a transpiler, like Babel (recommended)

Arrow functions #1

const doubled = [1, 2, 3].map((number) => {
  return number * 2;
});

// Can be shortened to:
const doubled = [1, 2, 3].map((number) => return number * 2);

// Can be further shortened to:
const doubled = [1, 2, 3].map((number) => number * 2);

// Can be further shortened to:
const doubled = [1, 2, 3].map(number => number * 2);

// => [2, 4, 6]

Arrow functions #2

// Using anonymous function
function ClickCounter(element) {
  this.clicks = 0;

  // Store scope for later
  var self = this;

  element.addEventListener('click', function () {
    ++self.clicks;
  });
}

// Using arrow function
function ClickCounter(element) {
  this.clicks = 0;

  // Arrow function with lexical scope
  element.addEventListener('click', () => ++this.clicks);
}

Classes #1

class ClickCounter {
  constructor(element) {
    this.clicks = 0;
    element.addEventListener('click', this.increment.bind(this));
  }
  increment() {
    ++this.clicks;
  }
}

Classes #2

class Animal {
  constructor(type) {
    this.type = type;
  }
}

class Dog extends Animal {
  constructor(type, warmBlooded) {
    super(type);
    this.warmBlooded = warmBlooded;
  }
}

Const and let #1

// Single assignment
const theAnswerToEverything = 42;

theAnswerToEverything = 41;
// => Error

const anotherAnswerToEverything;
// => Error

const and let #2

let x = 0;

function outer() {
  // New variable
  let x = 1;

  function inner() {
    // Also a new variable
    let x = 2;
  }
}

Enhanced object literals

const suchWow = 'doge';
const propertyName = 'amaze';

const myAmazingObject = {
  suchWow,          // Assignment shorthand
  getAmaze() {      // Methods
    return 'wow';
  },
  [propertyName]: 0 // Computed property name
};

// Previously:
var myAmazingObject = {
  suchWow: suchWow,
  getAmaze: function () {
    return 'wow';
  }
};

myAmazingObject[propertyName] = 0;

Template strings

const name = 'Dave';
const question = `What are you doing, ${name}?`;

// => What are you doing, Dave?

Destructuring #1

const settings = {
  dimensions: {
    width: 640,
    height: 480
  },
  bpp: 32
};

// Extract object properties into different variables
const { dimensions, bpp } = settings;

Destructuring #2

function createArray() {
  return [1, 2, 3];
}

let a, b, c;

[a, b, c] = createArray();

// => [1, 2, 3];

Default parameters

function greet(greeting = 'Hello', name = 'Clarice') {
  return `${greeting}, ${name}`;
}

// => "Hello, Clarice"

REst

function getNumberOfArguments(...args) {
  return args.length;
}

getNumberOfArguments(5, true, 10, [1, 2, 3], false);

// => 5;

Spread

const goodGuys = ['Yoda', 'Luke Skywalker', 'Han Solo'];
const badGuys = ['Darth Vader', 'Kylo Ren', 'Boba Fett'];
const everyone = ['Padme', ...goodGuys, 'Count Dooku', ...badGuys];

// => ['Padme', 'Yoda', 'Luke Skywalker', 'Han Solo', 
//     'Count Dooku', 'Darth Vader', 'Kylo Ren', 'Boba Fett']

Modules

// my-lib.js
export function add(x, y) {
  return x + y;
}

export const pi = 3.14159265359;

export default function noop() {};

// app.js
import noop, { add, pi } from './my-lib';

Further reading

Lab

https://github.com/domenic/count-to-6

Made with Slides.com