ECMAWat?! (Dutch)

A presentation at PFCongres in October 2016 in Utrecht, Netherlands by Jayne Mast

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; });
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 ?

Jayne Mast
@jayne

1 / 90

Vorig jaar kreeg ECMAScript 6 (ook wel ECMAScript 2015, of ES6) de ‘feature complete’ status. Nu, meer dan een jaar later, ondersteunen alle moderne browsers (en NodeJS) ondersteunen nu volledig ES6 en zijn ook al bezig om de volgende iteraties van ECMAScript te implementeren. Maar wat is eigenlijk ECMAScript? Hoe is dit anders dan JavaScript? Wat voor nieuws zit er in ECMAScript 6? En wat brengen de volgende iteraties?