W roku 2015 świat ujrzała specyfikacja ECMAScript 6. Większość programistów JS na pewno o niej słyszała, ale nie każdy miał przyjemność programować z wykorzystaniem nowych ficzerów oferowanych przez ten język. Postaram się zrobić krótki przegląd nowych ficzerów zarówno pod kątem używalności jak i czyhających pułapek. Kod źródłowy z prezentacji: https://github.com/UszanowankoProgramowanko/ecmascript6

1. LET ECMASCRIPT = 6LET ECMASCRIPT = 6
Wiktor Toporek

2. O MNIEO MNIE
Blog:
Na co dzień PHP i JS
Inspirują mnie inne języki programowania i podejścia
http://wiktortoporek.name/blog

3. WSTĘPWSTĘP

4. ECMASCRIPT VS JSECMASCRIPT VS JS
Podzbiór JS
JS implementuje ES

5. ES5 / ES5.1ES5 / ES5.1
Metody Object.*:
.create(),
.defineProperty(), ...
Natywny support JSONa
Metody w Arrayach:
.forEach(),
.map(),
.filter(), ...

6. ES6ES6

7. Źródło: http://reddit.com/r/gifs

8. FICZERY ES6FICZERY ES6
AGENDAAGENDA
1. Arrow functions
2. let & const
3. Template strings
4. Destrukturyzacja
5. class
6. Promise
7. Moduły

9. ARROW FUNCTIONSARROW FUNCTIONS
() => {}() => {}
Źródło obrazka: http://www.bronzemoonoutdoors.com.au

10. /* 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 ]

11. /* 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 ]

12. PROSTA SKŁADNIAPROSTA SKŁADNIA
x => 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;}

13. 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;
}

14. NIE TYLKONIE TYLKO
"SYNTACTIC SUGAR""SYNTACTIC SUGAR"
Źródło obrazka: https://en.wikipedia.org/wiki/Sugar

15. /* 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();

17. /* 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();

18. /* 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();

19. LETLET && CONSTCONST
Źródło obrazka: https://www.flickr.com/photos/mtip/4562826679

20. /* examples/letnconst/01-tricky-async-var.js */
for (var i=1; i <= 10; ++i) {
setTimeout(function() {console.log(i);}, i * 1000);
}

21. /* 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);
}

22. /* examples/letnconst/03-let.js */
"use strict";
for (let i=1; i <= 10; ++i) {
setTimeout(function() {console.log(i);}, i * 1000);
}

23. /* examples/letnconst/04-let-in-if.js */
"use strict";
if (true) {
let foo = 'bar';
}
console.log(foo); // ReferenceError: foo is not defined

24. var - function scope
let - block (if, for, etc) scope

25. /* examples/letnconst/05-tricky-var.js */
var x = 'foo';
(function() {
console.log(x);
var x = 'bar';
})();

26. /* examples/letnconst/06-tricky-var-explained.js */
var x = 'foo';
(function() {
var x;
console.log(x);
x = 'bar';
})();

27. /* 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';
}

28. CONSTCONST

29. /* examples/letnconst/08-const.js */
const x = 1;
x++;
console.log(x); //1

30. /* examples/letnconst/09-const-strict.js */
"use strict";
const x = 1;
x++; /*SyntaxError*/
console.log(x);

31. Źródło: http://reddit.com/r/gifs

32. /* 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} :-(

33. TEMPLATE STRINGSTEMPLATE STRINGS
Źródło obrazka: https://www.flickr.com/photos/alexfiles/3106114417

34. /* examples/template-strings/01-classic-string-concat.js */
var firstName = 'John';
var lastName = 'Doe';
var fullName = firstName + ' ' + lastName;
console.log(fullName);

35. /* examples/template-strings/02-template-string.js */
var firstName = 'John';
var lastName = 'Doe';
var fullName = `${firstName} ${lastName}`;
console.log(fullName);

36. /* examples/template-strings/03-template-string-multiline.js */
var multilineText = `first line
second
third
`;
console.log(multilineText);
/*
Output:
first line
second
third
*/

37. DESTRUKTURYZACJADESTRUKTURYZACJA
Źródło obrazka: http://www.autoevolution.com/news/stunning-deconstruction-of-f1-car-at-
mercedes-benz-world-32294.html

38. /* 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*/

39. /* 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]

40. /* 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);

41. /* 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 sync
headers: {}
*/
ajax({url: 'http://google.com', async: false});

42. CLASSCLASS
Źródło obrazka: http://cufflinkedmag.com/2014/07/14/keepin-it-classy-7-things-you-will-never-see-
in-cufflinked-magazine/

43. /* 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!');

44. /* 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!');

45. /* 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');

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

47. /* 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*/

48. 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));

49. /* examples/class/07-hoisting.js */
var foo = new Bar(); /* ReferenceError*/
class Bar {}

50. ZALETYZALETY
Łatwa przejrzysta składnia
Składnia bliższa dla programistów z innych języków OO
(np. Java)
Łatwiejsze dziedziczenie z extends

51. WADYWADY
Mamy kilka sposobów tworzenia obiektów. Po co kolejny?
Brakuje Access modifierów dla metod np. private
Brak wsparcia dla deklarowania właściwości klasy

52. PROMISEPROMISE
Źródło obrazka: http://thenextweb.com/lifehacks/2014/03/30/always-promise-deliver/

53. /* 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)]);
})

54. MODUŁYMODUŁY
Źródło obrazka: http://www.officescope.com/blog/wp-content/uploads/2013/07/Puzzle-pieces.jpg

55. POZOSTAŁE FICZERYPOZOSTAŁE FICZERY
Generatory
for..of
Symbol
Unicode
Subclassable Built-ins (m.in. elementy DOM)
Array.from / Array.of
Proxy
Optymalizacja "Tail Call"
i inne...

56. Źródło: http://reddit.com/r/gifs

57. JAK UŻYWAĆ?JAK UŻYWAĆ?

58. COMPATIBILITY TABLECOMPATIBILITY TABLE

59. BACKENDBACKEND
node --harmony - tylko 17% ficzerów
io.js - 44% ficzerów

60. Czekamy na implementacje i olewamy stare przeglądarki?
FRONTENDFRONTEND

62. BEZPIECZNA DROGA:BEZPIECZNA DROGA:
TRANSPILACJATRANSPILACJA

63. npm install --global babel
babel es6-script.js --out-file es5-script-file.js

64. NA CO ZWRÓCIĆ UWAGĘ?NA CO ZWRÓCIĆ UWAGĘ?
Część ficzerów wymaga babel/polyfill
Proxy nie możliwe do przetłumaczenia na ES5

65. Źródło obrazka: http://www.successfulworkplace.org/wp-content/uploads/2013/05/the-future.jpg

66. Źródło obrazka: http://www.successfulworkplace.org/wp-content/uploads/2013/05/the-future.jpg
ES7?ES7?
operator **
async functions
Object.observe
operator ::
SIMD
Trailing commas in function syntax:
function(a,b,c,){}
>=ES8?>=ES8?
Makra?

67. THANKYOU.JSTHANKYOU.JS
PYTANIA.JS ?PYTANIA.JS ?