Quick overview of ecmascript 2015 features with examples how to rewrite es5 code into es6 presented at Pixers Academy.

1. ECMASCRIPT 2015
BEST OF NEW FEATURES().
by / atMiłosz Sobczak @miloszsobczak
Main example source code can be found at github.com/miloszsobczak/es6-rewrite.

2. CLASSES

3. CLASSES DEFINITION
ECMASCRIPT 5 OLD WAY
var Developer = function Developer(name, experience, languages) {
this.name(name || '');
this.experience(experience || 0);
this.languages(languages || []);
}

4. CLASSES DEFINITION
ECMASCRIPT 2015 (6)
class Developer {
constructor (name, experience, languages) {
this.name = name;
this.experience = experience;
this.languages = languages;
}
}

5. CLASSES INHERITANCE
ECMASCRIPT 5 OLD WAY
var PixersDeveloper = function PixersDeveloper (name, experience, languages,
Developer.call(this, name, experience, languages);
this.awesomeness(awesomeness);
this.worklog = {};
};
PixersDeveloper.prototype = Object.create(Developer.prototype);
PixersDeveloper.prototype.constructor = PixersDeveloper;
PixersDeveloper.prototype.default = function () {
return new PixersDeveloper('Mieszkos', 2, ['Whitespace'], -1000)
}

6. CLASSES INHERITANCE
ECMASCRIPT 2015 (6)
class PixersDeveloper extends Developer {
constructor (name, experience, languages, awesomeness) {
super(name, experience, languages);
this.awesomeness = awesomeness;
this.Worklog = new Map();
}
}
static default () {
return new PixersDeveloper('Mieszkos', 2, ['Whitespace'], -1000);
}

7. CLASSES SUPER ACCESS
ECMASCRIPT 5 OLD WAY
//base class constructor
Developer.call(this, name, experience, languages);
//method access
Developer.prototype.method.call(this);

8. CLASSES SUPER ACCESS
ECMASCRIPT 2015 (6)
//base class constructor
super(name, experience, languages);
//method access
super.method()

9. CLASSES STATIC FUNCTION
ECMASCRIPT 5 OLD WAY
PixersDeveloper.prototype.default = function () {
return new PixersDeveloper('Mieszkos', 2, ['Whitespace'], -1000)
}
//usage
var Mieszkos = PixersDeveloper.default();

10. CLASSES STATIC FUNCTION
ECMASCRIPT 2015 (6)
static default () {
return new PixersDeveloper('Mieszkos', 2, ['Whitespace'], -1000);
}
//usage
var Mieszkos = PixersDeveloper.default();

11. CLASSES SETTER/GETTER
ECMASCRIPT 5 OLD WAY
Described in ecmascript 5.0 (not in 5.1).
PixersDeveloper.prototype.awesomeness = function (value) {
if (typeof value === 'number') {
this._awesomeness = parseInt(value, 10);
}
return this._awesomeness;
}
//setter usage
this.awesomeness(10);
//getter usage
var dev_awesomness = this.awesomeness();

12. CLASSES SETTER/GETTER
ECMASCRIPT 2015 (6)
set awesomeness (value = 0) {
if (typeof value === 'number') {
this._awesomeness = parseInt(value, 10);
}
}
get awesomeness () {
return this._awesomeness;
}
//setter usage
this.awesomeness = 10;
//getter usage
var dev_awesomness = this.awesomeness;

13. CLASSES EXTENDING
ECMASCRIPT 5 OLD WAY
BUILT-INS
function MyArray(/*arguments*/) {
var arr = [];
Array.prototype.push.apply(arr, arguments);
copyOwnPropertiesFrom(arr, MyArray.methods);
return arr;
}
var a = new MyArray();
a instanceof MyArray; //false
a instanceof Array; //true

14. CLASSES EXTENDING BUILT-INS
ECMASCRIPT 2015 (6)
class MyArray extends Array {
constructor(...args) {
super(args);
}
}
//ex below still gives an error, but it shuldn't
class myMath extends Math {}

15. MODULES
Almost* native module system.

16. MODULES DEFINITION
REQUIREJS OLD? WAY
define('countPoints', function (){
return function countPoints (langLength, exp) {
var pointPerLanguage = 2,
pointPerExp = 4;
return parseInt(langLength * pointPerLanguage, 10) +
parseInt(exp * pointPerExp, 10);
}
});
//usage
require(['countPoints'], function(countPoints) {
var points = countPoints(2, 5);
});

17. MODULES DEFINITION
ECMASCRIPT 2015 (6)
export function countPoints (langLength = 0, exp = 0) {
let pointPerLanguage = 2,
pointPerExp = 4;
return parseInt(langLength * pointPerLanguage, 10) +
parseInt(exp * pointPerExp, 10);
}
//usage
import { countPoints } from 'lib/countPoints.js';
points = countPoints(2, 5);

18. MODULES DEFINITION
ECMASCRIPT 2015 (6) - CAVEATS
IT'S NOT GREAT! (FOR NOW) :)
Support by Mozilla

19. MODULES DEFINITION
ECMASCRIPT 2015 (6) - CAVEATS
WORKAROUNDS
+ +Browersify babelify Node.js
//basic gulp configuration
var fs = require('fs'),
browserify = require('browserify');
browserify('./script.js')
.transform('babelify')
.bundle()
.pipe(fs.createWriteStream('bundle.js'));
//define
module.exports = function countPoints (langLength = 0, exp = 0) {...}
//use
import countPoints from 'lib/countPoints.js';

20. BLOCKS && SCOPE VARIABLES

21. BLOCKS && SCOPE VARIABLES:
CONSTS
ECMASCRIPT 5 OLD WAY
//simple and cross-browser, but still writable
var PI = 3.141593;
//or complicatated and not writable
Object.defineProperty(window, 'PI', {
value: 3.141593,
enumerable: true,
writable: false,
configurable: false
});

22. BLOCKS && SCOPE VARIABLES:
CONSTS
ECMASCRIPT 2015 (6)
const PI = 3.141593;
const PI = 1; //Uncaught TypeError: Identifier 'PI' has already been declare
var PI = 2; //3.141593

23. BLOCKS && SCOPE VARIABLES: LET
ECMASCRIPT 5 OLD WAY
var a = 2;
(function own_scope(){
var a = 3;
console.log( a ); // 3
})();
console.log( a ); // 2

24. BLOCKS && SCOPE VARIABLES: LET
ECMASCRIPT 2015 (6)
var a = 2;
{
let a = 3;
console.log( a ); // 3
}
console.log( a ); // 2

25. ARROW FUNCTIONS =>

26. ARROW FUNCTIONS: DEFINITION
ECMASCRIPT 5 OLD WAY
return (function anonymus(points) {
var points = points || 0;
//do something with points
})(countPoints(this.languages().length, this.experience()));

27. ARROW FUNCTIONS: DEFINITION
ECMASCRIPT 2015 (6)
return ((points = 0) => {
//do something with points
})(countPoints(this.languages.length, this.experience));

28. ARROW FUNCTIONS: CURRENT
OBJECT CONTEXT
ECMASCRIPT 5 OLD WAY
var self = this;
return (function anonymus(points) {
var points = points || 0;
//do something with points
return self.name() + ' is a Developer';
})(countPoints(this.languages().length, this.experience()));

29. ARROW FUNCTIONS: CURRENT
OBJECT CONTEXT
ECMASCRIPT 2015 (6)
return ((points = 0) => {
//do something with points
return this.name + ' is a Developer';
})(countPoints(this.languages.length, this.experience));

30. `${TEMPLATE LITERALS}`

31. TEMPLATE LITERALS: STRING
INTERPOLATION
ECMASCRIPT 5 OLD WAY
return self.name() + ' is a ' + degree + ' Developer';

32. TEMPLATE LITERALS: STRING
INTERPOLATION
ECMASCRIPT 2015 (6)
return `${this.name} is a ${degree} Developer`;

33. NEW DATA STRUCTURE TYPES
1. Key-value collection
Map
WeakMap (object as a key)
2. Values collection
Set
WeakSet (object as a key)

34. NEW DATA STRUCTURE TYPES: MAP
ECMASCRIPT 5 OLD WAY
this.worklog = {}; //defined in costructor
PixersDeveloper.prototype.setWork = function (taskId, timeInMins) {
var self = this;
if (this.worklog.hasOwnProperty(taskId) === false) {
return this.worklog[taskId] = timeInMins;
}
this.worklog[taskId] = (function () {
return self.getWorkById(taskId) + timeInMins;
})();
}

35. NEW DATA STRUCTURE TYPES: MAP
ECMASCRIPT 2015 (6)
this.Worklog = new Map(); //defined in costructor
setWork (taskId, timeInMins) {
if (this.Worklog.has(taskId) === false) {
return this.Worklog.set(taskId, timeInMins);
}
this.Worklog.set(taskId, (() => {
let minutes = this.Worklog.get(taskId);
return minutes + timeInMins;
})());
}

36. THERE IS WAY MUCH MORE...
New built-ins methods...
New literals (binary for example)
Symbol type
Native Promise
...

37. ECMAScript 5 6 7 intl non-standard compatibility table Fork 201by kangax & webbedspaceGratipay
Please note that some of these tests represent existence, not functionality or full conformance. Sort by number of features? Show obso
unstable platforms?
V8 SpiderMonkey JavaScriptCore Chakra Carakan KJS Other
Minor difference (1 point) Useful feature (2 points) Significant feature (4 points) Landmark feature (8 points)⬤ ⬤ ⬤ ⬤
Compilers/polyfills
►Feature name
Current
browser
74%
Traceur
59%
Babel +
core-js[1]
71%
Closure
30%
JSX[2]
19%
Type-
Script
+
core-js
52%
es6-
shim
17%
IE 10
7%
IE 11
16%
Edge
12[3]
63%
Edge
13[3]
84%
FF 38
ESR
66%
FF
Optimisation
►proper tail calls (tail call optimisation)⬤§ 0/2 0/2 1/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2 0
Syntax
►default function parameters⬤§ 0/7 4/7 6/7 4/7 0/7 4/7 0/7 0/7 0/7 0/7 0/7 3/7 3
►rest parameters⬤§ 5/5 4/5 4/5 2/5 3/5 3/5 0/5 0/5 0/5 5/5 5/5 4/5 4
►spread (...) operator⬤§ 15/15 15/15 13/15 3/15 2/15 4/15 0/15 0/15 0/15 12/15 15/15 15/15 15
►object literal extensions⬤§ 6/6 6/6 6/6 4/6 5/6 6/6 0/6 0/6 0/6 6/6 6/6 6/6 6
►for..of loops⬤§ 7/9 9/9 9/9 6/9 2/9 3/9 0/9 0/9 0/9 6/9 7/9 7/9 7
►octal and binary literals⬤§ 4/4 2/4 4/4 2/4 0/4 4/4 2/4 0/4 0/4 4/4 4/4 4/4 4
►template strings⬤§ 5/5 4/5 4/5 3/5 4/5 3/5 0/5 0/5 0/5 4/5 5/5 5/5 5
►RegExp "y" and "u" flags⬤§ 0/4 2/4 2/4 0/4 0/4 0/4 0/4 0/4 0/4 2/4 4/4 2/4 2
►destructuring⬤§ 0/37 31/37 34/37 21/37 16/37 26/37 0/37 0/37 0/37 0/37 0/37 28/37 29
►Unicode code point escapes⬤§ 2/2 1/2 1/2 1/2 0/2 1/2 0/2 0/2 0/2 2/2 2/2 0/2 1
►new.target⬤§ 2/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2 0/2 1/2 0/2 2
Bindings
►const⬤§ 5/8 6/8 6/8 6/8 0/8 6/8 0/8 0/8 8/8 8/8 8/8 8/8 8
►let⬤§ 5/10 8/10 8/10 8/10 0/10 7/10 0/10 0/10 8/10 8/10 8/10 0/10 0/
KANGAX.GITHUB.IO/CO
MPAT-TABLE/ES6

38. GREAT RESOURCES
exploringjs.com
es6-features.org
developer.mozilla.org
You Don't Know JS: ES6 & Beyond