ECMAScript

An introduction

Paul Verbeek

• Only Dutch client-side developer
• BookingHome Partner Experience
• Started two weeks ago
• Now expects a party in the RAI every other week
• Worked with ES6 at previous job (Randstad)

Data proves (...) cats (..)

- Eduardo Shiota

ECMAScript Harmony

ECMAScript 6

ECMAScript 2015

ECMAScript?

ECMA-262

ECMA-402

Dart Programming Language

ECMA-222

Adaptive Lossless Data Compression Algorithm 

ECMA-74

Measurement of Airborne Noise Emitted by Information Technology and Telecommunications Equipment

ECMA-262

ECMAScript® Language Specification

ActionScript

Adobe ExtendScript

JScript

JScript.NET

V8

SpiderMonkey Chakra

JavaScript

ECMA-262 6th edition

The ECMAScript® 2015 Language Specification

ES6

ECMAScript 5.1

• strict mode ("use strict")

• JSON

• String.trim()

• getters & setters

• Function.prototype.bind()

• New Object methods (e.g. Object.create())

• New Array methods (e.g. Array.map())

• Date.now()

ECMAScript 5.1

ECMAScript 6

ECMAScript 6

• Arrow functions

• Binary and Octal Literals

• Block-scoped variables

• Classes

• Comprehension

• Default + rest + spread parameters

• Destructuring

• Iterators

• Generators

• Map + Set + WeakMap + WeakSet

ECMAScript 6

• Math + Number + String + Object APIs

• Modules

• Promises

• Proxies

• Reflect API

• Subclassable Built-ins

• Symbols

• Tail Calls

• Template strings

• Unicode

ECMAScript 6

• Arrow functions

• Block-scoped variables

• Classes

• Default, rest & spread parameters

• Destructuring

• Modules

• Template strings

Block-scoped variables

function logPaul() {

  if (true) {
    var name = 'Paul Verbeek';
  }

  console.log(name);
}

logPaul();

Function-scoped variables

Block-scoped variables

function logPaul() {

  if (true) {
    let name = 'Paul Verbeek';
  }

  console.log(name); // name is not defined
}

logDan();

Block-scoped variables

function logConstantPaul() {
  const PAUL = 'Paul Verbeek';
  PAUL = 'Paul Simon'; 
    // 'PAUL' is read-only

  console.log(PAUL);
}

logConstantPaul();

Block-scoped variables

function logConstantPaul() {
  const PAUL = {
    firstName: 'Paul',
    lastName: 'McCartney'
  };

  PAUL.lastName = 'Verbeek';

  console.log(PAUL.lastName); // Verbeek
}

logConstantPaul();

Block-scoped variables

function logConstantPaul() {
  const PAUL = {
    firstName: 'Paul',
    lastName: 'Verbeek'
  };

  PAUL = {};
  // 'PAUL' is read-only

  console.log(PAUL.lastName); // Verbeek
}

logConstantPaul();

Temporal Dead Zone (TDZ)

Temporal Dead Zone (TDZ)

console.log(typeof foo); // ReferenceError
console.log(typeof bar); // 'undefined'

let foo = 'inner scope';

Temporal Dead Zone (TDZ)

let foo = 'outer scope';

(function() {
    console.log(typeof foo); // ReferenceError
    console.log(typeof bar); // 'undefined'

    let foo = 'inner scope';
}());

Destructuring

Constructing

Extracting

vs.

Constructing

Extracting

vs.

// Single values
let name = {};
name.first = 'Paul';
name.last = 'Verbeek';

// Multiple values
let name = {
 first: 'Paul',
 last: 'Verbeek'
};

// Single values
let first = name.first;
let last = name.last;


// Multiple values
let { first, last } = name;

let name = {
 first: 'Paul',
 last: 'Verbeek'
};


let { first: firstName, last: lastName } = name;

// firstName = 'Paul'
// lastName = 'Verbeek'

Objects

let nameArr = ['Paul', 'Verbeek'];

let [firstName, lastName] = nameArr;
 // firstName = 'Paul', lastName = 'Verbeek'

Arrays

Modules

// modules/math.js

const π = 3.14159265359;

// modules/foo.js
export default function() {
  console.log('bar!');
}

// script.js
import fooFunc from './modules/foo.js';

fooFunc(); // bar!

Arrow functions

(λ expressions)

1. Less typing

let arr = [1, 2, 3];
let square;

// ES5
square = arr.map(function (a) { return a * a });

// SS6
square = arr.map(a => a * a);

// ES5
function Interface() {
  var that = this;
  var button = document.getElementById('myButton');

  button.addEventListener('click', function () {
    console.log('CLICK');
    that.handleClick();
  });
}

Interface.prototype.handleClick = function () { ... };

2. no more 'var that = this'

Template strings

console.log('In ECMAScript 5.1 this
 will result in an error.');  
// Uncaught SyntaxError: Unexpected token ILLEGAL

A what?

A backtick

or accent grave

var location = 'Tech Talks',
    topic = 'ES6';

console.log('Talking about ' + topic + ' at ' + location); 
// Talking about ES6 at Tech Talks

Classes

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.fullName = function () {
  return this.firstName + ' ' + this.lastName;
};
Person.prototype.toString = function () {
  return 'My name is ' + this.fullName();
};

var me = new Person('Paul', 'Verbeek');

console.log(me.toString()); 
  // My name is Paul Verbeek

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName () {
    return `${this.firstName} ${this.lastName}`;
  }

  toString () {
    console.log(`My name is ${this.fullName}`);
  }
}

let me = new Person('Paul', 'Verbeek');

console.log(me.toString()); 
  // My name is Paul Verbeek

class Person {
  ...  
}

class Employee extends Person {
  constructor(firstName, lastName, company) {
    super(firstName, lastName);
    this.company = company;
  }

  toString () {
    return `${super.toString()}
            and I work at ${this.company}`;
  }
}

let me = new Employee('Paul', 'Verbeek', 'Booking.com');

console.log(me.toString());
  // My name is Paul Verbeek
  // and I work at Booking.com

Default, rest & spread parameters

multiply(3); // 6
multiply(3, 3); // 9

default

function f(...foo) {
  console.log(foo); // [4, 8, 15]


}

f(4, 8, 15);

...spread & ...rest

function logPaul() {

  if (true) {
    let name = 'Paul Verbeek';
  }

  console.log(name); // name is not defined
}

logPaul();

'use strict';

function logPaul() {

  if (true) {
    var _name = 'Paul Verbeek';
  }

  console.log(name); // name is not defined
}

logPaul();

function f(...foo) {
  


  

  let numbers = [...foo, 16, 23, 42]

  console.log(numbers); // [4, 8, 15, 16, 23, 42]
}

f(4, 8, 15);

"use strict";

function f() {
  for (var _len = arguments.length, foo = Array(_len), 
       _key = 0; _key < _len; _key++) {
    foo[_key] = arguments[_key];
  }

  var numbers = [].concat(foo, [16, 23, 42]);

  console.log(numbers); // [4, 8, 15, 16, 23, 42]
}

f(4, 8, 15);

ECMAScript 6

ECMAScript 2015

ECMAScript Harmony

ECMA-262 6th edition

The ECMAScript® 2015 Language Specification

• Binary and Octal Literals

• Comprehension

• Iterators

• Generators

• Map + Set + WeakMap + WeakSet

• Math + Number + String + Object APIs

• Promises

• Proxies

• Reflect API

• Subclassable Built-ins

• Symbols

• Tail Calls

• Unicode

1. Easier to write
2. Easier to maintain
3. Faster code execution (eventually)

How are we going to use this at Booking.com?

¯\_(ツ)_/¯