ECMAWat?! (Dutch)

ECMAWat?!

Paul Verbeek

workingatbooking.com

nlhtml5.org

ECMAScript

ECMAScript ?

"ECMAScript was always an unwanted trade name that sounds like a skin disease. https://mail.mozilla.org/pipermail/es-discuss/2006-October/000133.html Brendan Eich, uitvinder van JavaScript

ECMA-262

ECMA-420 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

V8 SpiderMonkey Chakra

JavaScript

ECMA-262 6th edition The ECMAScript® 2015
Language Specification

ES6

• Arrow functions • Binary and Octal Literals • Block-scoped variables (let / const) • Classes • Default + rest + spread parameters • Destructuring • Enhanced object literals • Generators • Iterators + for..of • Map + Set + WeakMap + WeakSet ES6

• new Math, Number, String, Array, Object APIs • Modules • Promises • Proxies • Reflect API • Subclassable Built-ins • Symbols • Ta i l C a l l s • Template strings • Unicode (full support) ES6

ES2016

• Array.prototype.includes • Exponentiation Operator ES2016

Block-scoped variables

function logPaul() { 
 
 if (true) { 


var name = 'Paul Verbeek'; 
 } 
 
 console.log(name); // Paul Verbeek 
 } 
 
 logPaul();

function logPaul() { 


var name = undefined; 
 
 if (true) { 
 name = 'Paul Verbeek'; 
 } 
 
 console.log(name); // Paul Verbeek } 
 
 logPaul();

function logPaul() { 
 
 if (true) { 


let name = 'Paul Verbeek'; 
 } 
 
 console.log(name); // name is not defined 
 } 
 
 logPaul();

function logAllThePauls() { 


var pauls = ['Paul Verbeek', 
 'Paul McCartney', 
 'Paul Simon’]; 
 
 


for ( var i = 0; i < pauls.length; i++) { 
 console.log(pauls[i]); 
 } 
 
 console.log(i); // 3 
 } 
 logAllThePauls();

function logAllThePauls() { 


let pauls = ['Paul Verbeek', 
 'Paul McCartney', 
 'Paul Simon’]; 
 
 


for ( let i = 0; i < pauls.length; i++) { 
 console.log(pauls[i]); 
 } 
 
 console.log(i); // i is not defined 
 } 
 logAllThePauls();

var globalVar = 'global variable'; 
 let globalLet = 'also global'; 
 
 function f() { 


var functionVar = 'function-scoped'; 


let functionLet = 'this one too'; 
 } 
 
 f();

function logPaul() { 


let name = 'Paul Verbeek'; 


let name = 'Paul McCartney'; 


// Identifier 'name' has already been declared 
 
 console.log(name); 
 } 
 
 logPaul();

function logConstantPaul() { 


const paul = 'Paul Verbeek’; paul = 'Paul Simon'; 


// 'paul' is read-only 
 
 console.log(paul); 
 } 
 
 logConstantPaul();

function logConstantPaul() { 


const paul = { 
 firstName: 'Paul', 
 lastName: 'McCartney' 
 }; 
 
 paul = 'Verbeek'; 
 
 console.log(paul.lastName); // Verbeek 
 } 
 
 logConstantPaul();

function logConstantPaul() { 


const paul = { 
 firstName: 'Paul', 
 lastName: 'McCartney' 
 }; 
 
 paul = {}; 


// 'paul' is read-only 
 } 
 
 logConstantPaul();

Temporal Dead Zone (TDZ) TEMPORAL

console.log(typeof foo); // ReferenceError 
 console.log(typeof bar); // 'undefined' 
 
 let foo = 'inner scope’; var bar = 'inner scope’;

let foo = 'outer scope'; 
 
 ( function () { 
 console.log(typeof foo); // ReferenceError 
 


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

const? let? var? Gebruik altijd const , behalve als je variabele moet kunnen veranderen. Gebruik anders let .

Block-scoped variables

Template strings

console.log('In ECMAScript 5.1 is 
 dit een error.’); 
 // Uncaught SyntaxError: Unexpected token ILLEGAL console.log(In ES6 zal dit 
 een nieuwe regel geven.); 
 // In ES6 zal dit 
 // een nieuwe regel geven.

Een wat?

Een backtick of accent grave Dus: ` in plaats van: '

var location = 'PFCongres', 
 topic = 'ES6'; 
 
 console.log('Bij ' + location + ' over ' + topic + ' aan het praten'); 
 // Bij PFCongres over ES6 aan het praten const location = 'PFCongres', 
 topic = 'ES6'; 
 
 console.log(Bij ${location} over ${topic} aan het praten); 
 // Bij PFCongres over ES6 aan het praten

Template strings

Enhanced object literals

function getPerson(firstName, lastName, age) { 


return { 
 name: ${firstName} ${lastName} 
 }; 
 } 
 
 
 const me = getPerson('Paul', 'Verbeek', 29); 
 
 console.log(me); 
 // {"name":"Paul Verbeek"}

function getPerson(firstName, lastName, age) { 


return { 
 name: ${firstName} ${lastName}, 
 age: age 
 }; 
 } 
 
 
 const me = getPerson('Paul', 'Verbeek', 29); 
 
 console.log(me); 
 // {"name":"Paul Verbeek","age":29}

function getPerson(firstName, lastName, age) { 


return { 
 name: ${firstName} ${lastName}, 
 age 
 }; 
 } 
 
 
 const me = getPerson('Paul', 'Verbeek', 29); 
 
 console.log(me); 
 // {"name":"Paul Verbeek","age":29}

function getPerson(firstName, lastName, age) { 


const name = ${firstName} ${lastName}; 


return { name, age }; 
 } 
 
 
 const me = getPerson('Paul', 'Verbeek', 29); 
 
 console.log(me); 
 // {"name":"Paul Verbeek","age":29}

function getPerson(firstName, lastName, age) {

return { 
 name: ${firstName} ${lastName}, 
 age, makeOlder: function () {

this .age++; } 
 }; 
 } 
 
 
 const me = getPerson('Paul', 'Verbeek', 29); 
 me.makeOlder(); 
 console.log(me); 
 // {"name":"Paul Verbeek","age":30}

function getPerson(firstName, lastName, age) {

return { 
 name: ${firstName} ${lastName}, 
 age, makeOlder() {

this .age++; } 
 }; 
 } 
 
 
 const me = getPerson('Paul', 'Verbeek', 29); 
 me.makeOlder(); 
 console.log(me); 
 // {"name":"Paul Verbeek","age":30}

function getPerson(firstName, lastName, age) { 


return { 
 name: ${firstName} ${lastName}, 
 age, makeOlder() {

this .age++; },


 }; 
 } 
 
 
 const me = getPerson('Paul', 'Verbeek', 29); 
 me.makeOlder(); 
 console.log(me); 
 // {"name":"Paul Verbeek","age":30}

function getPerson(firstName, lastName, age) { 


return { 
 name: firstName + ' ' + lastName, 
 age, 
 
 makeOlder() { 
 this.age++; 
 }, 
 ['is' + firstName]: true 
 }; 
 } 
 
 
 const me = getPerson('Paul', 'Verbeek', 30); 
 
 console.log(me.isPaul); // true

Enhanced object literals

Arrow functions ( λ expressions)

// ES5.1 
 setTimeout( function () { 
 console.log('foo'); 
 }, 100); 
 var square = function (x) { return x * x; }; // ES6 
 setTimeout(() => { 
 console.log('foo'); 
 }, 100); 
 
 const square = x => x * x;

const arr = [1, 2, 3]; 
 let square; 
 
 // ES5.1 
 square = arr.map( function (a) { return a * a; });

1. Minder typen // ES6 
 square = arr.map(a => a * a);

// ES5.1 
 function Interface() { 


var that = this ; 


var button = document.getElementById('myButton'); 
 
 button.addEventListener('click', function () { 
 console.log('CLICK'); 
 that.handleClick(); 
 }); 
 } 
 
 Interface.prototype.handleClick = function () { ... }; 2. Niet meer ' var that=this '

// ES6 
 function Interface() { 


const button = document.getElementById('myButton'); 
 button.addEventListener('click', () => { 
 console.log('CLICK'); 


this .handleClick(); 
 }); 
 } 
 
 Interface.prototype.handleClick = function () { ... }; 2. Niet meer ' var that=this '

Arrow functions ( λ expressions)

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 'Mijn naam is ' + this .fullName(); 
 }; 
 
 var me = new Person('Paul', 'Verbeek'); 
 
 console.log(me.toString()); 
 // Mijn naam is Paul Verbeek

class Person { 


constructor (firstName, lastName) { 


this .firstName = firstName; 


this .lastName = lastName; 
 } 
 


get fullName () { 


return ${ this .firstName} ${ this .lastName}; 
 } 
 
 toString () { 
 console.log(Mijn naan is ${ this .fullName}); 
 } 
 } 
 
 const me = new Person('Paul', 'Verbeek'); 
 
 console.log(me.toString()); 
 // Mijn naam is Paul Verbeek

class Person { 
 ... 
 } 
 
 class Employee extends Person { 


constructor (firstName, lastName, company) { 


super (firstName, lastName); 


this .company = company; 
 } 
 
 toString () { 


return ${ super .toString()} 
 en ik werk bij ${ this .company}; 
 } 
 } 
 
 const me = new Employee('Paul', 'Verbeek', 'Booking.com'); 
 
 console.log(me.toString()); 
 // Mijn naan is Paul Verbeek 
 // en ik werk bij Booking.com

Classes

Default, rest and spread

multiply(3); // 6 
 multiply(3, 3); // 9 function multiply(x, y) { 
 if (typeof y === "undefined") { y = 2; } 
 


return x * y; 
 }

multiply(3); // 6 
 multiply(3, 3); // 9 function multiply(x, y = 2) { 
 
 


return x * y; 
 }

addOne(3, 7, 14); // [4, 8, 15] function addOne() { 


var numbers = Array.prototype.slice.call(arguments); 


return numbers.map(function (number) { 
 return number + 1; 
 }); 
 }

addOne(3, 7, 14); // [4, 8, 15] function addOne(...numbers) { 


return numbers.map(number => number + 1); 
 }

add(6, 3, 7, 14); // [9, 13, 20] function add(addition, ...numbers) { 


return numbers.map(number => number + addition); 
 }

function myFunction(x, y, z) { 
 return x + y + z; 
 } 
 
 var args = [16, 23, 42]; 
 myFunction.apply(null, args); // 81 myFunction(...args); // 81

var middleNumbers = [15, 16]; 
 var allNumbers = [4, 8, middleNumbers, 23, 42]; // [4, 8, [15, 16], 23, 42] var allNumbers = [4, 8].concat(middleNumbers, [23, 42]); const allNumbers = [4, 8, ...middleNumbers, 23, 42]; // [4, 8, 15, 16, 23, 42]

Default, rest and spread

https://ponyfoo.com/ http://www.2ality.com/

ECMA-262 6th edition The ECMAScript® 2015
Language Specification

Waar ik het niet over heb gehad • Binary and Octal Literals • Destructuring • Generators • Iterators + for..of • Map + Set + WeakMap + WeakSet • Modules • new Math, Number, String, Array, Object APIs • Promises • Proxies • Reflect API • Subclassable Built-ins • Symbols • Ta i l C a l l s • Unicode (full support)

ECMA-262 7th edition The ECMAScript® 2016
Language Specification

ES2016

x ** y exponentiation operator (**) Math.pow(x, y); let a = 3; 
 a **= 3; 
 // a = 27

['a', 'b', 'c'].indexOf('a') >= 0; // true ['a', 'b', 'c'].indexOf('d') >= 0; // false Array.prototype.includes ['a', 'b', 'c'].includes('a'); // true 
 ['a', 'b', 'c'].includes('d'); // false ['a', 'b', NaN].includes(NaN); // true ['a', 'b', NaN].indexOf(NaN) >= 0; // false [ , , ].includes(undefined); // true [ , , ].indexOf(undefined) >= 0; // false

ES2017

• Object.values/Object.entries
• String padding • Object.getOwnPropertyDescriptors • Trailing commas in function parameter lists and calls • Async Functions ES2017

https://github.com/tc39/ecma262/

https://tc39.github.io/ecma262/

http://kangax.github.io/compat-table/esnext/

workingatbooking.com

@_paulverbeek @nlhtml5 verbeek.p@gmail.com 4815162342

Vr a g e n ?