Download - ESWow! - Intro to JavaScript ES6
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?