Wo die Neuerungen von ECMAScript 5 recht unspektakulär waren, sind die Features des neuen Sprachstandards umso interessanter. ECMAScript 6 versucht einige Anforderungen zu erfüllen, mit denen man als JavaScript-Entwickler täglich konfrontiert ist. Klassische Beispiele sind hier Promises zum Umgang mit asynchronen Funktionen, ein Module Loader zur Strukturierung der Applikation, Generatoren und Iteratoren oder aber ein neuer Gültigkeitsbereich für Variablen. Aber nicht nur große Änderungen, sondern auch sinnvolle Erweiterungen bestehender Objekte wie String und Array halten mit dem neuen Standard Einzug in den Browser. Problematisch wird die Situation jedoch, wenn man in den Genuss verschiedener Features kommen möchte, die aktuell noch von keinem Browser unterstützt werden. Hier schafft Traceur, der ECMAScript-6-Compiler von Google, Abhilfe.

1. Warum ES6 die Welt ein
Stückchen besser macht
Karin Jung / pixelio.de

2. WHO AM I?
• Sebastian Springer
• aus München
• arbeite bei Mayflower
• https://github.com/sspringer82
• @basti_springer
• Consultant, Trainer, Autor

3. 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.

4. So viel zur Geschichte
Paul-Georg Meister / pixelio.de

5. ECMAScript 5

6. • Object-Erweiterungen (defineProperty)
• Array-Erweiterungen (map, reduce)
• JSON
• Strict mode

7. 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.

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

9. ECMAScript 6
Jewgenia Stasiok / pixelio.de

10. Compat Table
http://kangax.github.io/compat-table/es6/

11. Frage:
S. Hofschlaeger / pixelio.de

12. Kann ich das jetzt
schon verwenden?

13. Petra Bork / pixelio.de

15. Traceur
$ git clone https://github.com/google/traceur-compiler.
git
$ cd traceur-compiler
$ npm install
$ make
src/bootstrap.js
bin/traceur.js
<script src=“app.js” type=“module”></script>

16. 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.

17. Der Kern von
ECMAScript 6
FotoHiero / pixelio.de

18. Kleine Helfer
oder: Was wir uns schon immer gewünscht haben
Gila Hanssen / pixelio.de

19. String
• String.prototype.repeat
• String.prototype.startsWith/endsWith
• String.prototype.contains

20. Array
• Array.prototype.find
• Array.prototype.fill
• Array.prototype.keys/entries => Array Iterator

21. Neue Features
Die wirklich bewegenden Dinge
Alexandra H. / pixelio.de

22. Default Parameters

23. 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();

24. function add(input = ‘’) {
console.log(input.length);
}
add();

25. 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

26. Class
Gerhard Prantl / pixelio.de

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

28. function User(name) {
this.name = name;
}
User.prototype.getName = function() {
return this.name;
}
var klaus = new User(‘Klaus’);

29. class User extends Person {
constructor(name, pw) {
super(name);
this.pw = pw;
}
getPw() {
return this.pw;
}
}
var klaus = new User(‘Klaus’, ‘secret’);

30. Class
• Einfache Art der Vererbung
• Zugriff über super auf die Elternklasse
• Maskierung des Prototyps

31. Block Scope
lichtkunst.73 / pixelio.de

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

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

34. 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

35. Fat Arrow Functions
Dieter Schütz / pixelio.de

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

37. Fat Arrow Functions
(args) => {
…
return result;
}
Fat Arrow

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

39. 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)

40. Map/Set
w.r.wagner / pixelio.de

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

42. 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.

43. Maps
var 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');

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

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

46. 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.

47. Sets
var mySet = new Set();
mySet.add('Hello');
mySet.add({name: 'World'});
mySet.add(function() {});

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

49. Generators
Gerhard Frassa / pixelio.de

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

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

52. Generators
var generator = gFunction();
var value = generator.next();
{
value: ‘Hello’,
done: false
}

53. Generator Input
var 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));

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

55. Destructuring
Rahel Szielis / pixelio.de

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

57. Destructuring
var first = myArr[0];
var second = myArr[1];
var third = myArr[2];
var [first, second, third] = myArr;

58. Destructuring
• Auslassen von Elementen: var [,,bar] =
[1,2,3];
• Multidimensionale Arrays: var [a, [b, c]] =
[1, [2,3]]

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

60. Modulsystem
Marlies Schwarzin / pixelio.de

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

62. Modules are not ready to use yet in
Traceur, but they are partially
implemented.
– Google

63. ES6 Modulsystem
var privateVariable = 'This is a private
Value';
export var publicVariable = 'This is a public
Value';
export function getPrivateVariable() {
return privateVariable;
}

64. ES6 Modulsystem
import {publicVariable, getPrivateVariable}
from 'module';
console.log(publicVariable);
console.log(getPrivateVariable());

65. Viele weitere Features
• Promises
• Symbols
• Typed Arrays
• WeakSet/WeakMap
• …

66. Fragen?
Rainer Sturm / pixelio.de

67. KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
@basti_springer
https://github.com/sspringer82