ESCMAScript 6: Get Ready For The Future. Now

  • 1,603 views
Uploaded on

Learn about upcoming features of ECMAScript 6 that you can try out today!

Learn about upcoming features of ECMAScript 6 that you can try out today!

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,603
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
13
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Get Ready ForThe Future. NowECMAScript 6@szafranek
  • 2. July 2008ES4Dec 1999ES3
  • 3. Dec 2013Dec 2009ES5 ES6
  • 4. ES6 aka Harmony
  • 5. Backwardscompatibility
  • 6. No “bad parts”are removed
  • 7. “Better carrots”
  • 8. Superset of ES 5strict mode
  • 9. Block scope5
  • 10. hoistingvar i = 1;function b() {i = 10;for (var i = 0; i < 3; i++) {//...}}b();console.log(i);1
  • 11. hoistingvar i = 1;function b() {i = 10;for (var i = 0; i < 3; i++) {//...}}b();console.log(i); // 11
  • 12. let
  • 13. letlet
  • 14. letlet•Block scope
  • 15. letlet•Block scope•No hoisting
  • 16. letlet•Block scope•No hoisting•Fails fast
  • 17. letlet•Block scope•No hoisting•Fails fast= better var
  • 18. var i = 1;function b() {i = 10;for (let i = 0; i < 3; i++) {//...}}b();console.log(i); // 10
  • 19. var things = {};for (var i = 0; i < 3; i++) {things["fun" + i] = function() {console.log(i);};}things["fun0"](); // 3things["fun1"](); // 3things["fun2"](); // 3
  • 20. var things = {};for (var i = 0; i < 3; i++) {things["fun" + i] = (function(index) {return function() {console.log(index);};}(i));}things["fun0"](); // 0things["fun1"](); // 1things["fun2"](); // 2
  • 21. var things = {};for (var i = 0; i < 3; i++) {let index = i;things["fun" + i] = function() {console.log(index);};}things["fun0"](); // 0things["fun1"](); // 1things["fun2"](); // 2
  • 22. constconstconst pi = Math.PI;// ...pi = 10; // SyntaxError
  • 23. constfunction process() {const factor = 10;let result = 5;result *= 3;// thousands lines of code...return result * factor;}Most variables dont change over time.Using const helps spot unwanted side effects.
  • 24. constconst = better letfunction process() {const factor = 10;let result = 5;result *= 3;// thousands lines of code...return result * factor;}Most variables dont change over time.Using const helps spot unwanted side effects.
  • 25. “I am a fullconst nazinowadays”John Carmack: "I am a full const nazi nowadays, and I chide any programmer that doesn’tconst every variable and parameter that can be."http://www.phoronix.com/scan.php?page=news_item&px=MTI3NDQ
  • 26. Use let and const todaydefs.jshttp://blog.lassus.se/2013/05/defsjs.html
  • 27. Destructing10
  • 28. let point = [3, 7];let [x, y] = point;console.log(x, y);
  • 29. let primary = "red", secondary = "blue";[secondary, primary] = [primary, secondary];console.log(primary, secondary); // blue red
  • 30. let point = [3, 7, 5];let [, y] = point;console.log(y); // 7Selecting only elements you want
  • 31. let coords = {long: 11, lat: 45};let {long, lat} = coords;console.log(long, lat); // 11 45Destructing objects
  • 32. let coords = {long: 11, lat: 45};let {long: longitude,lat: latitude} = coords;console.log(longitude, latitude); // 11 45Mapping to custom names
  • 33. Spread operatorlet numbers = [3, 10, 7];Math.max(...numbers); // 10
  • 34. let nodeArray = [...document.querySelectorAll("p")];var nodeList = document.querySelectorAll("p");var nodeArray =[].slice.apply(nodeList);ES6ES5
  • 35. Rest parametersfunction tax(rate, ...values) {//...}tax(0.03, 50, 78, 100); // [1.5, 2.34, 3]15
  • 36. function tax(rate, ...values) {let taxedValues = [];for (let value of values) {taxedValues.push(rate * value);}return taxedValues;}function tax() {var args = Array.prototype.slice.call(arguments);var rate = args[0];var values = args.splice(1);var taxedValues = [];for (var i = 0; i < values.length; i++) {var value = values[i];taxedValues.push(rate * value);};return taxedValues;}ES5ES6
  • 37. function tax(rate, ...values) {let taxedValues = [];for (let value of values) {taxedValues.push(rate * value);}return taxedValues;}function tax() {var args = Array.prototype.slice.call(arguments);var rate = args[0];var values = args.splice(1);var taxedValues = [];for (var i = 0; i < values.length; i++) {var value = values[i];taxedValues.push(rate * value);};return taxedValues;}ES5ES6
  • 38. Iteratorslet elements = ["one", "two", "three"];elements.customProperty = "Wont show up";for (let element of elements) {console.log(element);}// "one" "two" "three"
  • 39. Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};for (var key in obj) {if (obj.hasOwnProperty(key)) {console.log(key, obj[key]);}}Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};import items from @"iter";for (let [key, value] of items(obj) {console.log(key, value);}ES6ES5
  • 40. built-in iteratorskeys(obj);values(obj);items(obj);allKeys(obj);allValues(obj);allItems(obj);
  • 41. Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};import items from @"iter";for (let [key, value] of items(obj) {console.log(key, value);}
  • 42. Modulesin progress!18
  • 43. module Map {export function zoom(coords) {console.log("zooming to ", coords);};export function pan(coords) {console.log("panning to ", coords);};export var defaultMode = "satellite";};import {zoom, defaultMode} from Map;zoom({lat: 30, long: 10});
  • 44. module loadersLoader.load(map.js, function (map) {map.zoom({lat: 30, long: 10});}, errorCallback);
  • 45. loader pipelineLoader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();Default pipeline can be customized.In translation phase CoffeeScript can be translated to JS.In link phase AMD or node modules can be imported: such modules can be interoperable withES6 modules.https://gist.github.com/wycats/51c96e3adcdb3a68cbc3
  • 46. loader pipelineLoader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();// CoffeeScript!Default pipeline can be customized.In translation phase CoffeeScript can be translated to JS.In link phase AMD or node modules can be imported: such modules can be interoperable withES6 modules.https://gist.github.com/wycats/51c96e3adcdb3a68cbc3
  • 47. loader pipelineLoader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();// CoffeeScript!// AMD, Common.js!Default pipeline can be customized.In translation phase CoffeeScript can be translated to JS.In link phase AMD or node modules can be imported: such modules can be interoperable withES6 modules.https://gist.github.com/wycats/51c96e3adcdb3a68cbc3
  • 48. function tax(rate, ...values) {let taxedValues = [];for (let value of values) {taxedValues.push(rate * value);}return taxedValues;}
  • 49. Arrow functionsfunction tax(rate, ...values) {return values.map(value => rate * value);}
  • 50. lexical thisfunction Greeter() {this.name = "jsDay";this.hello = function() {console.log("Hello " + this.name);}}var greet = new Greeter();setTimeout(greet.hello.bind(greet), 1000);ES5
  • 51. function Greeter() {this.name = "jsDay";this.hello = function() {console.log("Hello " + this.name);}}var greet = new Greeter();setTimeout(greet.hello.bind(greet), 1000);ES5function Greeter() {this.name = "jsDay";this.hello = () => console.log("Hello " + this.name)}var greet = new Greeter();setTimeout(greet.hello, 1000);ES6
  • 52. Last but not least...20
  • 53. Classes
  • 54. function Vehicle(name) {this.name = name;}Vehicle.prototype.drive = function () {return "Wrooom";};// Inheritancefunction Car(name, maxSpeed) {Vehicle.call(this, name);this.maxSpeed = maxSpeed;}Car.prototype = Object.create(Vehicle.prototype);Car.prototype.constructor = Car;Car.prototype.drive = function () {return Vehicle.prototype.drive.call(this) + " at " +this.maxSpeed;};
  • 55. class Vehicle {constructor(name) {this.name = name;}drive() {return "Wrooom";}}// Inheritanceclass Car extends Vehicle {constructor(name, maxSpeed) {super.constructor(name);this.maxSpeed = maxSpeed;}drive() {return super.drive() + " at " + this.maxSpeed;}}
  • 56. ClassesDestructingBlock scopeModulesIteratorsSpread operatorRest parametersArrow functions
  • 57. MapsPromises WeakMapsSetsUnicodeProxiesBinary dataTail callsGeneratorsTemplate stringsAPI improvementsComprehensions
  • 58. ES6 today
  • 59. Firefox Nightly*Some features are not implemented as in the recent version of the spec, e.g. let.
  • 60. Chrome Canaryabout:flags
  • 61. node --harmony
  • 62. Thank you!@szafranekwww.2ality.comwww.brendaneich.comkangax.github.io/es5-compat-table/es6
  • 63. Photo creditsQuakeConcloud2013Monty Pythoniluvgadgets1