SlideShare ist ein Scribd-Unternehmen logo
1 von 67
Downloaden Sie, um offline zu lesen
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.
So viel zur Geschichte 
Paul-Georg Meister / pixelio.de
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.js 
bin/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 Helfer 
oder: 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 Features 
Die 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++) { 
… 
} 
} 
a i
function doSomething() { 
var a; 
for (let i = 0; i < a.length; i++) { 
… 
} 
} 
a i
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 Functions 
var 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.
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');
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’; 
}
Generators 
var generator = gFunction(); 
var value = generator.next(); 
{ 
value: ‘Hello’, 
done: false 
}
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));
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.
Modules are not ready to use yet in 
Traceur, but they are partially 
implemented. 
– Google
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

Weitere ähnliche Inhalte

Was ist angesagt?

Go - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare SystemeGo - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare SystemeFrank Müller
 
Spaß an der Nebenläufigkeit
Spaß an der NebenläufigkeitSpaß an der Nebenläufigkeit
Spaß an der NebenläufigkeitFrank Müller
 
Guava - Google Core Libraries for Java 1.5+
Guava - Google Core Libraries for Java 1.5+Guava - Google Core Libraries for Java 1.5+
Guava - Google Core Libraries for Java 1.5+Johannes Degler
 
Java Streams und Lambdas
Java Streams und LambdasJava Streams und Lambdas
Java Streams und LambdasNane Kratzke
 
Scalaz introduction for Java programmers
Scalaz introduction for Java programmersScalaz introduction for Java programmers
Scalaz introduction for Java programmersBernhard Huemer
 

Was ist angesagt? (6)

Go - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare SystemeGo - Googles Sprache für skalierbare Systeme
Go - Googles Sprache für skalierbare Systeme
 
Spaß an der Nebenläufigkeit
Spaß an der NebenläufigkeitSpaß an der Nebenläufigkeit
Spaß an der Nebenläufigkeit
 
Guava - Google Core Libraries for Java 1.5+
Guava - Google Core Libraries for Java 1.5+Guava - Google Core Libraries for Java 1.5+
Guava - Google Core Libraries for Java 1.5+
 
Typescript
TypescriptTypescript
Typescript
 
Java Streams und Lambdas
Java Streams und LambdasJava Streams und Lambdas
Java Streams und Lambdas
 
Scalaz introduction for Java programmers
Scalaz introduction for Java programmersScalaz introduction for Java programmers
Scalaz introduction for Java programmers
 

Ähnlich wie Warum ECMAScript 6 die Welt ein Stückchen besser macht

Differenzial Analyse in der Praxis (Florian Walther)
Differenzial Analyse in der Praxis (Florian Walther)Differenzial Analyse in der Praxis (Florian Walther)
Differenzial Analyse in der Praxis (Florian Walther)GEEKcon
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScriptManfred Steyer
 
Prototype 1.7
Prototype 1.7Prototype 1.7
Prototype 1.7msebel
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJSSebastian Springer
 
Einführung in die funktionale Programmierung
Einführung in die funktionale ProgrammierungEinführung in die funktionale Programmierung
Einführung in die funktionale ProgrammierungDigicomp Academy AG
 
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011Reto Zahner
 
Skalierbare Anwendungen mit Google Go
Skalierbare Anwendungen mit Google GoSkalierbare Anwendungen mit Google Go
Skalierbare Anwendungen mit Google GoFrank Müller
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptSebastian Springer
 
SOLID Prinzipien, Designgrundlagen objektorientierter Systeme
SOLID Prinzipien, Designgrundlagen objektorientierter SystemeSOLID Prinzipien, Designgrundlagen objektorientierter Systeme
SOLID Prinzipien, Designgrundlagen objektorientierter SystemeMario Rodler
 
Modern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_scriptModern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_scriptManfred Steyer
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Manfred Steyer
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Sven Haiges
 
Webcon 2012 Mobile Development mit Sencha Touch
Webcon 2012  Mobile Development mit Sencha TouchWebcon 2012  Mobile Development mit Sencha Touch
Webcon 2012 Mobile Development mit Sencha TouchThorsten Suckow-Homberg
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100Yvette Teiken
 
Funktionale Reaktive Programmierung mit Sodium
Funktionale Reaktive Programmierung mit SodiumFunktionale Reaktive Programmierung mit Sodium
Funktionale Reaktive Programmierung mit SodiumTorsten Fink
 
Java Batch: Der neue Standard für‘s Stapeln
Java Batch: Der neue Standard für‘s StapelnJava Batch: Der neue Standard für‘s Stapeln
Java Batch: Der neue Standard für‘s Stapelngedoplan
 

Ähnlich wie Warum ECMAScript 6 die Welt ein Stückchen besser macht (20)

Differenzial Analyse in der Praxis (Florian Walther)
Differenzial Analyse in der Praxis (Florian Walther)Differenzial Analyse in der Praxis (Florian Walther)
Differenzial Analyse in der Praxis (Florian Walther)
 
Testing tools
Testing toolsTesting tools
Testing tools
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
 
Prototype 1.7
Prototype 1.7Prototype 1.7
Prototype 1.7
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
Einführung in die funktionale Programmierung
Einführung in die funktionale ProgrammierungEinführung in die funktionale Programmierung
Einführung in die funktionale Programmierung
 
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
 
Skalierbare Anwendungen mit Google Go
Skalierbare Anwendungen mit Google GoSkalierbare Anwendungen mit Google Go
Skalierbare Anwendungen mit Google Go
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
 
SOLID Prinzipien, Designgrundlagen objektorientierter Systeme
SOLID Prinzipien, Designgrundlagen objektorientierter SystemeSOLID Prinzipien, Designgrundlagen objektorientierter Systeme
SOLID Prinzipien, Designgrundlagen objektorientierter Systeme
 
Mvc public
Mvc publicMvc public
Mvc public
 
Modern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_scriptModern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_script
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
 
Webcon 2012 Mobile Development mit Sencha Touch
Webcon 2012  Mobile Development mit Sencha TouchWebcon 2012  Mobile Development mit Sencha Touch
Webcon 2012 Mobile Development mit Sencha Touch
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
 
jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?
 
Funktionale Reaktive Programmierung mit Sodium
Funktionale Reaktive Programmierung mit SodiumFunktionale Reaktive Programmierung mit Sodium
Funktionale Reaktive Programmierung mit Sodium
 
Java Batch: Der neue Standard für‘s Stapeln
Java Batch: Der neue Standard für‘s StapelnJava Batch: Der neue Standard für‘s Stapeln
Java Batch: Der neue Standard für‘s Stapeln
 

Mehr von Sebastian Springer

HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?Sebastian Springer
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsSebastian Springer
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsSebastian Springer
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceSebastian Springer
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebSebastian Springer
 
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebSebastian Springer
 
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der WebentwicklungSebastian Springer
 

Mehr von Sebastian Springer (20)

HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?
 
Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Angular2
Angular2Angular2
Angular2
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
 
Streams in Node.js
Streams in Node.jsStreams in Node.js
Streams in Node.js
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
 
Node.js für Webapplikationen
Node.js für WebapplikationenNode.js für Webapplikationen
Node.js für Webapplikationen
 
Debugging und Profiling
Debugging und ProfilingDebugging und Profiling
Debugging und Profiling
 
Node.js
Node.jsNode.js
Node.js
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 
Angular translate
Angular translateAngular translate
Angular translate
 
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
 

Warum ECMAScript 6 die Welt ein Stückchen besser macht

  • 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
  • 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
  • 11. Frage: S. Hofschlaeger / pixelio.de
  • 12. Kann ich das jetzt schon verwenden?
  • 13. Petra Bork / pixelio.de
  • 14.
  • 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
  • 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
  • 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); }
  • 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); }
  • 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’};
  • 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