"let ecmascript = 6"
TRANSCRIPT
LET ECMASCRIPT = 6LET ECMASCRIPT = 6Wiktor Toporek
O MNIEO MNIEBlog: Na co dzień PHP i JSInspirują mnie inne języki programowania i podejścia
http://wiktortoporek.name/blog
WSTĘPWSTĘP
ECMASCRIPT VS JSECMASCRIPT VS JSPodzbiór JSJS implementuje ES
ES5 / ES5.1ES5 / ES5.1Metody Object.*: .create(), .defineProperty(), ...Natywny support JSONaMetody w Arrayach: .forEach(),.map(), .filter(), ...
ES6ES6
Źródło: http://reddit.com/r/gifs
FICZERY ES6FICZERY ES6AGENDAAGENDA
1. Arrow functions2. let & const3. Template strings4. Destrukturyzacja5. class6. Promise7. Moduły
ARROW FUNCTIONSARROW FUNCTIONS() => {}() => {}
Źródło obrazka: http://www.bronzemoonoutdoors.com.au
/* examples/arrow/01-filter.js */
var numbers = [1, 2, 3, 4, 5, 6];var even = numbers.filter(function(x) { return x % 2 == 0;});
console.log(even); //[ 2, 4, 6 ]
/* examples/arrow/02-arrow-filter.js */
var numbers = [1, 2, 3, 4, 5, 6];var even = numbers.filter(x => x % 2 == 0);
console.log(even); //[ 2, 4, 6 ]
PROSTA SKŁADNIAPROSTA SKŁADNIAx => x * 2
function(x) {return x * 2;}
WIELE ARGUMENTÓWWIELE ARGUMENTÓW(x, y) => x + y
function(x, y) {return x + y;}
BRAK ARGUMENTÓWBRAK ARGUMENTÓW() => 2 + 2
function() {return 2 + 2;}
BARDZIEJ ZŁOŻONE CIAŁO FUNKCJIBARDZIEJ ZŁOŻONE CIAŁO FUNKCJI(x, y) => { console.log(x); return x+y;}
function(x, y) { console.log(x); return x+y;}
NIE TYLKONIE TYLKO"SYNTACTIC SUGAR""SYNTACTIC SUGAR"
Źródło obrazka: https://en.wikipedia.org/wiki/Sugar
/* examples/arrow/03-buggy-timer.js */
var Timer = function() { this.secs = 0;};Timer.prototype.start = function() { setInterval(function() { this.secs++; }, 1000);};
var timer = new Timer();timer.start();
/* examples/arrow/04-corrected-timer.js */
var Timer = function() { this.secs = 0;};Timer.prototype.start = function() { var that = this; setInterval(function() { that.secs++; }, 1000);};
var timer = new Timer();timer.start();
/* examples/arrow/05-arrow-func-timer.js */
var Timer = function() { this.secs = 0;};Timer.prototype.start = function() { setInterval(() => {this.secs++;}, 1000);};
var timer = new Timer();timer.start();
LETLET & & CONSTCONSTŹródło obrazka: https://www.flickr.com/photos/mtip/4562826679
/* examples/letnconst/01-tricky-async-var.js */
for (var i=1; i <= 10; ++i) { setTimeout(function() {console.log(i);}, i * 1000);}
/* examples/letnconst/02-tricky-async-var-corrected.js */
for (var i=1; i <= 10; ++i) { (function(i) { setTimeout(function() {console.log(i);}, i * 1000); })(i);}
/* examples/letnconst/03-let.js */
"use strict";
for (let i=1; i <= 10; ++i) { setTimeout(function() {console.log(i);}, i * 1000);}
/* examples/letnconst/04-let-in-if.js */
"use strict";
if (true) { let foo = 'bar';}console.log(foo); // ReferenceError: foo is not defined
var - function scopelet - block (if, for, etc) scope
/* examples/letnconst/05-tricky-var.js */
var x = 'foo';(function() { console.log(x); var x = 'bar';})();
/* examples/letnconst/06-tricky-var-explained.js */
var x = 'foo';(function() { var x; console.log(x); x = 'bar';})();
/* examples/letnconst/07-beware-tdz.js */
'use strict';
let foo = 'bar';if (true) { console.log(foo); /* ReferenceError (due to Temporal Dead Zone)*/ let foo = 'bar';}
CONSTCONST
/* examples/letnconst/08-const.js */
const x = 1;
x++;
console.log(x); //1
/* examples/letnconst/09-const-strict.js */
"use strict";
const x = 1;
x++; /*SyntaxError*/
console.log(x);
Źródło: http://reddit.com/r/gifs
/* examples/letnconst/10-const-object.js */
const obj = {x: 1, y: 2};console.log(obj); /*Object {x: 1, y: 2}*/
obj.x = 'foo!';console.log(obj); //Object {x: "foo!", y: 2} :-(
TEMPLATE STRINGSTEMPLATE STRINGSŹródło obrazka: https://www.flickr.com/photos/alexfiles/3106114417
/* examples/template-strings/01-classic-string-concat.js */
var firstName = 'John';var lastName = 'Doe';var fullName = firstName + ' ' + lastName;
console.log(fullName);
/* examples/template-strings/02-template-string.js */
var firstName = 'John';var lastName = 'Doe';var fullName = `${firstName} ${lastName}`;
console.log(fullName);
/* examples/template-strings/03-template-string-multiline.js */
var multilineText = `first linesecondthird`;
console.log(multilineText);/* Output: first line second third */
DESTRUKTURYZACJADESTRUKTURYZACJAŹródło obrazka: http://www.autoevolution.com/news/stunning-deconstruction-of-f1-car-at-
mercedes-benz-world-32294.html
/* examples/destruct/01-destruct.js */
/*Arrays*/var [el1, , el3] = [1, 2, 3];
console.log(el1, el3); /*1 3*/
/*Objects*/var john = { firstName: 'John', lastName: 'Doe'};
var {firstName, lastName} = john;console.log(firstName, lastName); /*John Doe*/
/* examples/destruct/02-spread.js */
var head, rest;[head, ...rest] = [1, 2, 3, 4, 5];
console.log(head); /*1*/console.log(rest); /*[2, 3, 4, 5]*/
var array1 = [1,2,3], array2 = [4,5,6];
/*ES5: array1.push.apply(array1, array2);*/array1.push(...array2);
console.log(array1); //[1,2,3,4,5,6]
/* examples/destruct/03-func-many-params.js */
function ajax(url, method, async, headers) { if (method === undefined) { method = 'get'; }
if (async === undefined) { async = true; }
if (headers === undefined) { headers = {}; }
console.log(method, url, async ? 'async' : 'sync');
console.log('headers:', headers);}
/* get http://google.com sync headers: {} */ajax('http://google.com', 'get', false);
/* examples/destruct/04-func-params-es6.js */
function ajax({url, method = 'get', async = true, headers = {}}) { console.log(method, url, async ? 'async' : 'sync'); console.log('headers:', headers);}
/*get http://google.com syncheaders: {} */ajax({url: 'http://google.com', async: false});
CLASSCLASSŹródło obrazka: http://cufflinkedmag.com/2014/07/14/keepin-it-classy-7-things-you-will-never-see-
in-cufflinked-magazine/
/* examples/class/01-es5.js */
function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName;}Person.prototype.say = function(what) { console.log(this.firstName+' '+this.lastName+' says: '+what);};
var john = new Person('John', 'Doe');john.say('Hello!');
/* examples/class/02-es6.js */
class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }
say(what) { console.log(`${this.firstName} ${this.lastName} says: ${what}`); }}
var john = new Person('John', 'Doe');john.say('Hello!');
/* examples/class/03-inheritance.js */
class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }
getFullName() { return [this.firstName, this.lastName].join(' '); }
toString() { return 'Person ' + this.getFullName(); }
}
class Employee extends Person { constructor(firstName, lastName, jobTitle) { super(firstName, lastName); this.jobTitle = jobTitle; } toString() { return `${super.toString()} (${this.jobTitle})`; }}
var john = new Person('John', 'Doe');var wiktor = new Employee('Wiktor', 'Toporek', 'PHP Programmer');
console.log(john.toString()); /*Person: John Doe*/console.log(wiktor.toString()); //Person: Wiktor Toporek (PHP Programmer)
/* examples/class/04-dynamic-inheritance.js */
const CarMixin = { ride() { console.log('Riding...'); }};
const SailingMixin = { sail() { console.log('Sailing...') }};
function mixin(...mixins) { var base = function() {}; Object.assign(base.prototype, ...mixins); return base;}
class Amphibian extends mixin(CarMixin, SailingMixin) {}
var amphibian = new Amphibian();amphibian.ride(); /*Riding...*/amphibian.sail(); /*Sailing...*/
/* examples/class/05-gettersnsetters.js */
class Rectangle { constructor(width, height) { this.width = width; this.height = height; this._scale = 1; }
get area() { return this.width * this.height; }
set scale(newScale) { var prevScale = this._scale; this._scale = newScale; this.width *= newScale / prevScale; this.height *= newScale / prevScale; }
get scale() { return this._scale; }}
var rect = new Rectangle(10, 10);console.log(rect.area); /*100*/
rect.scale = 0.5;console.log(rect.area); /*25*/
rect.scale = 1;console.log(rect.area); //100
/* examples/class/06-static.js */
class Point { constructor(x, y) { this.x = x; this.y = y; }
static distance(a, b) { const dx = a.x - b.x; const dy = a.y - b.y;
return Math.sqrt(dx*dx + dy*dy); }}
const p1 = new Point(5, 5);const p2 = new Point(10, 10);
console.log(Point.distance(p1, p2));
/* examples/class/07-hoisting.js */
var foo = new Bar(); /* ReferenceError*/
class Bar {}
ZALETYZALETYŁatwa przejrzysta składniaSkładnia bliższa dla programistów z innych języków OO(np. Java)Łatwiejsze dziedziczenie z extends
WADYWADYMamy kilka sposobów tworzenia obiektów. Po co kolejny?Brakuje Access modifierów dla metod np. privateBrak wsparcia dla deklarowania właściwości klasy
PROMISEPROMISEŹródło obrazka: http://thenextweb.com/lifehacks/2014/03/30/always-promise-deliver/
/* examples/promise/01-promise.js */
function timeout(duration = 0) { return new Promise((resolve, reject) => { setTimeout(resolve, duration); })}
var p = timeout(1000).then(() => { return timeout(2000);}).then(() => { throw new Error("hmm");}).catch(err => { return Promise.all([timeout(100), timeout(200)]);})
MODUŁYMODUŁYŹródło obrazka: http://www.officescope.com/blog/wp-content/uploads/2013/07/Puzzle-pieces.jpg
POZOSTAŁE FICZERYPOZOSTAŁE FICZERYGeneratoryfor..ofSymbolUnicodeSubclassable Built-ins (m.in. elementy DOM)Array.from / Array.ofProxyOptymalizacja "Tail Call"i inne...
Źródło: http://reddit.com/r/gifs
JAK UŻYWAĆ?JAK UŻYWAĆ?
COMPATIBILITY TABLECOMPATIBILITY TABLE
BACKENDBACKENDnode --harmony - tylko 17% ficzerówio.js - 44% ficzerów
Czekamy na implementacje i olewamy stare przeglądarki?
FRONTENDFRONTEND
BEZPIECZNA DROGA:BEZPIECZNA DROGA:TRANSPILACJATRANSPILACJA
npm install --global babel
babel es6-script.js --out-file es5-script-file.js
NA CO ZWRÓCIĆ UWAGĘ?NA CO ZWRÓCIĆ UWAGĘ?Część ficzerów wymaga babel/polyfillProxy nie możliwe do przetłumaczenia na ES5
Źródło obrazka: http://www.successfulworkplace.org/wp-content/uploads/2013/05/the-future.jpg
Źródło obrazka: http://www.successfulworkplace.org/wp-content/uploads/2013/05/the-future.jpg
ES7?ES7?operator **async functionsObject.observeoperator ::SIMDTrailing commas in function syntax:function(a,b,c,){}
>=ES8?>=ES8?Makra?
THANKYOU.JSTHANKYOU.JSPYTANIA.JS ?PYTANIA.JS ?