0
2013JavaScript revolutionNew syntax ( sugar of course! )              &      standard library
Who I am?       Kamil GałuszkaDjango / Objective-C / Python WorldJavaScript is only a hobby (for now)       @galuszkak    ...
Introduction & Inspiration
JavaScript, JS, ECMAScript, ES● ECMAScript 3 ( 1999 )● ECMAScript 4 ( incompatible with third version  2005 )● ECMAScript ...
Funny Facts● ES 5.1 standard == 243 pages● JavaScript: The Definitive Guide by David  Flanagan (6th edition)== 1078 pages●...
Warm Upfalse == "0"               false === "0"false == "false"           null === undefinednull == undefined          "" ...
ES.Next vs ES.Harmony        ES.Next === ECMAScript 6ES 6 is fully compatible with ES5 (strict mode)ES.Harmony in next ver...
Block ScopeTwo new significant keywords:let         lock scoped variableconst       read-only variable. (couldnt be hided ...
Block ScopeSolution ES 5   var result = [];   for (var length = 10; length--;){      var len = length;      result[len] = ...
Block ScopeSolution ES 6 (Cleaner, nicer, AWESOME!)   var result = [];   for (var length = 10; length--;){      let len = ...
Shorthand Object LiteralsES 5 version:              ES 6 version:var cat = "Molly";         var cat = "Molly";var dog = "R...
Shorthand Object Literalsfunction Animal(name){     this.name = name;     this.age = 0;}Animal.prototype = {  roar(text){ ...
Destructing Assignments      (extraction from objects, swap variables)var {parse, stringify} = JSON;var [, areaCode, local...
Destructuring Nested Objectsvar poets = [{        "name": "T.S. Eliot",        "works": [{                 "title": "The L...
Destructuring Nested ObjectsES 5 VERSION ( really hard to remember )var author = poets[0][name];var title = poets[0][works...
Destructuring Nested ObjectsES 6 version (AWESOME !)  var [{name: author, works: [, {title,  date}]}] = poets;  // Select ...
Default parameters// ES 5function Person(name, age){   this.name = name || "Anonim";   this.age = age || 0;}// ES 6functio...
...rest parametersjs>function f(a, b, ...r) {   print(Array.isArray(r));   return r.concat(a, b);}js>f(1, 2)true[1, 2]js>f...
...spread//ES 5 merging arrayjs> var a = [1, 2][3, 4, 5]js> var b = [3, 4, 5][1, 2]js> a = a.concat(b)[1, 2, 3, 4, 5]//ES ...
Array Comprehensionsvar arr =[ x for (x of a) if (x.color === ‘blue’) ]var arr = [ square(x) for (x of [1,2,3,4,5]) ]     ...
Modulesmodule Car {  // import …  // export …}       Example by Addy Osmani http://addyosmani.com/blog/a-few-new-       th...
Modulesmodule Car {   // Internal   var licensePlateNo = 556-343;   // External   export function drive(speed, direction) ...
Imports      (Yes! YES! No requirejs or AMD needed)import       "crypto"       as       crypto;import { encrypt, decrypt }...
Classesmodule widgets {  // ...  class DropDownButton extends Widget {    constructor(attributes) {      super(attributes)...
Classesvar widgets = (function(global) {  function DropDownButton(attributes) {    Widget.call(this, attributes);    this....
Compatibility Matrixhttp://kangax.github.com/es5-compat-table/es6/
Thanks to...Douglas Crockford http://javascript.crockford.com/Kit Cambridge http://kitcambridge.be/(His speech: http://www...
Upcoming SlideShare
Loading in...5
×

JavaScript - new features in ECMAScript 6

16,070

Published on

Published in: Technology
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,070
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
88
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript - new features in ECMAScript 6"

  1. 1. 2013JavaScript revolutionNew syntax ( sugar of course! ) & standard library
  2. 2. Who I am? Kamil GałuszkaDjango / Objective-C / Python WorldJavaScript is only a hobby (for now) @galuszkak http://solution4future.com
  3. 3. Introduction & Inspiration
  4. 4. JavaScript, JS, ECMAScript, ES● ECMAScript 3 ( 1999 )● ECMAScript 4 ( incompatible with third version 2005 )● ECMAScript 5 ( 2009 )● ECMAScript 5.1 ( 2011 )● TC39 - Committee for Standardization
  5. 5. Funny Facts● ES 5.1 standard == 243 pages● JavaScript: The Definitive Guide by David Flanagan (6th edition)== 1078 pages● Draft of standard ES 6.0 == 421 pages● JavaScript: The Definitive Guide by David Flanagan (7th edition)== ? pages ;)
  6. 6. Warm Upfalse == "0" false === "0"false == "false" null === undefinednull == undefined "" === 0"" == 0NaN === NaN6.toString();" nt" == 0;obj = {x:10, y:20};delete obj.y;obj.y == null obj.y === nullobj.y == undefined obj.y === undefined
  7. 7. ES.Next vs ES.Harmony ES.Next === ECMAScript 6ES 6 is fully compatible with ES5 (strict mode)ES.Harmony in next versions of ECMAScript
  8. 8. Block ScopeTwo new significant keywords:let lock scoped variableconst read-only variable. (couldnt be hided by other variable etc.)Typical problem in ES 5 var result = []; for (var length = 10; length--;){ var len = length; result[len] = function(){ return len; } } result[5]() // 0 result[2]() // 0WHY?
  9. 9. Block ScopeSolution ES 5 var result = []; for (var length = 10; length--;){ var len = length; result[len] = (function(dlugosc){ return function(){ return dlugosc; } })(len) } result[5]() // 5 result[2]() // 2use closure
  10. 10. Block ScopeSolution ES 6 (Cleaner, nicer, AWESOME!) var result = []; for (var length = 10; length--;){ let len = length; result[len] = function(){ return len;} } result[5]() // 5 result[2]() // 2
  11. 11. Shorthand Object LiteralsES 5 version: ES 6 version:var cat = "Molly"; var cat = "Molly";var dog = "Rex"; var dog = "Rex";var pets = { var pets = {cat,dog} cat: cat, dog: dog,}
  12. 12. Shorthand Object Literalsfunction Animal(name){ this.name = name; this.age = 0;}Animal.prototype = { roar(text){ //old version was function roar(text) return `Animal ${this.name} roars:${text}` // template syntax }}
  13. 13. Destructing Assignments (extraction from objects, swap variables)var {parse, stringify} = JSON;var [, areaCode, local] = /^(d{3})-(d{3}-d{4})$/.exec("048-032-7777");[left, right] = [right, left];
  14. 14. Destructuring Nested Objectsvar poets = [{ "name": "T.S. Eliot", "works": [{ "title": "The Love Song", "date": 1915 }, { "title": "Rhapsody", "date": 1917 }] }, { "name": "Ezra Pound", "works": [{ "title": "Ripostes", "date": 1912 }] }];
  15. 15. Destructuring Nested ObjectsES 5 VERSION ( really hard to remember )var author = poets[0][name];var title = poets[0][works][1][title];var date = poets[0][works][1][date];
  16. 16. Destructuring Nested ObjectsES 6 version (AWESOME !) var [{name: author, works: [, {title, date}]}] = poets; // Select first author and his second book and store it in variables author, title, date `"${title}", by ${author}, was published in ${date}.` // Template creating string from this variables.Rhapsody, by T.S. Eliot, was published in 1917
  17. 17. Default parameters// ES 5function Person(name, age){ this.name = name || "Anonim"; this.age = age || 0;}// ES 6function Person(name="Anonim", age=0){ this.name = name; this.age = 0;}
  18. 18. ...rest parametersjs>function f(a, b, ...r) { print(Array.isArray(r)); return r.concat(a, b);}js>f(1, 2)true[1, 2]js>f(1, 2, 3)true[3, 1, 2]js>f(1, 2, 3, 4, 5)true[3, 4, 5, 1, 2]
  19. 19. ...spread//ES 5 merging arrayjs> var a = [1, 2][3, 4, 5]js> var b = [3, 4, 5][1, 2]js> a = a.concat(b)[1, 2, 3, 4, 5]//ES 6 merging array (AWESOME!)js> var a = [3, 4, 5][3, 4, 5]js> var b = [1, 2, ...a][1, 2, 3, 4, 5]
  20. 20. Array Comprehensionsvar arr =[ x for (x of a) if (x.color === ‘blue’) ]var arr = [ square(x) for (x of [1,2,3,4,5]) ] Example by Addy Osmani http://addyosmani.com/blog/a-few-new-thin to-javascript/
  21. 21. Modulesmodule Car { // import … // export …} Example by Addy Osmani http://addyosmani.com/blog/a-few-new- things-coming-to-javascript/
  22. 22. Modulesmodule Car { // Internal var licensePlateNo = 556-343; // External export function drive(speed, direction) { console.log(details:, speed, direction); } export module engine{ export function check() { } }}; Example by Addy Osmani http://addyosmani.com/blog/a-few-new- things-coming-to-javascript/
  23. 23. Imports (Yes! YES! No requirejs or AMD needed)import "crypto" as crypto;import { encrypt, decrypt } from "crypto";import { encrypt: enc } from "crypto";import {drive, engine} from Car; Example by Addy Osmani http://addyosmani.com/blog/a-few-new- things-coming-to-javascript/
  24. 24. Classesmodule widgets { // ... class DropDownButton extends Widget { constructor(attributes) { super(attributes); this.buildUI(); } buildUI() { this.domNode.onclick = function(){ // ... }; } } Example by Addy Osmani http://addyosmani.com/blog/a-few-new-} things-coming-to-javascript/
  25. 25. Classesvar widgets = (function(global) { function DropDownButton(attributes) { Widget.call(this, attributes); this.buildUI(); } DropDownButton.prototype = Object.create(Widget.prototype, { constructor: { value: DropDownButton }, buildUI: { value: function(e) { this.domNode.onclick = function(e) { // ... } Example by Addy Osmani http://addyosmani.com/blog/a-few-new-}}})})(this); things-coming-to-javascript/
  26. 26. Compatibility Matrixhttp://kangax.github.com/es5-compat-table/es6/
  27. 27. Thanks to...Douglas Crockford http://javascript.crockford.com/Kit Cambridge http://kitcambridge.be/(His speech: http://www.youtube.com/watch?v=Dt0f2XdvriQ)TC39Addy Osmani http://addyosmani.com/blog/a-few-new-things-coming-to-javascript/
  1. A particular slide catching your eye?

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

×