$30 off During Our Annual Pro Sale. View Details »

ECMAScript 6 – a tour

ECMAScript 6 – a tour

A short tour of some of the new features in ECMAScript 6. Presented at BangaloreJS.

Ankur Sethi

April 25, 2015
Tweet

More Decks by Ankur Sethi

Other Decks in Programming

Transcript

  1. ECMAScript 6 A tour

  2. The ‘let’ statement

  3. var myvar = 'global'; function f() { console.log(myvar); if (true)

    { var myvar = 'local'; } console.log(myvar); }
  4. var myvar = 'global'; function f() { console.log(myvar); if (true)

    { var myvar = 'local'; } console.log(myvar); } > undefined > local
  5. Hoisting

  6. function infiltrate() { // do something // ... var bulletCount

    = 10; // do something else // ... var handler = function() { // handle difficult things }; }
  7. function infiltrate() { var bulletCount; var handler; // do something

    // ... bulletCount = 10; // do something else // ... handler = function() { // handle difficult things }; }
  8. function f() { console.log(bulletCount); var bulletCount = 42; console.log(bulletCount); }

  9. function f() { console.log(bulletCount); var bulletCount = 42; console.log(bulletCount); }

    > undefined > 42
  10. 'use strict'; function f() { console.log(bulletCount); let bulletCount = 42;

    console.log(bulletCount); } > ReferenceError: can't access lexical declaration `bulletCount’ before initialization
  11. Function Scope

  12. function getAnswer() { if (true) { var theAnswer = 42;

    } console.log(theAnswer); }
  13. function getAnswer() { if (true) { var theAnswer = 42;

    } console.log(theAnswer); } > 42
  14. 'use strict'; function getAnswer() { if (true) { let theAnswer

    = 42; } console.log(theAnswer); } > ReferenceError: theAnswer is not defined
  15. ‘use strict’; let myvar = 'global'; function f() { console.log(myvar);

    if (true) { let myvar = 'local'; } console.log(myvar); }
  16. ‘use strict’; let myvar = 'global'; function f() { console.log(myvar);

    if (true) { let myvar = 'local'; } console.log(myvar); } > global > global
  17. ‘use strict’; let myvar = 'global'; function f() { console.log(myvar);

    if (true) { let myvar = ‘local'; console.log(myvar); } }
  18. ‘use strict’; let myvar = 'global'; function f() { console.log(myvar);

    if (true) { let myvar = ‘local'; console.log(myvar); } } > global > local
  19. Protip #1 Use ‘let’ for mutable references

  20. The ‘const’ statement

  21. 'use strict'; const theAnswer = 42; theAnswer = 87;

  22. 'use strict'; const theAnswer = 42; theAnswer = 87; >

    Exception: SyntaxError: invalid assignment to const foo
  23. 'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana'

    }; agents['Figgis'] = 'Cyril';
  24. 'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana'

    }; agents = { 'Figgis': 'Cyril' };
  25. 'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana'

    }; agents = { 'Figgis': 'Cyril' }; > Exception: SyntaxError: invalid assignment to const agents
  26. Protip #2 Use ‘const’ for immutable references

  27. Protip #3 Replace all usages of ‘var’ with either ‘let’

    or ‘const’ depending on context
  28. The array spread operator

  29. var theNumbers = [4, 8, 15]; function addThree(a, b, c)

    { return a + b + c; }
  30. var theNumbers = [4, 8, 15]; function addThree(a, b, c)

    { return a + b + c; } // ECMAScript 5 addThree.apply(null, theNumbers);
  31. var theNumbers = [4, 8, 15]; function addThree(a, b, c)

    { return a + b + c; } // ECMAScript 5 addThree.apply(null, theNumbers); // ECMAScript 6 addThree(...theNumbers);
  32. addThree(...theNumbers); addThree(4, 8, 15);

  33. var foo = [15, 16]; var theNumbers = [4, 8,

    ...foo, 23, 42]; console.log(theNumbers);
  34. > Array [ 4, 8, 15, 16, 23, 42 ]

    var foo = [15, 16]; var theNumbers = [4, 8, ...foo, 23, 42]; console.log(theNumbers);
  35. Protip #4 Replace Function.apply with the array spread operator

  36. var theNumbers = [4, 8, 15, 16, 23, 42]; var

    theNumbersCopy = [...theNumbers]; Protip #5 Use the array spread operator to copy arrays
  37. Template Strings

  38. let thing = 'piggies'; let quantity = 3; console.log(`${quantity} little

    ${thing}`); > 3 little piggies
  39. function sayHello(name) { return `Hello, ${name}!`; } console.log(sayHello('Kreiger'));

  40. function sayHello(name) { return `Hello, ${name}!`; } console.log(sayHello('Kreiger')); > Hello,

    Kreiger!
  41. let multiline = `This is a multiline string!`;

  42. for…of loops

  43. var theNumbers = [4, 8, 15, 16, 23, 42]; var

    total = 0; for (var i in theNumbers) { total += i; }
  44. var theNumbers = [4, 8, 15, 16, 23, 42]; var

    total = 0; for (var i in theNumbers) { total += i; } > “0012345”
  45. Array.prototype.sumOfSquares = function() { // Blazing fast sum of squares

    code. }; var theNumbers = [4, 8, 15]; for (var i in theNumbers) { console.log(i); }
  46. Array.prototype.sumOfSquares = function() { // Blazing fast sum of squares

    code. }; var theNumbers = [4, 8, 15]; for (var i in theNumbers) { console.log(i); } > 0 > 1 > 2 > sumOfSquares
  47. var theNumbers = [4, 8, 15, 16, 23, 42]; var

    total = 0; for (var i of theNumbers) { total += i; }
  48. var theNumbers = [4, 8, 15, 16, 23, 42]; var

    total = 0; for (var i of theNumbers) { total += i; } > 108
  49. Arrow Functions

  50. var nums = [4, 8, 15, 16, 23, 42]; //

    ECMAScript 5 var squares = nums.map(function(n) { return n * n; }); // ECMAScript 6 let squares = nums.map((n) => n * n);
  51. const squareNumber = n => n * n; const squareNumber

    = (n) => n * n; const addNumbers = a, b => a + b; // Error! const addNumbers = (a, b) => a + b; const addNumbers = (a, b) => { return a + b; };
  52. function Person() { this.age = 0; setInterval(function growUp() { this.age++;

    }, 1000); } var p = new Person();
  53. function Person() { var self = this; self.age = 0;

    setInterval(function growUp() { self.age++; }, 1000); } var p = new Person();
  54. function Person() { this.age = 0; setInterval(() => { this.age++;

    }, 1000); } var p = new Person();
  55. Computed Object Properties

  56. var p1 = new Person('Sterling', 'Archer'); var p2 = new

    Person('Lana', 'Kane'); var ages = {}; ages[p1.firstName + ' ' + p1.lastName] = 37; ages[p1.firstName + ' ' + p1.lastName] = 33; { 'Sterling Archer': 37, 'Lana Kane': 33 }
  57. let p1 = new Person('Sterling', 'Archer'); let p2 = new

    Person('Lana', 'Kane'); let ages = { [p1.firstName + ' ' + p1.lastName]: 37, [p2.firstName + ' ' + p2.lastName]: 33 }; { 'Sterling Archer': 37, 'Lana Kane': 33 }
  58. Property Value Shorthand in Object Literals

  59. var agentName = 'Sterling Archer'; var obj = { agentName:

    agentName }; { agentName: 'Sterling Archer' }
  60. const agentName = 'Sterling Archer'; const obj = { agentName

    }; { agentName: 'Sterling Archer' }
  61. Method Shorthand in Object Literals

  62. var atom = { value: 1, addValue: function (value) {

    return atom.value + value; } };
  63. const atom = { value: 1, addValue(value) { return atom.value

    + value; } };
  64. Rest Parameters

  65. function handleEvent(event) { var args = Array.slice.call(null, arguments, 1); args.forEach(function(arg)

    { // do something }); }; handleEvent('click', arg1, arg2, arg3);
  66. function handleEvent(event, ...args) { args.forEach(function(arg) { // do something });

    }; handleEvent('click', arg1, arg2, arg3);
  67. Default Parameters

  68. function frobulate(arg1, arg2) { arg1 = arg1 || 23; arg2

    = arg2 || 42; } frobulate(); frobulate(10); frobulate(10, 20);
  69. function frobulate(arg1, arg2) { if (typeof arg1 === 'undefined') {

    arg1 = 23; } if (typeof arg2 === 'undefined') { arg2 = 42; } } frobulate(); frobulate(10); frobulate(10, 20);
  70. function frobulate(arg1 = 23, arg2 = 42) { // do

    something } frobulate(); frobulate(10); frobulate(10, 20);
  71. function frobulate(arg1, arg2 = 42) { // do something }

    frobulate(); frobulate(10); frobulate(10, 20);
  72. More! • Classes • Destructuring • Generators • New data

    structures (Map, WeakMap, Set, WeakSet) • Promises • Symbols • New methods on Object, String, Array, Math, Number • Better Unicode support • Modules
  73. Use it Now Use shipping features in modern browsers https://kangax.github.io/compat-table/es6/

  74. Use it Now Use io.js https://iojs.org

  75. Use it Now Compile down to ECMAScript 5 with Babel

    http://babeljs.io
  76. contact@ankursethi.in