eswow! - intro to javascript es6
TRANSCRIPT
![Page 1: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/1.jpg)
ESWow!A overly-broad overview of JavaScript ES6
![Page 2: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/2.jpg)
ES6 Background
![Page 3: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/3.jpg)
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
![Page 4: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/4.jpg)
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(), **
![Page 5: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/5.jpg)
ESPanorama
![Page 6: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/6.jpg)
The use it now features
![Page 7: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/7.jpg)
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
![Page 8: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/8.jpg)
Self-invoking functions
(function() { console.log(“hi”);})();
{ console.log(“hi”);}
ES5 ES6
![Page 9: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/9.jpg)
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
![Page 10: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/10.jpg)
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
![Page 11: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/11.jpg)
Computed property names
var object = {};object[4 + 2] = “6”;{ 6: “6” }
var object = { [4 + 2]: “6”};{ 6: “6” }
ES5 ES6
![Page 12: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/12.jpg)
Property shorthand
var answer = 42;{ answer: answer };>> { answer: 42 }
var answer = 42;{ answer };>> { answer: 42}
ES5 ES6
![Page 13: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/13.jpg)
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
![Page 14: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/14.jpg)
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
![Page 15: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/15.jpg)
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
![Page 16: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/16.jpg)
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
![Page 17: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/17.jpg)
The ruby rip-off features
![Page 18: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/18.jpg)
String interpolationlet name = “Rick”;`Hi ${name}`>> Hi Rick
![Page 19: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/19.jpg)
Array.prototype.find()[1, 2, 3, 4].find(num => num === 2);>> 2
![Page 20: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/20.jpg)
String.prototype.repeat()“hi”.repeat(5);>> hihihihihi
Fun fact:“5” * 2>> 10
![Page 21: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/21.jpg)
The worth consideration features
![Page 22: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/22.jpg)
Worth considerationNumber.EPSILONSet/WeakSetMap/WeakMapClass syntaxGetters/settersimport
![Page 23: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/23.jpg)
The crazytown features
![Page 24: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/24.jpg)
Proxyinglet object = { person: "rick"};
let proxy = new Proxy(object, { get(target, name) { return "hi " + target[name]; }});
object.person"rick">> proxy.person"hi rick";
![Page 25: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/25.jpg)
Symbolslet name = Symbol();let type = Symbol();
let object = {};object[name] = "RicksObject";object[type] = "Object";
object>> {}
object.nameundefined
object[name]>> "RicksObject"
![Page 26: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/26.jpg)
Unicode regex
/\u{1F4BB}/u.test(" ")💻>> true
![Page 27: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/27.jpg)
Deploying ES6 at Panorama
![Page 28: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/28.jpg)
Babel
![Page 29: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/29.jpg)
sprockets-es6
![Page 30: ESWow! - Intro to JavaScript ES6](https://reader035.vdocument.in/reader035/viewer/2022062311/58ce907f1a28ab8c3b8b55e5/html5/thumbnails/30.jpg)
ESQuestions?