Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 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