ESCMAScript 6: Get Ready For The Future. Now

2,262 views
2,106 views

Published on

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

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,262
On SlideShare
0
From Embeds
0
Number of Embeds
214
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

ESCMAScript 6: Get Ready For The Future. Now

  1. 1. Get Ready ForThe Future. NowECMAScript 6@szafranek
  2. 2. July 2008ES4Dec 1999ES3
  3. 3. Dec 2013Dec 2009ES5 ES6
  4. 4. ES6 aka Harmony
  5. 5. Backwardscompatibility
  6. 6. No “bad parts”are removed
  7. 7. “Better carrots”
  8. 8. Superset of ES 5strict mode
  9. 9. Block scope5
  10. 10. hoistingvar i = 1;function b() {i = 10;for (var i = 0; i < 3; i++) {//...}}b();console.log(i);1
  11. 11. hoistingvar i = 1;function b() {i = 10;for (var i = 0; i < 3; i++) {//...}}b();console.log(i); // 11
  12. 12. let
  13. 13. letlet
  14. 14. letlet•Block scope
  15. 15. letlet•Block scope•No hoisting
  16. 16. letlet•Block scope•No hoisting•Fails fast
  17. 17. letlet•Block scope•No hoisting•Fails fast= better var
  18. 18. var i = 1;function b() {i = 10;for (let i = 0; i < 3; i++) {//...}}b();console.log(i); // 10
  19. 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. 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. 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. 22. constconstconst pi = Math.PI;// ...pi = 10; // SyntaxError
  23. 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. 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. 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. 26. Use let and const todaydefs.jshttp://blog.lassus.se/2013/05/defsjs.html
  27. 27. Destructing10
  28. 28. let point = [3, 7];let [x, y] = point;console.log(x, y);
  29. 29. let primary = "red", secondary = "blue";[secondary, primary] = [primary, secondary];console.log(primary, secondary); // blue red
  30. 30. let point = [3, 7, 5];let [, y] = point;console.log(y); // 7Selecting only elements you want
  31. 31. let coords = {long: 11, lat: 45};let {long, lat} = coords;console.log(long, lat); // 11 45Destructing objects
  32. 32. let coords = {long: 11, lat: 45};let {long: longitude,lat: latitude} = coords;console.log(longitude, latitude); // 11 45Mapping to custom names
  33. 33. Spread operatorlet numbers = [3, 10, 7];Math.max(...numbers); // 10
  34. 34. let nodeArray = [...document.querySelectorAll("p")];var nodeList = document.querySelectorAll("p");var nodeArray =[].slice.apply(nodeList);ES6ES5
  35. 35. Rest parametersfunction tax(rate, ...values) {//...}tax(0.03, 50, 78, 100); // [1.5, 2.34, 3]15
  36. 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. 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. 38. Iteratorslet elements = ["one", "two", "three"];elements.customProperty = "Wont show up";for (let element of elements) {console.log(element);}// "one" "two" "three"
  39. 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. 40. built-in iteratorskeys(obj);values(obj);items(obj);allKeys(obj);allValues(obj);allItems(obj);
  41. 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. 42. Modulesin progress!18
  43. 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. 44. module loadersLoader.load(map.js, function (map) {map.zoom({lat: 30, long: 10});}, errorCallback);
  45. 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. 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. 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. 48. function tax(rate, ...values) {let taxedValues = [];for (let value of values) {taxedValues.push(rate * value);}return taxedValues;}
  49. 49. Arrow functionsfunction tax(rate, ...values) {return values.map(value => rate * value);}
  50. 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. 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. 52. Last but not least...20
  53. 53. Classes
  54. 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. 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. 56. ClassesDestructingBlock scopeModulesIteratorsSpread operatorRest parametersArrow functions
  57. 57. MapsPromises WeakMapsSetsUnicodeProxiesBinary dataTail callsGeneratorsTemplate stringsAPI improvementsComprehensions
  58. 58. ES6 today
  59. 59. Firefox Nightly*Some features are not implemented as in the recent version of the spec, e.g. let.
  60. 60. Chrome Canaryabout:flags
  61. 61. node --harmony
  62. 62. Thank you!@szafranekwww.2ality.comwww.brendaneich.comkangax.github.io/es5-compat-table/es6
  63. 63. Photo creditsQuakeConcloud2013Monty Pythoniluvgadgets1

×