Ecmascript 2015 – best of new features()

ECMASCRIPT 2015BEST OF NEW FEATURES().

by / at Miłosz Sobczak @miloszsobczak

Main example source code can be found at github.com/miloszsobczak/es6-rewrite.

CLASSES

CLASSES DEFINITIONECMASCRIPT 5 OLD WAY

var Developer = function Developer(name, experience, languages) { this.name(name || ''); this.experience(experience || 0); this.languages(languages || []);}

CLASSES DEFINITIONECMASCRIPT 2015 (6)

class Developer { constructor (name, experience, languages) { this.name = name; this.experience = experience; this.languages = languages; }}

CLASSES INHERITANCEECMASCRIPT 5 OLD WAY

var PixersDeveloper = function PixersDeveloper (name, experience, languages, awesomeness 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)}

CLASSES INHERITANCEECMASCRIPT 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);}

CLASSES SUPER ACCESSECMASCRIPT 5 OLD WAY

//base class constructorDeveloper.call(this, name, experience, languages);//method accessDeveloper.prototype.method.call(this);

CLASSES SUPER ACCESSECMASCRIPT 2015 (6)

//base class constructorsuper(name, experience, languages);//method accesssuper.method()

CLASSES STATIC FUNCTIONECMASCRIPT 5 OLD WAY

PixersDeveloper.prototype.default = function () { return new PixersDeveloper('Mieszkos', 2, ['Whitespace'], -1000)}//usagevar Mieszkos = PixersDeveloper.default();

CLASSES STATIC FUNCTIONECMASCRIPT 2015 (6)

static default () { return new PixersDeveloper('Mieszkos', 2, ['Whitespace'], -1000);}//usagevar Mieszkos = PixersDeveloper.default();

CLASSES SETTER/GETTERECMASCRIPT 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 usagethis.awesomeness(10);//getter usagevar dev_awesomness = this.awesomeness();

CLASSES SETTER/GETTERECMASCRIPT 2015 (6)

set awesomeness (value = 0) { if (typeof value === 'number') { this._awesomeness = parseInt(value, 10); }}get awesomeness () { return this._awesomeness;}//setter usagethis.awesomeness = 10;//getter usagevar dev_awesomness = this.awesomeness;

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; //falsea instanceof Array; //true

CLASSES EXTENDING BUILT-INSECMASCRIPT 2015 (6)

class MyArray extends Array { constructor(...args) { super(args); }}//ex below still gives an error, but it shuldn'tclass myMath extends Math {}

MODULESAlmost* native module system.

MODULES DEFINITIONREQUIREJS OLD? WAY

define('countPoints', function (){ return function countPoints (langLength, exp) { var pointPerLanguage = 2, pointPerExp = 4;

return parseInt(langLength * pointPerLanguage, 10) + parseInt(exp * pointPerExp, 10); }});//usagerequire(['countPoints'], function(countPoints) { var points = countPoints(2, 5);});

MODULES DEFINITIONECMASCRIPT 2015 (6)

export function countPoints (langLength = 0, exp = 0) { let pointPerLanguage = 2, pointPerExp = 4;

return parseInt(langLength * pointPerLanguage, 10) + parseInt(exp * pointPerExp, 10);}//usageimport { countPoints } from 'lib/countPoints.js';points = countPoints(2, 5);

MODULES DEFINITIONECMASCRIPT 2015 (6) - CAVEATS

IT'S NOT GREAT! (FOR NOW) :)

Support by Mozilla

MODULES DEFINITIONECMASCRIPT 2015 (6) - CAVEATS

WORKAROUNDS

+ + Browersify babelify Node.js //basic gulp configurationvar fs = require('fs'), browserify = require('browserify');browserify('./script.js') .transform('babelify') .bundle() .pipe(fs.createWriteStream('bundle.js'));

//definemodule.exports = function countPoints (langLength = 0, exp = 0) {...}//useimport countPoints from 'lib/countPoints.js';

BLOCKS && SCOPE VARIABLES

BLOCKS && SCOPE VARIABLES:CONSTS

ECMASCRIPT 5 OLD WAY

//simple and cross-browser, but still writablevar PI = 3.141593;

//or complicatated and not writableObject.defineProperty(window, 'PI', { value: 3.141593, enumerable: true, writable: false, configurable: false});

BLOCKS && SCOPE VARIABLES:CONSTS

ECMASCRIPT 2015 (6) const PI = 3.141593;const PI = 1; //Uncaught TypeError: Identifier 'PI' has already been declarevar PI = 2; //3.141593

BLOCKS && SCOPE VARIABLES: LETECMASCRIPT 5 OLD WAY

var a = 2;

(function own_scope(){ var a = 3; console.log( a ); // 3})();

console.log( a ); // 2

BLOCKS && SCOPE VARIABLES: LETECMASCRIPT 2015 (6)

var a = 2;

{ let a = 3; console.log( a ); // 3}

console.log( a ); // 2

ARROW FUNCTIONS =>

ARROW FUNCTIONS: DEFINITIONECMASCRIPT 5 OLD WAY

return (function anonymus(points) { var points = points || 0; //do something with points})(countPoints(this.languages().length, this.experience()));

ARROW FUNCTIONS: DEFINITIONECMASCRIPT 2015 (6)

return ((points = 0) => { //do something with points})(countPoints(this.languages.length, this.experience));

ARROW FUNCTIONS: CURRENTOBJECT CONTEXTECMASCRIPT 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()));

ARROW FUNCTIONS: CURRENTOBJECT CONTEXTECMASCRIPT 2015 (6)

return ((points = 0) => { //do something with points return this.name + ' is a Developer';})(countPoints(this.languages.length, this.experience));

`${TEMPLATE LITERALS}`

TEMPLATE LITERALS: STRINGINTERPOLATIONECMASCRIPT 5 OLD WAY

return self.name() + ' is a ' + degree + ' Developer';

TEMPLATE LITERALS: STRINGINTERPOLATION

ECMASCRIPT 2015 (6) return ̀${this.name} is a ${degree} Developer̀;

NEW DATA STRUCTURE TYPES1. Key-value collection

MapWeakMap (object as a key)

2. Values collectionSetWeakSet (object as a key)

NEW DATA STRUCTURE TYPES: MAPECMASCRIPT 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; })();}

NEW DATA STRUCTURE TYPES: MAPECMASCRIPT 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; })());}

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

ECMAScript 5 6 7 intl non-standard compatibility table Fork 201by kangax & webbedspace Gratipay

Please note that some of these tests represent existence, not functionality or full conformance. Sort by number of features? Show obsolete platforms?

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 nameCurrentbrowser

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 38ESR

66%

FF 42

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/2

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/7

►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/5

►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/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/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/9

►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/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/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/4

►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/37

►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/2

►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/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/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/10

KANGAX.GITHUB.IO/COMPAT-TABLE/ES6

GREAT RESOURCESexploringjs.comes6-features.orgdeveloper.mozilla.orgYou Don't Know JS: ES6 & Beyond