$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

    View Slide

  2. The ‘let’ statement

    View Slide

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

    View Slide

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

    View Slide

  5. Hoisting

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. 'use strict';
    function f() {
    console.log(bulletCount);
    let bulletCount = 42;
    console.log(bulletCount);
    }
    > ReferenceError: can't access
    lexical declaration `bulletCount’
    before initialization

    View Slide

  11. Function Scope

    View Slide

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

    View Slide

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

    View Slide

  14. 'use strict';
    function getAnswer() {
    if (true) {
    let theAnswer = 42;
    }
    console.log(theAnswer);
    }
    > ReferenceError: theAnswer is
    not defined

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. Protip #1
    Use ‘let’ for mutable references

    View Slide

  20. The ‘const’ statement

    View Slide

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

    View Slide

  22. 'use strict';
    const theAnswer = 42;
    theAnswer = 87;
    > Exception: SyntaxError: invalid
    assignment to const foo

    View Slide

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

    View Slide

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

    View Slide

  25. 'use strict';
    const agents = {
    'Archer': 'Sterling',
    'Kane': 'Lana'
    };
    agents = { 'Figgis': 'Cyril' };
    > Exception: SyntaxError: invalid
    assignment to const agents

    View Slide

  26. Protip #2
    Use ‘const’ for immutable references

    View Slide

  27. Protip #3
    Replace all usages of ‘var’ with either ‘let’ or ‘const’
    depending on context

    View Slide

  28. The array spread
    operator

    View Slide

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

    View Slide

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

    View Slide

  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);

    View Slide

  32. addThree(...theNumbers);
    addThree(4, 8, 15);

    View Slide

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

    View Slide

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

    View Slide

  35. Protip #4
    Replace Function.apply with the array spread operator

    View Slide

  36. var theNumbers = [4, 8, 15, 16, 23, 42];
    var theNumbersCopy = [...theNumbers];
    Protip #5
    Use the array spread operator to copy arrays

    View Slide

  37. Template Strings

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. for…of loops

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  49. Arrow Functions

    View Slide

  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);

    View Slide

  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;
    };

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  55. Computed Object
    Properties

    View Slide

  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
    }

    View Slide

  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
    }

    View Slide

  58. Property Value Shorthand
    in Object Literals

    View Slide

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

    View Slide

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

    View Slide

  61. Method Shorthand in
    Object Literals

    View Slide

  62. var atom = {
    value: 1,
    addValue: function (value) {
    return atom.value + value;
    }
    };

    View Slide

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

    View Slide

  64. Rest Parameters

    View Slide

  65. function handleEvent(event) {
    var args =
    Array.slice.call(null, arguments, 1);
    args.forEach(function(arg) {
    // do something
    });
    };
    handleEvent('click', arg1, arg2, arg3);

    View Slide

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

    View Slide

  67. Default Parameters

    View Slide

  68. function frobulate(arg1, arg2) {
    arg1 = arg1 || 23;
    arg2 = arg2 || 42;
    }
    frobulate();
    frobulate(10);
    frobulate(10, 20);

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  73. Use it Now
    Use shipping features in modern browsers
    https://kangax.github.io/compat-table/es6/

    View Slide

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

    View Slide

  75. Use it Now
    Compile down to ECMAScript 5 with Babel
    http://babeljs.io

    View Slide

  76. View Slide