ECMAScript 6 – a tour

ECMAScript 6 – a tour

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

58ee5dea31e2728e65099cc03c694d8e?s=128

Ankur Sethi

April 25, 2015
Tweet

Transcript

  1. 3.

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

    { var myvar = 'local'; } console.log(myvar); }
  2. 4.

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

    { var myvar = 'local'; } console.log(myvar); } > undefined > local
  3. 6.

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

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

    function infiltrate() { var bulletCount; var handler; // do something

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

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

    console.log(bulletCount); } > ReferenceError: can't access lexical declaration `bulletCount’ before initialization
  6. 13.
  7. 14.

    'use strict'; function getAnswer() { if (true) { let theAnswer

    = 42; } console.log(theAnswer); } > ReferenceError: theAnswer is not defined
  8. 15.

    ‘use strict’; let myvar = 'global'; function f() { console.log(myvar);

    if (true) { let myvar = 'local'; } console.log(myvar); }
  9. 16.

    ‘use strict’; let myvar = 'global'; function f() { console.log(myvar);

    if (true) { let myvar = 'local'; } console.log(myvar); } > global > global
  10. 17.

    ‘use strict’; let myvar = 'global'; function f() { console.log(myvar);

    if (true) { let myvar = ‘local'; console.log(myvar); } }
  11. 18.

    ‘use strict’; let myvar = 'global'; function f() { console.log(myvar);

    if (true) { let myvar = ‘local'; console.log(myvar); } } > global > local
  12. 22.

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

    Exception: SyntaxError: invalid assignment to const foo
  13. 25.

    'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana'

    }; agents = { 'Figgis': 'Cyril' }; > Exception: SyntaxError: invalid assignment to const agents
  14. 27.
  15. 30.

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

    { return a + b + c; } // ECMAScript 5 addThree.apply(null, theNumbers);
  16. 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);
  17. 33.

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

    ...foo, 23, 42]; console.log(theNumbers);
  18. 34.

    > Array [ 4, 8, 15, 16, 23, 42 ]

    var foo = [15, 16]; var theNumbers = [4, 8, ...foo, 23, 42]; console.log(theNumbers);
  19. 36.

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

    theNumbersCopy = [...theNumbers]; Protip #5 Use the array spread operator to copy arrays
  20. 43.

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

    total = 0; for (var i in theNumbers) { total += i; }
  21. 44.

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

    total = 0; for (var i in theNumbers) { total += i; } > “0012345”
  22. 45.

    Array.prototype.sumOfSquares = function() { // Blazing fast sum of squares

    code. }; var theNumbers = [4, 8, 15]; for (var i in theNumbers) { console.log(i); }
  23. 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
  24. 47.

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

    total = 0; for (var i of theNumbers) { total += i; }
  25. 48.

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

    total = 0; for (var i of theNumbers) { total += i; } > 108
  26. 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);
  27. 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; };
  28. 53.

    function Person() { var self = this; self.age = 0;

    setInterval(function growUp() { self.age++; }, 1000); } var p = new Person();
  29. 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 }
  30. 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 }
  31. 59.

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

    agentName }; { agentName: 'Sterling Archer' }
  32. 60.
  33. 62.

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

    return atom.value + value; } };
  34. 65.
  35. 68.

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

    = arg2 || 42; } frobulate(); frobulate(10); frobulate(10, 20);
  36. 69.

    function frobulate(arg1, arg2) { if (typeof arg1 === 'undefined') {

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

    function frobulate(arg1 = 23, arg2 = 42) { // do

    something } frobulate(); frobulate(10); frobulate(10, 20);
  38. 71.

    function frobulate(arg1, arg2 = 42) { // do something }

    frobulate(); frobulate(10); frobulate(10, 20);
  39. 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