The document provides an overview of ECMAScript 6 (ES6), highlighting new features such as arrow functions, let & const, template strings, destructuring, classes, promises, and modules. It includes code examples that illustrate each feature's syntax and usage. Additionally, it touches on compatibility issues and tools like Babel for transpiling ES6 code to ES5 for broader browser support.

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 ?