ESWow!A overly-broad overview of JavaScript ES6

ES6 Background

ECMAScriptDecember 1995: JavaScript announced by SunMarch 1996: Shipped in Netscape Navigator 2.0November 1996: Netscape presents Ecma-262 to ECMA International

European Computer Manufacturers AssociationFAT12/FAT16CD-ROMC# language specECMAScriptJSON

June 1997: ECMAScript v1 is adopted

ES VersionsV1 - 1997V2 - 1998V3 - 1999

Add regex, try/catchV4 - N/A

AbandonedV5 - 2009

Adds “strict mode”, JSON support, reflectionV6 - 2015

Woohoo!V7 - 2016

Array.prototype.includes(), **

ESPanorama

The use it now features

Block-scoped variables: let, const

if(true) { var answer = 42;}

answer;>> 42

if(true) { let answer = 42;}

answer;>> ReferenceError: answer is not defined

ES5 ES6

Self-invoking functions

(function() { console.log(“hi”);})();

{ console.log(“hi”);}

ES5 ES6

Arrow functions

[1, 2, 3, 4, 5].map(function(num) { return num * 2;});

-------

this.thing = “thing”;[1, 2].forEach(function() { console.log(this.thing);});

>> undefined>> undefined

[1, 2, 3, 4, 5].map(num => num * 2);

[1, 2, 3, 4].map((number, index) => { return number * index;});

-------

this.thing = “thing”;[1, 2].forEach(() => { console.log(this.thing);});

>> thing>> thing

ES5 ES6

Method properties

var log = { info: function(message) { console.log("INFO: " + message); },

warn: function(message) { console.log("WARN: " + message); }};

log.info(“ES6”);>> INFO: ES6

var log = { info(message) { console.log("INFO: " + message); },

warn(message) { console.log("WARN: " + message); }};

log.info(“ES6”);>> INFO: ES6

ES5 ES6

Computed property names

var object = {};object[4 + 2] = “6”;{ 6: “6” }

var object = { [4 + 2]: “6”};{ 6: “6” }

ES5 ES6

Property shorthand

var answer = 42;{ answer: answer };>> { answer: 42 }

var answer = 42;{ answer };>> { answer: 42}

ES5 ES6

Array.prototype.includes()

var array = [1, 2, 3, 4, 5];

function includes(element, array) { Return array.indexOf(element) !== -1;}

includes(3, array);>> true

var array = [1, 2, 3, 4, 5];

array.includes(3);>> true

ES5 ES6

String.prototype.includes()

var string = “Hi team”;

Function includes(string, substring) { return string.indexOf(substring) !== -1;}

includes(string, “team”);>> true

var string = “Hi team”;

string.includes(“team”);>> true

ES5 ES6

For… of

Var array = [1, 2, 3];

for(var i = 0; i < array.length; i++) { console.log(array[i]);}

>> 1>> 2>> 3

Var array = [1, 2, 3];

for(let number of array) { console.log(number);}

>> 1>> 2>> 3

ES5 ES6

Object.assign()

function assign() { var target = arguments[0]; var sources = Array .prototype .slice .call(arguments, 1);

sources.forEach(function(source) { for(var property in source) { if(source.hasOwnProperty(property)) { target[property] = source[property]; } } });

return target;};assign({}, {hi: 1}, {bye: 2});>> { hi: 1, bye: 2 }

Object.assign({}, { hi: 1 }, { bye: 2 })>> { hi: 1, bye: 2 }

ES5 ES6

The ruby rip-off features

String interpolationlet name = “Rick”;`Hi ${name}`>> Hi Rick

Array.prototype.find()[1, 2, 3, 4].find(num => num === 2);>> 2

String.prototype.repeat()“hi”.repeat(5);>> hihihihihi

Fun fact:“5” * 2>> 10

The worth consideration features

Worth considerationNumber.EPSILONSet/WeakSetMap/WeakMapClass syntaxGetters/settersimport

The crazytown features

Proxyinglet object = { person: "rick"};

let proxy = new Proxy(object, { get(target, name) { return "hi " + target[name]; }});

object.person"rick">> proxy.person"hi rick";

Symbolslet name = Symbol();let type = Symbol();

let object = {};object[name] = "RicksObject";object[type] = "Object";

object>> {}

object.nameundefined

object[name]>> "RicksObject"

Unicode regex

/\u{1F4BB}/u.test(" ")💻>> true

Deploying ES6 at Panorama

Babel

sprockets-es6

ESQuestions?