0
Get Ready ForThe Future. NowECMAScript 6@szafranek
July 2008ES4Dec 1999ES3
Dec 2013Dec 2009ES5 ES6
ES6 aka Harmony
Backwardscompatibility
No “bad parts”are removed
“Better carrots”
Superset of ES 5strict mode
Block scope5
hoistingvar i = 1;function b() {i = 10;for (var i = 0; i < 3; i++) {//...}}b();console.log(i);1
hoistingvar i = 1;function b() {i = 10;for (var i = 0; i < 3; i++) {//...}}b();console.log(i); // 11
let
letlet
letlet•Block scope
letlet•Block scope•No hoisting
letlet•Block scope•No hoisting•Fails fast
letlet•Block scope•No hoisting•Fails fast= better var
var i = 1;function b() {i = 10;for (let i = 0; i < 3; i++) {//...}}b();console.log(i); // 10
var things = {};for (var i = 0; i < 3; i++) {things["fun" + i] = function() {console.log(i);};}things["fun0"](); // 3thing...
var things = {};for (var i = 0; i < 3; i++) {things["fun" + i] = (function(index) {return function() {console.log(index);}...
var things = {};for (var i = 0; i < 3; i++) {let index = i;things["fun" + i] = function() {console.log(index);};}things["f...
constconstconst pi = Math.PI;// ...pi = 10; // SyntaxError
constfunction process() {const factor = 10;let result = 5;result *= 3;// thousands lines of code...return result * factor;...
constconst = better letfunction process() {const factor = 10;let result = 5;result *= 3;// thousands lines of code...retur...
“I am a fullconst nazinowadays”John Carmack: "I am a full const nazi nowadays, and I chide any programmer that doesn’tcons...
Use let and const todaydefs.jshttp://blog.lassus.se/2013/05/defsjs.html
Destructing10
let point = [3, 7];let [x, y] = point;console.log(x, y);
let primary = "red", secondary = "blue";[secondary, primary] = [primary, secondary];console.log(primary, secondary); // bl...
let point = [3, 7, 5];let [, y] = point;console.log(y); // 7Selecting only elements you want
let coords = {long: 11, lat: 45};let {long, lat} = coords;console.log(long, lat); // 11 45Destructing objects
let coords = {long: 11, lat: 45};let {long: longitude,lat: latitude} = coords;console.log(longitude, latitude); // 11 45Ma...
Spread operatorlet numbers = [3, 10, 7];Math.max(...numbers); // 10
let nodeArray = [...document.querySelectorAll("p")];var nodeList = document.querySelectorAll("p");var nodeArray =[].slice....
Rest parametersfunction tax(rate, ...values) {//...}tax(0.03, 50, 78, 100); // [1.5, 2.34, 3]15
function tax(rate, ...values) {let taxedValues = [];for (let value of values) {taxedValues.push(rate * value);}return taxe...
function tax(rate, ...values) {let taxedValues = [];for (let value of values) {taxedValues.push(rate * value);}return taxe...
Iteratorslet elements = ["one", "two", "three"];elements.customProperty = "Wont show up";for (let element of elements) {co...
Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};for (var key in obj) {if (obj.hasOwn...
built-in iteratorskeys(obj);values(obj);items(obj);allKeys(obj);allValues(obj);allItems(obj);
Object.prototype.dontDoIt = "bwahaha";var obj = {name: "Chris", surname: "Szafranek"};import items from @"iter";for (let [...
Modulesin progress!18
module Map {export function zoom(coords) {console.log("zooming to ", coords);};export function pan(coords) {console.log("p...
module loadersLoader.load(map.js, function (map) {map.zoom({lat: 30, long: 10});}, errorCallback);
loader pipelineLoader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();Default pipeline can be...
loader pipelineLoader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();// CoffeeScript!Default...
loader pipelineLoader.normalize();Loader.resolve();Loader.fetch();Loader.translate();Loader.link();// CoffeeScript!// AMD,...
function tax(rate, ...values) {let taxedValues = [];for (let value of values) {taxedValues.push(rate * value);}return taxe...
Arrow functionsfunction tax(rate, ...values) {return values.map(value => rate * value);}
lexical thisfunction Greeter() {this.name = "jsDay";this.hello = function() {console.log("Hello " + this.name);}}var greet...
function Greeter() {this.name = "jsDay";this.hello = function() {console.log("Hello " + this.name);}}var greet = new Greet...
Last but not least...20
Classes
function Vehicle(name) {this.name = name;}Vehicle.prototype.drive = function () {return "Wrooom";};// Inheritancefunction ...
class Vehicle {constructor(name) {this.name = name;}drive() {return "Wrooom";}}// Inheritanceclass Car extends Vehicle {co...
ClassesDestructingBlock scopeModulesIteratorsSpread operatorRest parametersArrow functions
MapsPromises WeakMapsSetsUnicodeProxiesBinary dataTail callsGeneratorsTemplate stringsAPI improvementsComprehensions
ES6 today
Firefox Nightly*Some features are not implemented as in the recent version of the spec, e.g. let.
Chrome Canaryabout:flags
node --harmony
Thank you!@szafranekwww.2ality.comwww.brendaneich.comkangax.github.io/es5-compat-table/es6
Photo creditsQuakeConcloud2013Monty Pythoniluvgadgets1
ESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. Now
ESCMAScript 6: Get Ready For The Future. Now
Upcoming SlideShare
Loading in...5
×

ESCMAScript 6: Get Ready For The Future. Now

1,800

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
1,800
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×