ES6 Deep Dive

A deep dive into three features of ECMAScript Edition 6: symbols, structs, and generators.

Transcript

1. Dave Herman
   ES6 Deep Dive
   Symbols, Structs, Generators
   

   View Slide

2. View Slide

3. About me
   • @littlecalculist
   • http://calculist.org
   • http://github.com/dherman
   • Mozilla Research
   • TC39
   • Also…
   

   View Slide

4. In print this December
   http://effectivejs.com
   

   View Slide

5. Symbols
   

   View Slide

6. JS property names are strings
   var obj = { foo: 42 };
   obj["foo"]; // 42
   

   View Slide

7. The all-powerful _ character
   function Dict() {
   this._entries = {};
   }
   Don’t touch me,
   I’m private!
   

   View Slide

8. When you mean business…
   __proto__
   private SO PRIVATE
   REALLY GUYS
   SOOO TOTALLY
   PRIVATE
   private!
   

   View Slide

9. Conventions are no guarantee
   function SuperClass() {
   this._data = "superclass private data";
   }
   function SubClass() {
   SuperClass.call(this);
   this._data = "subclass private data"; // collision!
   }
   SubClass.prototype = Object.create(SuperClass.prototype);
   

   View Slide

10. Closures for information hiding
    function SuperClass() {
    var data = "private data";
    this.method = function() {
    /* ... */ data /* ... */
    };
    }
    no sharing: one
    method per
    instance!
    

    View Slide

11. Introducing symbols
    

    View Slide

12. Introducing symbols
    var sym = new Symbol("data");
    

    View Slide

13. Introducing symbols
    var sym = new Symbol("data");
    function SuperClass() {
    this[sym] = "private data";
    }
    

    View Slide

14. Introducing symbols
    var sym = new Symbol("data");
    function SuperClass() {
    this[sym] = "private data";
    }
    SuperClass.prototype.method = function() {
    /* ... */ this[sym] /* ... */
    };
    

    View Slide

15. Introducing symbols
    var obj = new SuperClass();
    "data" in obj; // false
    "_data" in obj; // false
    sym in obj; // true
    

    View Slide

16. Performance
    • Engines already do string interning
    • Convertible to a fixed offset with inline caches
    

    View Slide

17. Proposal: scoped symbols
    private @sym;
    function SuperClass() {
    this.@sym = "private data";
    }
    SuperClass.prototype.method = function() {
    /* ... */ this.@sym /* ... */
    };
    

    View Slide

18. Structured binary data
    

    View Slide

19. Typed arrays
    var a = new Uint32Array(1024);
    a[17] = 42;
    

    View Slide

20. Typed arrays
    var vertices = new Float32Array([
    -1.0, -1.0, 0.0, // vertex 1
    0.0, 1.0, 0.0, // vertex 2
    1.0, -1.0, 0.0 // vertex 3
    ]);
    -1.0
    -1.0
    0.0
    0.0
    1.0
    0.0
    1.0
    -1.0
    0.0
    0
    4
    8
    12
    16
    20
    24
    28
    32
    

    View Slide

21. Structs
    var Point = struct({
    x: float32,
    y: float32,
    z: float32
    });
    var origin = new Point(0.0, 0.0, 0.0);
    origin.x; // 0.0
    origin.y; // 0.0
    

    View Slide

22. Arrays of structs
    var vertices = new Point.array([
    { x: -1.0, y: -1.0, z: 0.0 },
    { x: 0.0, y: 1.0, z: 0.0 },
    { x: 1.0, y: -1.0, z: 0.0 }
    ]);
    -1.0
    -1.0
    0.0
    0.0
    1.0
    0.0
    1.0
    -1.0
    0.0
    0
    4
    8
    12
    16
    20
    24
    28
    32
    

    View Slide

23. JIT compilers — types
    

    View Slide

24. Applications of structs
    • WebGL data
    • File and network I/O
    • Compiling other languages to JS
    

    View Slide

25. Generators
    

    View Slide

26. Lies, lies, lies
    “JS doesn’t have concurrency.”
    “JS is single-threaded so it can’t have race conditions.”
    “Event-based programming is easy.”
    

    View Slide

27. Download three files
    load("foo", function(foo) {
    load("bar", function(bar) { // why wait?
    load("baz", function(baz) {
    use([foo, bar, baz]);
    });
    });
    });
    

    View Slide

28. Download three files
    load("foo", function(foo) {
    load("bar", function(bar) { // why wait?
    load("baz", function(baz) {
    use([foo, bar, baz]);
    });
    });
    });
    

    View Slide

29. Download three files
    var files = [];
    ["foo", "bar", "baz"].forEach(function(url, i) {
    load(url, function(file) {
    files.push(file); // no!
    if (i === 3) // no!
    use(files);
    });
    });
    

    View Slide

30. Download three files
    var files = [];
    ["foo", "bar", "baz"].forEach(function(url, i) {
    load(url, function(file) {
    files[i] = file;
    if (files.length === 3) // still no!
    use(files);
    });
    });
    

    View Slide

31. Download three files
    var files = [], count = 0;
    ["foo", "bar", "baz"].forEach(function(url, i) {
    load(url, function(file) {
    files[i] = file;
    if (++count === 3)
    use(files);
    });
    });
    

    View Slide

32. JavaScript is concurrent
    Cooperative concurrency: easier, but not easy!
    Handlers run sequentially but start concurrently.
    Shared state 㱺 race conditions 㱺 pain and suffering
    

    View Slide

33. task.js: Beautiful concurrency
    spawn(function*() {
    var files = yield join(load("foo"), load("bar"), load("baz"));
    use(files);
    });
    http://taskjs.org
    

    View Slide

34. task.js: Beautiful concurrency
    spawn(function*() {
    var files = yield join(load("foo"), load("bar"), load("baz"));
    use(files);
    });
    create a task that
    can be paused
    pause!
    http://taskjs.org
    

    View Slide

35. Generator functions
    function* evenNumbers() {
    for (var next = 0; true; next += 2) {
    yield next;
    }
    }
    

    View Slide

36. Generator functions
    function* evenNumbers() {
    for (var next = 0; true; next += 2) {
    yield next;
    }
    }
    

    View Slide

37. Generator functions
    function* evenNumbers() {
    for (var next = 0; true; next += 2) {
    yield next;
    }
    }
    evenNumbers();
    ✗
    

    View Slide

38. Generator functions
    function* evenNumbers() {
    for (var next = 0; true; next += 2) {
    yield next;
    }
    }
    evenNumbers();
    ✗
    

    View Slide

39. Generators
    function* f() {
    }
    

    View Slide

40. Generators
    function* f() {
    }
    .next:
    var g = f();
    ⋮
    

    View Slide

41. Generators
    function* evenNumbers() { /* ... */ }
    var g = evenNumbers();
    g.next(); // 0
    g.next(); // 2
    g.next(); // 4
    starts out paused
    

    View Slide

42. Lazy iteration
    Dict.prototype.keys = function*() {
    for (var key in this._entries)
    yield key;
    };
    

    View Slide

43. Iterators work with for-of
    var dict = new Dict();
    // ...
    for (var key of dict.keys()) {
    console.log(key + ": " + dict.get(key));
    }
    

    View Slide

44. Pausing is powerful
    load("config.json", function(config) {
    db.lookup(JSON.parse(config).table, username, function(user) {
    load(user.id + ".png", function(avatar) {
    // ...
    });
    });
    });
    

    View Slide

45. Pausing is powerful
    load("config.json", function(config) {
    db.lookup(JSON.parse(config).table, username, function(user) {
    load(user.id + ".png", function(avatar) {
    // ...
    });
    });
    });
    later
    later
    later
    

    View Slide

46. Pausing is powerful
    load("config.json", function(config) {
    db.lookup(JSON.parse(config).table, username, function(user) {
    load(user.id + ".png", function(avatar) {
    // ...
    });
    });
    });
    later
    later
    later
    

    View Slide

47. Pausing with promises
    load("config.json")
    .then(function(config) {
    return db.lookup(JSON.parse(config).table);
    })
    .then(function(user) { return load(user.id + ".png"); })
    .then(function(avatar) { /* ... */ });
    

    View Slide

48. Pausing with promises
    load("config.json")
    .then(function(config) {
    return db.lookup(JSON.parse(config).table);
    })
    .then(function(user) { return load(user.id + ".png"); })
    .then(function(avatar) { /* ... */ });
    

    View Slide

49. Pausing with promises
    load("config.json")
    .then(function(config) {
    return db.lookup(JSON.parse(config).table);
    })
    .then(function(user) { return load(user.id + ".png"); })
    .then(function(avatar) { /* ... */ });
    

    View Slide

50. Pausing with promises
    load("config.json")
    .then(function(config) {
    return db.lookup(JSON.parse(config).table);
    })
    .then(function(user) { return load(user.id + ".png"); })
    .then(function(avatar) { /* ... */ });
    

    View Slide

51. Pausing with promises
    load("config.json")
    .then(function(config) {
    return db.lookup(JSON.parse(config).table);
    })
    .then(function(user) { return load(user.id + ".png"); })
    .then(function(avatar) { /* ... */ });
    

    View Slide

52. Pausing with promises
    load("config.json")
    .then(function(config) {
    return db.lookup(JSON.parse(config).table);
    })
    .then(function(user) { return load(user.id + ".png"); })
    .then(function(avatar) { /* ... */ });
    

    View Slide

53. Tasks yield promises
    spawn(function*() {
    var config = JSON.parse(yield load("config.json"));
    var user = yield db.lookup(config.table, username);
    var avatar = yield load(user.id + ".png");
    // ...
    });
    

    View Slide

54. Tasks yield promises
    spawn(function*() {
    var config = JSON.parse(yield load("config.json"));
    var user = yield db.lookup(config.table, username);
    var avatar = yield load(user.id + ".png");
    // ...
    });
    

    View Slide

55. Tasks yield promises
    spawn(function*() {
    var config = JSON.parse(yield load("config.json"));
    var user = yield db.lookup(config.table, username);
    var avatar = yield load(user.id + ".png");
    // ...
    });
    looks like a
    synchronous API!
    

    View Slide

56. What about errors?
    load("foo", function(foo) {
    load("bar", function(bar) {
    load("baz", function(baz) {
    use([foo, bar, baz]);
    }, function(err) { /* ... */ });
    }, function(err) { /* ... */ });
    }, function(err) { /* ... */ });
    

    View Slide

57. What about errors?
    load("foo", function(err, foo) {
    if (err) return onError(err);
    load("bar", function(err, bar) {
    if (err) return onError(err);
    load("baz", function(err, baz) {
    if (err) return onError(err);
    use([foo, bar, baz]);
    });
    });
    });
    

    View Slide

58. Error handling with promises
    var p = load("config.json")
    .then(function(config) { /* ... */ }
    .then(function(user) { /* ... */ })
    .then(function(avatar) { /* ... */ });
    when(p, function(result) { /* ... */ },
    function(err) { /* ... */ });
    

    View Slide

59. Error handling with tasks
    spawn(function*() {
    try {
    var config = JSON.parse(yield load("config.json"));
    var user = yield db.lookup(config.table, username);
    var avatar = yield load(user.id + ".png");
    // ...
    } catch (e) { /* ... */ }
    });
    

    View Slide

60. Wait for multiple events
    spawn(function*() {
    var [foo, bar, baz] = yield join(load("foo"),
    load("bar"),
    load("baz"));
    // ...
    });
    

    View Slide

61. Purposefully race events
    spawn(function*() {
    try {
    var foo = yield select(load("foo"), timeout(3000));
    // ...
    } catch (e) { /* timed out */ }
    });
    

    View Slide

62. Generators
    • Interruptible computations 㱺 custom iterators
    • Pausing with yield 㱺 concurrency minus the callbacks
    

    View Slide

63. Something completely
    different
    

    View Slide

64. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    

    View Slide

65. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    

    View Slide

66. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "[object Object]"
    

    View Slide

67. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "[object Object]"
    

    View Slide

68. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "[object Object]"
    true true
    true
    

    View Slide

69. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "[object Object]"
    3
    

    View Slide

70. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "j"
    

    View Slide

71. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "false"
    "j"
    

    View Slide

72. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "false"
    3
    "j"
    

    View Slide

73. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "j" "s"
    

    View Slide

74. !
    +
    {
    }
    [
    ]
    (
    )
    \n
    === JavaScript
    

    View Slide

75. Um. So… why?
    

    View Slide

76. • No reason.
    Um. So… why?
    

    View Slide

77. • Yosuke Hasegawa: JSF*ck
    • Patricio Palladino: Hieroglyphy
    • Me: pure JS, no browser API’s
    Not the first deranged weirdo
    

    View Slide

78. > String+[]
    "function String() { [native code] }"
    "S"
    

    View Slide

79. > "".constructor+[]
    "function String() { [native code] }"
    "S"
    

    View Slide

80. > ""["constructor"]+[]
    "function String() { [native code] }"
    "S"
    

    View Slide

81. > [].slice.call(""["constructor"]+[])
    ["f","u","n","c","t","i","o","n"," ","S","t","r", /* ... */]
    "S"
    

    View Slide

82. > [].slice.call(""["constructor"]+[])
    [" ","f","u","n","c","t","i","o","n"," ","S","t","r", /* ... */]
    "S"
    

    View Slide

83. > function nonWhitespace(s) { return !/^\s*$/.test(s) }
    > [].slice.call(""["constructor"]+[]).filter(nonWhitespace)
    ["f","u","n","c","t","i","o","n","S","t","r", /* ... */]
    "S"
    

    View Slide

84. > Number("f")
    NaN
    > Number(" ")
    0
    > isNaN("f")
    true
    > isNaN(" ")
    false
    "S"
    

    View Slide

85. > [].slice.call(""["constructor"]+[]).filter(isNaN)
    ["f","u","n","c","t","i","o","n","S","t","r", /* ... */]
    "S"
    

    View Slide

86. > [].slice.call(""["constructor"]+[])
    .filter(Function("return isNaN")())
    ["f","u","n","c","t","i","o","n","S","t","r", /* ... */]
    "S"
    

    View Slide

87. > [].slice.call(""["constructor"]+[])
    .filter(Array.constructor("return isNaN")())
    ["f","u","n","c","t","i","o","n","S","t","r", /* ... */]
    "S"
    

    View Slide

88. > [].slice.call(""["constructor"]+[])
    .filter([].constructor.constructor("return isNaN")())
    ["f","u","n","c","t","i","o","n","S","t","r", /* ... */]
    "S"
    

    View Slide

89. > [].slice.call(""["constructor"]+[])
    .filter([].constructor.constructor("return isNaN")())[8]
    "S"
    "S"
    

    View Slide

90. > (9).toString()
    "9"
    > (15).toString(16)
    "f"
    > (16).toString(17)
    "g"
    "p"
    

    View Slide

91. > (25).toString(26)
    "p"
    "p"
    

    View Slide

92. > (25)["toString"](26)
    "p"
    "p"
    

    View Slide

93. > escape(" ")
    "%20"
    "%"
    

    View Slide

94. > Function("return escape")()(" ")
    "%20"
    "%"
    

    View Slide

95. > Function("return escape")()(" ")[0]
    "%"
    "%"
    

    View Slide

96. > Function("return unescape")()("%3b")
    ";"
    Any ASCII character
    

    View Slide

97. > (({}+[])[!![]+!![]+!![]]+[]+(![]+[])[+!![]]+(+(!![]+!![]+!![]+[]+
    (+!![])))[(!![]+[])[+![]]+[]+({}+[])[+!![]]+[][(![]+[])[!![]+!![]
    +!![]]+[]+(![]+[])[!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!!
    []]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]]
    [({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+(![]+[])[+!![]]+(![]+[])[!![]
    +!![]]+(![]+[])[!![]+!![]]](+[![]]+[]+(!![]+[])[({}+[])[!![]+!![]
    +!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!!
    []+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+
    ({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+
    (!![]+[])[+!![]]])[(![]+[])[+![]]+[]+([][![]]+[])[!![]+!![]+!![]+!!
    []+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[!![]+!![]+!!
    []]+(!![]+[])[+!![]]]([][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+
    [])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])
    [+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]
    +!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]][({}+
    [])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]
    +(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]
    +[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+
    [])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+[]+(!![]+[])[!![]+!!
    []+!![]]+(!![]+[])[+![]]+([][![]]+[])[+![]]+(!![]+[])[+!![]]+([][!
    

    View Slide

98. []]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+([][![]]
    +[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+(+[![]]))
    ())[+(+!![]+[]+(+!![]))]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+
    [])[!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[+!![]]+[][(![]+[])[!![]
    +!![]+!![]]+[]+(![]+[])[!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]
    +!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]]
    [({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+(![]+[])[+!![]]+(![]+[])[!![]
    +!![]]+(![]+[])[!![]+!![]]]((!![]+[])[({}+[])[!![]+!![]+!![]+!![]
    +!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!!
    []]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!!
    []+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])
    [+!![]]]+[])[(![]+[])[+![]]+[]+([][![]]+[])[!![]+!![]+!![]+!![]+!!
    []]+(![]+[])[!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[!![]+!![]+!![]]+
    (!![]+[])[+!![]]]([][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])
    [+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+!
    []]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]
    +!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]][({}+[])[!!
    []+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+
    [])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])
    [+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])
    [+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+[]+(!![]+[])[!![]+!![
    

    View Slide

99. ]+!![]]+(!![]+[])[+![]]+([][![]]+[])[+![]]+(!![]+[])[+!![]]+([][!
    []]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+([][![]]
    +[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+(+[![]]))
    ())[+(+!![]+[]+(!![]+!![]+!![]))]](+(!![]+!![]+!![]+[]+(!![]+!!
    [])))+(![]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+({}+[])[!![]+!![]+!!
    []+!![]+!![]]+(!![]+[])[+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!!
    []]+(+(!![]+!![]+[]+(!![]+!![]+!![]+!![]+!![])))[(!![]+[])[+![]]+[]
    +({}+[])[+!![]]+[][(![]+[])[!![]+!![]+!![]]+[]+(![]+[])[!![]+!![]]+
    ([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]
    +!![]]+(!![]+[])[!![]+!![]+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]
    +[]+(![]+[])[+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]](+[![]]
    +[]+(!![]+[])[({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+
    ([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+
    [])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!!
    []+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]])[(![]+[])[+![]]+[]+
    ([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+
    [])[+![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+!![]]]([][({}+[])[!!
    []+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+
    [])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])
    [+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])
    [+!![]]+(!![]+[])[+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+
    

    View Slide

100. [])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])
     [+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]
     +!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+
     [])[+!![]]+[]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+([][![]]+
     [])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+!![]]+({}+[])[!![]+!![]+!!
     []+!![]+!![]+!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]
     +[])[!![]+!![]+!![]]+(+[![]]))())[+(+!![]+[]+(+!![]))]+(!![]+[])[+!
     []]+(!![]+[])[+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+([][!
     []]+[])[+!![]]+[][(![]+[])[!![]+!![]+!![]]+[]+(![]+[])[!![]+!![]]+
     ([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]
     +!![]]+(!![]+[])[!![]+!![]+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]
     +[]+(![]+[])[+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]]((!![]+
     [])[({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+
     [])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!!
     []]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])
     [+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]]+[])[(![]+[])[+![]]+[]+([][!
     []]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[+!
     []]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+!![]]]([][({}+[])[!![]+!!
     []+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])
     [!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+!
     []]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!!
     

     View Slide

101. []]+(!![]+[])[+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])
     [+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+!
     []]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]
     +!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])
     [+!![]]+[]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+([][![]]+[])
     [+![]]+(!![]+[])[+!![]]+([][![]]+[])[+!![]]+({}+[])[!![]+!![]+!![]
     +!![]+!![]+!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+
     [])[!![]+!![]+!![]]+(+[![]]))())[+(+!![]+[]+(!![]+!![]+!![]))]](+
     (!![]+!![]+!![]+[]+(+![])))+(!![]+[])[+![]])
     "javascript"
     

     View Slide

102. (({}+[])[!![]+!![]+!![]]+[]+(![]+[])[+!![]]+(+(!![]+!![]+!![]+[]+(+!![])))[(!![]+[])[+![]]+[]+({}+[])[+!![]]+[][(![]+[])[!![]+!![]+!![]]+[]+(![]+
     [])[!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]][({}+[])[!![]+!![]+!![]+!![]+!!
     []]+[]+(![]+[])[+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]](+[![]]+[]+(!![]+[])[({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+
     [])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])
     [+!![]]+(!![]+[])[+!![]]])[(![]+[])[+![]]+[]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[!![]+!![]+!![]]+
     (!![]+[])[+!![]]]([][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!!
     []]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+
     [])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]
     +[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+[]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+([][![]]+[])[+![]]+(!![]+[])[+!![]]+([][!
     []]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+(+[![]]))())[+(+!![]+[]+
     (+!![]))]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[+!![]]+[][(![]+[])[!![]+!![]+!![]]+[]+(![]+[])[!![]
     +!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+(!
     []+[])[+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]]((!![]+[])[({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])
     [!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!!
     []]]+[])[(![]+[])[+![]]+[]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+!![]]]
     ([][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])
     [+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][!
     []]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+
     [])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+[]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+([][![]]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+!![]]+
     ({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+(+[![]]))())[+(+!![]+[]+(!![]+!![]+!!
     []))]](+(!![]+!![]+!![]+[]+(!![]+!![])))+(![]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+!![]]+([][![]]+[])
     [!![]+!![]+!![]+!![]+!![]]+(+(!![]+!![]+[]+(!![]+!![]+!![]+!![]+!![])))[(!![]+[])[+![]]+[]+({}+[])[+!![]]+[][(![]+[])[!![]+!![]+!![]]+[]+(![]+[])
     [!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+
     []+(![]+[])[+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]](+[![]]+[]+(!![]+[])[({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])
     [+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!!
     []]+(!![]+[])[+!![]]])[(![]+[])[+![]]+[]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[!![]+!![]+!![]]+(!![]
     +[])[+!![]]]([][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+
     ([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])
     [+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+
     [])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+[]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+([][![]]+[])[+![]]+(!![]+[])[+!![]]+([][!
     []]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+(+[![]]))())[+(+!![]+[]+
     (+!![]))]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[+!![]]+[][(![]+[])[!![]+!![]+!![]]+[]+(![]+[])[!![]
     +!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+(!
     []+[])[+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]]((!![]+[])[({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])
     [!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!!
     []]]+[])[(![]+[])[+![]]+[]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+!![]]]
     ([][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])
     [+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][!
     []]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+
     [])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+[]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+([][![]]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+!![]]+
     ({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+(+[![]]))())[+(+!![]+[]+(!![]+!![]+!!
     []))]](+(!![]+!![]+!![]+[]+(+![])))+(!![]+[])[+![]])
     

     View Slide

103. View Slide