Ecmascript 2015 – best of new features()

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

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

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

CLASSES INHERITANCE
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)
}

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

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

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

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

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

CLASSES SETTER/GETTER
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();

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;

CLASSES EXTENDING
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

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 {}

MODULES
Almost* native module system.

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

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

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

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';

BLOCKS && SCOPE VARIABLES:
CONSTS
//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
});

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

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

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

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

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

ARROW FUNCTIONS: CURRENT
OBJECT CONTEXT
var self = this;
return (function anonymus(points) {
var points = points || 0;
return self.name() + ' is a Developer';
})(countPoints(this.languages().length, this.experience()));

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

TEMPLATE LITERALS: STRING
INTERPOLATION
return self.name() + ' is a ' + degree + ' Developer';

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

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

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

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

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

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

Ecmascript 2015 – best of new features()

More Related Content

What's hot

What's hot (20)

Similar to Ecmascript 2015 – best of new features()

Similar to Ecmascript 2015 – best of new features() (20)

Recently uploaded

Recently uploaded (20)

Ecmascript 2015 – best of new features()