Warum ES6 die Welt ein Stückchen besser macht

Karin Jung / pixelio.de

WHO AM I?

• Sebastian Springer

• aus München

• arbeite bei Mayflower

• https://github.com/sspringer82

• @basti_springer

• Consultant, Trainer, Autor

ECMA-262 Spezifikation und ISO/IEC 16262. Ursprünglich 1995 als Mocha, LiveScript und schließlich JavaScript von

Brendan Eich bei Netscape (in 10 Tagen) entwickelt.

Paul-Georg Meister / pixelio.de

So viel zur Geschichte

ECMAScript 5

• Object-Erweiterungen (defineProperty)

• Array-Erweiterungen (map, reduce)

• JSON

• Strict mode

Die größten Änderungen von ES5 waren die Erweiterung von Objekten und die Einführung des Strict Modes und

JSON. Ansonsten handelt es sich eher um kleinere Anpassungen und

Erweiterungen.

ECMAScript 5 wird mittlerweile von allen gängigen Browsern unterstützt.

ECMAScript 6

Jewgenia Stasiok / pixelio.de

Compat Table

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

Frage:

S. Hofschlaeger / pixelio.de

Kann ich das jetzt schon verwenden?

Petra Bork / pixelio.de

Traceur$ git clone https://github.com/google/traceur-compiler.git$ cd traceur-compiler$ npm install$ make

src/bootstrap.jsbin/traceur.js

<script src=“app.js” type=“module”></script>

Da ECMAScript 6 noch recht schlecht unterstützt wird, muss man sich anderweitig behelfen.

Die Browser entwickeln sich rasant weiter und da macht es wenig Sinn anhand der Browserversion Features zu

aktivieren. Die Tendenz geht hin zu Featuredetection und dem Einsatz von Polyfills.

Der Kern von ECMAScript 6

FotoHiero / pixelio.de

Kleine Helferoder: Was wir uns schon immer gewünscht haben

Gila Hanssen / pixelio.de

String

• String.prototype.repeat

• String.prototype.startsWith/endsWith

• String.prototype.contains

Array

• Array.prototype.find

• Array.prototype.fill

• Array.prototype.keys/entries => Array Iterator

Neue FeaturesDie wirklich bewegenden Dinge

Alexandra H. / pixelio.de

Default Parameters

TypeError: Cannot read property 'length' of undefined

function add(input) { console.log(input.length);}

add();

function add(input) { input = input || ''; console.log(input.length);}

add();

function add(input = ‘’) {

console.log(input.length);

}

add();

Default Parameters• Können überall stehen

• Default wird benutzt, wenn undefined übergeben wird

• Beliebige Werte (Primäre Datentypen, Objekte, Arrays, Funktionen)

• arguments bleibt unverändert

• Zur Laufzeit ausgewertet

• Zugriff von späteren Defaults auf frühere

• Kein Zugriff auf Funktionen, die in der Funktion definiert sind

Class

Gerhard Prantl / pixelio.de

Das Objektmodell von JavaScript basiert auf Prototypen. Das war bis jetzt immer so und das wird auch so bleiben.

function User(name) { this.name = name;}

User.prototype.getName = function() { return this.name;}

var klaus = new User(‘Klaus’);

class User extends Person { constructor(name, pw) { super(name); this.pw = pw; }

getPw() { return this.pw; }}

var klaus = new User(‘Klaus’, ‘secret’);

Class

• Einfache Art der Vererbung

• Zugriff über super auf die Elternklasse

• Maskierung des Prototyps

Block Scope

lichtkunst.73 / pixelio.de

function doSomething() { var a; for (var i = 0; i < a.length; i++) { … }}

ai

function doSomething() { var a; for (let i = 0; i < a.length; i++) { … }}

ai

Block Scope• Neues Schlüsselwort let

• Variable ist nur in einem bestimmten Block gültig

• Bessere Kontrolle über Variablen innerhalb einer Funktion

• var und let nicht zu sehr mischen -> unübersichtlich

• Hoisting gilt innerhalb eines Blocks

Fat Arrow Functions

Dieter Schütz / pixelio.de

var myObj = { clicked: false, init: function() { $(‘#mydiv’).on(‘click’, function() { this.clicked = true; }); }} this?

Fat Arrow Functions

(args) => { … return result;}

Fat Arrow

Fat Arrow Functionsvar myObj = { clicked: false, init: function() { document.addEventListener('click', () => { this.clicked = true; }); }};

myObj.init();

Fat Arrow Functions

• Sind an den Kontext ihrer Erstellung gebunden

• Können nicht mit dem new-Operator benutzt werden

• This kann nicht geändert werden (bind, call, apply)

Map/Set

w.r.wagner / pixelio.de

Maps

Key-Value-Store in JavaScript. Alle möglichen Datentypen als Schlüssel und Werte. Iterierbar.

Maps

size: Anzahl der Key-Value-Paare clear(): Leert die komplette Map. delete(key): Löscht ein Element. get(key): Liest ein Element aus. has(key): Prüft, ob der Schlüssel vorhanden ist. set(key, value): Setzt ein neues Key-Value-Paar.

Mapsvar map = new Map();

var nr = 1;var arr = [1,2,3];var func = function() {}var obj = {name: 'Klaus'};

map.set(nr, 'number');map.set(arr, 'array');map.set(func, 'function');map.set(obj, 'object');

Maps

for (var [key, val] of map) { console.log(key, val);}

Sets

Sets speichern eindeutige Werte in einer Datenstruktur. Möglichkeit zur Prüfung auf Vorhandensein. Auch iterierbar.

Sets

size: Anzahl der Elemente clear(): Leert das Set. add(value): Fügt einen neuen Wert hinzu. delete(value): Entfernt einen Wert. has(value): Prüft, ob der Wert im Set vorhanden ist.

Sets

var mySet = new Set();

mySet.add('Hello');mySet.add({name: 'World'});mySet.add(function() {});

Sets

for (var el of mySet) { console.log(el);}

Generators

Gerhard Frassa / pixelio.de

Generators

Ein Generator ist eine fist-class coroutine, die einen angehaltenen Ausführungskontext repräsentiert.

Generators

var gFunction = function*() { yield ‘Hello’; yield ‘World’;}

Generatorsvar generator = gFunction();

var value = generator.next();

{ value: ‘Hello’, done: false}

Generator Inputvar gFunction = function*() { var i i = yield 'first'; i = yield 'second' + i; yield 'third' + i;}

var g = gFunction();

console.log(g.next());console.log(g.next(1));console.log(g.next(2));

Generators

for (let i of generator) { console.log(i);}

Destructuring

Rahel Szielis / pixelio.de

Destructuring

Zuweisung von mehreren Elementen eines Arrays oder Objekts an Variablen in einer einzigen Operation.

Destructuring

var first = myArr[0];var second = myArr[1];var third = myArr[2];

var [first, second, third] = myArr;

Destructuring

• Auslassen von Elementen: var [,,bar] = [1,2,3];

• Multidimensionale Arrays: var [a, [b, c]] = [1, [2,3]]

Destructuring

var {foo, bar} = {foo: ‘a’, bar: ‘b’};

var {foo: a, bar: b} = {foo: ‘a’, bar: ‘b’};

Modulsystem

Marlies Schwarzin / pixelio.de

Modulsysteme in JavaScript

Es gibt zwei große Modulsysteme: AMD und CommonJS. Sie laden Script-Dateien und modularisieren die Applikation.

– Google

Modules are not ready to use yet in Traceur, but they are partially

implemented.

ES6 Modulsystem

var privateVariable = 'This is a private Value';

export var publicVariable = 'This is a public Value';

export function getPrivateVariable() { return privateVariable;}

ES6 Modulsystem

import {publicVariable, getPrivateVariable} from 'module';

console.log(publicVariable);console.log(getPrivateVariable());

Viele weitere Features• Promises

• Symbols

• Typed Arrays

• WeakSet/WeakMap

• …

Fragen?

Rainer Sturm / pixelio.de

KONTAKT

Sebastian Springer sebastian.springer@mayflower.de

Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland

@basti_springer

https://github.com/sspringer82