Kyle Simpson - Advanced JavaScript

1

Kyle Simpson@getify

http://getify.me

• LABjs• grips• asynquence

2

http://getify.me

http://getify.me

Kyle Simpson@getify

http://getify.me

http://speakerdeck.com/getify

3

http://getify.me

http://getify.me



4

http://YouDontKnowJS.com



5

6

7

https://developer.mozilla.org/en-US/docs/JavaScript

https://github.com/rwldrn/idiomatic.js

http://www.ecma-international.org/ecma-262/5.1/

http://wiki.ecmascript.org/doku.php?id=harmony:proposals









Advanced JavaScriptThe “What you need to know” Parts

8

9

Scope, Closures• Nested Scope• Hoisting• this• Closure

Agenda10

Scope

Scope: where to look for things

11

Scope

JavaScript has function scope only*

12

Scope

13

Scope

14

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCnZhciBmb28gPSAiYmFyIjsKCmZ1bmN0aW9uIGJhcigpIHsKCXZhciBmb28gPSAiYmF6IjsKCglmdW5jdGlvbiBiYXooZm9vKSB7CgkJZm9vID0gImJhbSI7CgkJYmFtID0gInlheSI7Cgl9CgliYXooKTsKfQoKYmFyKCk7Cgo8L3NjcmlwdD4=



































Scope

15

Scope: function scope?

16

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCnZhciBmb28gPSBmdW5jdGlvbiBiYXIoKSB7Cgl2YXIgZm9vID0gImJheiI7CgoJZnVuY3Rpb24gYmF6KGZvbykgewoJCWZvbyA9IGJhcjsKCQljb25zb2xlLmxvZyhmb28pOwoJfQoJYmF6KCk7Cn07Cgpmb28oKTsKCjwvc2NyaXB0Pg==



































Scope: block scope?

17

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCnZhciBmb287Cgp0cnkgewoJZm9vLmxlbmd0aDsgLy8gZXJyb3IhCn0KY2F0Y2ggKGVycikgewoJY29uc29sZS5sb2coZXJyKTsgLy8gIlR5cGVFcnJvci4uLiIKfQoKY29uc29sZS5sb2coZXJyKTsgLy8gUmVmZXJlbmNlRXJyb3I6IGVyciBkb2Vzbid0IGV4aXN0IQoKPC9zY3JpcHQ+



































Scope

lexical scope

dynamic scope

18

Scope

19

Scope: lexical

20

Scope: WAT!?

21

Scope: WAT!?

22

Function Scope

23

IIFE

http://benalman.com/news/2010/11/immediately-invoked-function-expression/



http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCnZhciBmb28gPSAiZm9vIjsKCihmdW5jdGlvbigpewoKCXZhciBmb28gPSAiZm9vMiI7Cgljb25zb2xlLmxvZyhmb28pOwkvLyAiZm9vMiIKCn0pKCk7Cgpjb25zb2xlLmxvZyhmb28pOwkvLyAiZm9vIgoKPC9zY3JpcHQ+



































Function Scope

24

Block Scope

25

Block Scope

let (ES6+)

26

Block Scope: let

27

Block Scope: let

28

Block Scope: let

29

Block Scope: let

30

https://gist.github.com/getify/5285514



Block Scope: let

31

https://github.com/getify/let-er

https://github.com/getify/BlockScoper.js

https://github.com/getify/BlockScoper.js

Block Scope: let

32




http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCnRyeXt0aHJvdyB2b2lkIDB9Y2F0Y2gKLypsZXQqLyhmb28pIHsKCWZvbyA9ICJmb28iOwoJY29uc29sZS5sb2coZm9vKTsgLy8gImZvbyIKfQoKY29uc29sZS5sb2coZm9vKTsgLy8gUmVmZXJlbmNlRXJyb3IKCjwvc2NyaXB0Pg==



































Scope

dynamic scope

33

Scope: dynamic!?!?

34

Scope

35

Quiz1. What type of scoping rule(s) does JavaScript have? Exceptions?2. What are the different ways you can create a new scope?3. What’s the difference between undeclared and undefined?

Scope: hoisting

36

Scope: hoisting

37




































Scope: hoisting

38

Scope: hoisting

39

Scope: hoisting

40

Hoisting: functions first

41

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZvbygpOyAvLyAiZm9vIgoKdmFyIGZvbyA9IDI7CgpmdW5jdGlvbiBmb28oKSB7Cgljb25zb2xlLmxvZygiYmFyIik7Cn0KCmZ1bmN0aW9uIGZvbygpIHsKCWNvbnNvbGUubG9nKCJmb28iKTsKfQoKPC9zY3JpcHQ+



































Hoisting: recursion

42

Hoisting: let gotcha

43

(exercise #1: 10min)

44

http://developer.yahoo.com/performance/rules.html


this

45

this

46

Every function, while executing, has a reference to its current execution context,

called this.

this

47

Remember lexical scope vs. dynamic scope?

JavaScript’s version of “dynamic scope” is this.

Scope

48

this: implicit & default binding

49

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIGZvbygpIHsKCWNvbnNvbGUubG9nKHRoaXMuYmFyKTsKfQoKdmFyIGJhciA9ICJiYXIxIjsKdmFyIG8yID0geyBiYXI6ICJiYXIyIiwgZm9vOiBmb28gfTsKdmFyIG8zID0geyBiYXI6ICJiYXIzIiwgZm9vOiBmb28gfTsKCmZvbygpOwkJCS8vICJiYXIxIgpvMi5mb28oKTsJCS8vICJiYXIyIgpvMy5mb28oKTsJCS8vICJiYXIzIgoKPC9zY3JpcHQ+



































this: implicit & default binding

50

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCnZhciBvMSA9IHsKCWJhcjogImJhcjEiLAoJZm9vOiBmdW5jdGlvbigpIHsKCQljb25zb2xlLmxvZyh0aGlzLmJhcik7Cgl9Cn07CnZhciBvMiA9IHsgYmFyOiAiYmFyMiIsIGZvbzogbzEuZm9vIH07Cgp2YXIgYmFyID0gImJhcjMiOwp2YXIgZm9vID0gbzEuZm9vOwoKbzEuZm9vKCk7CQkvLyAiYmFyMSIKbzIuZm9vKCk7CQkvLyAiYmFyMiIKZm9vKCk7CQkJLy8gImJhcjMiCgo8L3NjcmlwdD4=



































this: binding confusion

51

this: binding confusion

52

this: explicit binding

53

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIGZvbygpIHsKCWNvbnNvbGUubG9nKHRoaXMuYmFyKTsKfQoKdmFyIGJhciA9ICJiYXIxIjsKdmFyIG9iaiA9IHsgYmFyOiAiYmFyMiIgfTsKCmZvbygpOwkJCS8vICJiYXIxIgpmb28uY2FsbChvYmopOwkJLy8gImJhcjIiCgo8L3NjcmlwdD4=



































this: hard binding

54

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIGZvbygpIHsKCWNvbnNvbGUubG9nKHRoaXMuYmFyKTsKfQoKdmFyIG9iaiA9IHsgYmFyOiAiYmFyIiB9Owp2YXIgb2JqMiA9IHsgYmFyOiAiYmFyMiIgfTsKCnZhciBvcmlnID0gZm9vOwpmb28gPSBmdW5jdGlvbigpeyBvcmlnLmNhbGwob2JqKTsgfTsKCmZvbygpOwpmb28uY2FsbChvYmoyKTsKCjwvc2NyaXB0Pg==



































this: hard binding

55

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIGJpbmQoZm4sbykgewoJcmV0dXJuIGZ1bmN0aW9uKCl7CgkJZm4uY2FsbChvKTsKCX07Cn0KZnVuY3Rpb24gZm9vKCkgewoJY29uc29sZS5sb2codGhpcy5iYXIpOwp9Cgp2YXIgb2JqID0geyBiYXI6ICJiYXIiIH07CnZhciBvYmoyID0geyBiYXI6ICJiYXIyIiB9OwoKZm9vID0gYmluZChmb28sb2JqKTsKCmZvbygpOwpmb28uY2FsbChvYmoyKTsKCjwvc2NyaXB0Pg==



































this: hard binding

56

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmlmICghRnVuY3Rpb24ucHJvdG90eXBlLmJpbmQyKSB7CglGdW5jdGlvbi5wcm90b3R5cGUuYmluZDIgPQoJCWZ1bmN0aW9uKG8pIHsKCQkJdmFyIGZuID0gdGhpczsgLy8gdGhlIGZ1bmN0aW9uIQoJCQlyZXR1cm4gZnVuY3Rpb24oKXsKCQkJCXJldHVybiBmbi5hcHBseShvLGFyZ3VtZW50cyk7CgkJCX07CgkJfTsKfQoKZnVuY3Rpb24gZm9vKGJheikgewoJY29uc29sZS5sb2codGhpcy5iYXIgKyAiICIgKyBiYXopOwp9Cgp2YXIgb2JqID0geyBiYXI6ICJiYXIiIH07Cgpmb28gPSBmb28uYmluZDIob2JqKTsKCmZvbygiYmF6Iik7Cgo8L3NjcmlwdD4=



































this: hard binding

57https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind




http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIGZvbyhiYXosYmFtKSB7Cgljb25zb2xlLmxvZyh0aGlzLmJhciArICIgIiArIGJheiArCgkJIiAiICsgYmFtKTsKfQoKdmFyIG9iaiA9IHsgYmFyOiAiYmFyIiB9Owpmb28gPSBmb28uYmluZChvYmosImJheiIpOwkvLyBFUzUgb25seSEKCmZvbygiYmFtIik7CQkvLyAiYmFyIGJheiBiYW0iCgo8L3NjcmlwdD4=



































this: new

58

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIGZvbyhiYXosYmFtKSB7Cgl0aGlzLmJheiA9ICJiYXoiOwoJY29uc29sZS5sb2codGhpcy5iYXIgKyAiICIgKyBiYXopOwp9Cgp2YXIgYmFyID0gImJhciI7CnZhciBiYXogPSBuZXcgZm9vKCk7Cgo8L3NjcmlwdD4=



































this: new, order of precedence

59

this: determination

60

1. Was the function called with `new`?2. Was the function called with `call` or `apply` specifying an explicit this?3. Was the function called via a containing/owning object (context)?4. DEFAULT: global object (except strict mode)

this

61

Quiz1. What determines which object a function’s this points to? What’s the default?2. How do you “borrow” a function by implicit assignment of this?3. How do you explicitly bind this?4. How can you seal a specific this to a function? Why do that? Why not?5. How do you create a new this?

Closure

62

Closure

63

Remember lexical scope?

Closure absolutely depends on it. Go review it if you’re still

confused. :)

Closure

64

Closure is when a function “remembers” its lexical scope even when the function is

executed outside that lexical scope.

Closure

65

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIGZvbygpIHsKCXZhciBiYXIgPSAiYmFyIjsKCglmdW5jdGlvbiBiYXooKSB7CgkJY29uc29sZS5sb2coYmFyKTsKCX0KCgliYW0oYmF6KTsKfQoKZnVuY3Rpb24gYmFtKGJheikgewoJYmF6KCk7Cn0KCmZvbygpOwoKPC9zY3JpcHQ+



































Closure

66

Closure

67

Closure

68

Closure: shared scope

69

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIGZvbygpIHsKCXZhciBiYXIgPSAwOwoKCXNldFRpbWVvdXQoZnVuY3Rpb24oKXsKCQljb25zb2xlLmxvZyhiYXIrKyk7Cgl9LDEwMCk7CglzZXRUaW1lb3V0KGZ1bmN0aW9uKCl7CgkJY29uc29sZS5sb2coYmFyKyspOwoJfSwyMDApOwp9Cgpmb28oKTsKCjwvc2NyaXB0Pg==



































Closure: nested scope

70

Closure: loops

71

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZvciAodmFyIGk9MTsgaTw9NTsgaSsrKSB7CglzZXRUaW1lb3V0KGZ1bmN0aW9uKCl7CgkJY29uc29sZS5sb2coImk6ICIgKyBpKTsKCX0saSoxMDAwKTsKfQoKPC9zY3JpcHQ+



































Closure: loops

72

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZvciAodmFyIGk9MTsgaTw9NTsgaSsrKSB7CgkoZnVuY3Rpb24oaSl7CgkJc2V0VGltZW91dChmdW5jdGlvbigpewoJCQljb25zb2xlLmxvZygiaTogIiArIGkpOwoJCX0saSoxMDAwKTsKCX0pKGkpOwp9Cgo8L3NjcmlwdD4=



































Closure: loops + block scope

73

Closure?

74

Closure: classic module pattern

75

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCnZhciBmb28gPSAoZnVuY3Rpb24oKXsKCgl2YXIgbyA9IHsgYmFyOiAiYmFyIiB9OwoKCXJldHVybiB7CgkJYmFyOiBmdW5jdGlvbigpewoJCQljb25zb2xlLmxvZyhvLmJhcik7CgkJfQoJfTsKCn0pKCk7Cgpmb28uYmFyKCk7CQkvLyAiYmFyIgoKPC9zY3JpcHQ+



































Closure: modified module pattern

76

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCnZhciBmb28gPSAoZnVuY3Rpb24oKXsKCXZhciBwdWJsaWNBUEkgPSB7CgkJYmFyOiBmdW5jdGlvbigpewoJCQlwdWJsaWNBUEkuYmF6KCk7CgkJfSwKCQliYXo6IGZ1bmN0aW9uKCl7CgkJCWNvbnNvbGUubG9nKCJiYXoiKTsKCQl9Cgl9OwoJcmV0dXJuIHB1YmxpY0FQSTsKfSkoKTsKCmZvby5iYXIoKTsJCS8vICJiYXoiCgo8L3NjcmlwdD4=



































Closure: modern module pattern

77

Closure: future/ES6+ module pattern

78foo.js:

Closure

79

Quiz1. What is a closure and how is it created?2. How long does its scope stay around?3. Why doesn’t a function callback inside a loop behave as expected? How do we fix it?4. How do you use a closure to create an encapsulated module? What’s the benefits of that approach?


80



81

Object-Orienting• Common OO Patterns• prototype• “Inheritance” vs. “Behavior Delegation”

(OO vs. OLOO)

Agenda82

OO Design Patterns

83

OO Design Patterns

84

Singleton

OO Design Patterns: singleton

85

OO Design Patterns: singleton

86

OO Design Patterns

87

Observer

OO Design Patterns: observer

88

prototype

89

prototype

90

Every single “object” is built by a constructor

function

prototype

91

Each time a constructor is called, a new object is

created

prototype

92

A constructor makes an object “based on” its own

prototype

prototype

93

A constructor makes an object linked to its own

prototype

prototype

94

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIEZvbyh3aG8pIHsKCXRoaXMubWUgPSB3aG87Cn0KRm9vLnByb3RvdHlwZS5pZGVudGlmeSA9IGZ1bmN0aW9uKCkgewoJcmV0dXJuICJJIGFtICIgKyB0aGlzLm1lOwp9OwoKdmFyIGExID0gbmV3IEZvbygiYTEiKTsKdmFyIGEyID0gbmV3IEZvbygiYTIiKTsKCmEyLnNwZWFrID0gZnVuY3Rpb24oKSB7CglhbGVydCgiSGVsbG8sICIgKyB0aGlzLmlkZW50aWZ5KCkgKyAiLiIpOwp9OwoKYTEuY29uc3RydWN0b3IgPT09IEZvbzsKYTEuY29uc3RydWN0b3IgPT09IGEyLmNvbnN0cnVjdG9yOwphMS5fX3Byb3RvX18gPT09IEZvby5wcm90b3R5cGU7CmExLl9fcHJvdG9fXyA9PT0gYTIuX19wcm90b19fOwoKPC9zY3JpcHQ+



































prototype

95

prototype

96

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIEZvbyh3aG8pIHsKCXRoaXMubWUgPSB3aG87Cn0KRm9vLnByb3RvdHlwZS5pZGVudGlmeSA9IGZ1bmN0aW9uKCkgewoJcmV0dXJuICJJIGFtICIgKyB0aGlzLm1lOwp9OwoKdmFyIGExID0gbmV3IEZvbygiYTEiKTsKYTEuaWRlbnRpZnkoKTsKCmExLmlkZW50aWZ5ID0gZnVuY3Rpb24oKSB7CglhbGVydCgiSGVsbG8sICIgKwoJCUZvby5wcm90b3R5cGUuaWRlbnRpZnkuY2FsbCh0aGlzKSArCgkiLiIpOwp9OwoKYTEuaWRlbnRpZnkoKTsKCjwvc2NyaXB0Pg==



































prototype

97

Scope

98

prototype: objects linked

99

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIEZvbyh3aG8pIHsKCXRoaXMubWUgPSB3aG87Cn0KRm9vLnByb3RvdHlwZS5pZGVudGlmeSA9IGZ1bmN0aW9uKCkgewoJcmV0dXJuICJJIGFtICIgKyB0aGlzLm1lOwp9OwoKZnVuY3Rpb24gQmFyKHdobykgewoJRm9vLmNhbGwodGhpcyx3aG8pOwp9Ci8vIEJhci5wcm90b3R5cGUgPSBuZXcgRm9vKCk7IC8vIE9SLi4uCkJhci5wcm90b3R5cGUgPSBPYmplY3QuY3JlYXRlKEZvby5wcm90b3R5cGUpOwovLyBOT1RFOiAuY29uc3RydWN0b3IgaXMgYm9ya2VkIGhlcmUsIG5lZWQgdG8gZml4CgpCYXIucHJvdG90eXBlLnNwZWFrID0gZnVuY3Rpb24oKSB7CglhbGVydCgiSGVsbG8sICIgKyB0aGlzLmlkZW50aWZ5KCkgKyAiLiIpOwp9OwoKdmFyIGIxID0gbmV3IEJhcigiYjEiKTsKdmFyIGIyID0gbmV3IEJhcigiYjIiKTsKCmIxLnNwZWFrKCk7CmIyLnNwZWFrKCk7Cgo8L3NjcmlwdD4=




































100


101

prototype

102

Quiz1. What is a constructor?2. What is a [[Prototype]] and where does it come from?3. How does a [[Prototype]] affect an object?4. How do we find out where an object’s [[Prototype]] points to (3 ways)?

prototype: this redux

103

remember how this has a pesky way of getting

unassigned?

prototype: this redux

104


105



OO

106

Inheritance

OO: classical inheritance

107

Foo

Bar

a1

a2

b1

b2

OO: “prototypal inheritance”

108

Foo.prototype a1

a2

b1

b2

(another design pattern)

Bar.prototype

OO: js

109

JS “Inheritance”“Behavior Delegation”

OO: inheritance delegation

110

OO: behavior delegation

111

Let’s simplify!

OLOO

112

OLOO:Objects Linked to Other

Objects

OLOO: delegated objects

113

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIEZvbyh3aG8pIHsKCXRoaXMubWUgPSB3aG87Cn0KRm9vLnByb3RvdHlwZS5pZGVudGlmeSA9IGZ1bmN0aW9uKCkgewoJcmV0dXJuICJJIGFtICIgKyB0aGlzLm1lOwp9OwoKZnVuY3Rpb24gQmFyKHdobykgewoJRm9vLmNhbGwodGhpcyx3aG8pOwp9CkJhci5wcm90b3R5cGUgPSBPYmplY3QuY3JlYXRlKEZvby5wcm90b3R5cGUpOwoKQmFyLnByb3RvdHlwZS5zcGVhayA9IGZ1bmN0aW9uKCkgewoJYWxlcnQoIkhlbGxvLCAiICsgdGhpcy5pZGVudGlmeSgpICsgIi4iKTsKfTsKCnZhciBiMSA9IG5ldyBCYXIoImIxIik7CmIxLnNwZWFrKCk7Cgo8L3NjcmlwdD4=




































114

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIEZvbyh3aG8pIHsKCXRoaXMubWUgPSB3aG87Cn0KRm9vLnByb3RvdHlwZS5pZGVudGlmeSA9IGZ1bmN0aW9uKCkgewoJcmV0dXJuICJJIGFtICIgKyB0aGlzLm1lOwp9OwoKZnVuY3Rpb24gQmFyKHdobykgewoJRm9vLmNhbGwodGhpcyx3aG8pOwp9CkJhci5wcm90b3R5cGUgPSBPYmplY3QuY3JlYXRlKEZvby5wcm90b3R5cGUpOwoKQmFyLnByb3RvdHlwZS5zcGVhayA9IGZ1bmN0aW9uKCkgewoJYWxlcnQoIkhlbGxvLCAiICsgdGhpcy5pZGVudGlmeSgpICsgIi4iKTsKfTsKCnZhciBiMSA9IE9iamVjdC5jcmVhdGUoQmFyLnByb3RvdHlwZSk7CkJhci5jYWxsKGIxLCJiMSIpOwpiMS5zcGVhaygpOwoKPC9zY3JpcHQ+




































115

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIEZvbyh3aG8pIHsKCXRoaXMubWUgPSB3aG87Cn0KRm9vLnByb3RvdHlwZS5pZGVudGlmeSA9IGZ1bmN0aW9uKCkgewoJcmV0dXJuICJJIGFtICIgKyB0aGlzLm1lOwp9OwoKdmFyIEJhciA9IE9iamVjdC5jcmVhdGUoRm9vLnByb3RvdHlwZSk7CkJhci5pbml0ID0gZnVuY3Rpb24od2hvKSB7CglGb28uY2FsbCh0aGlzLHdobyk7Cn07CkJhci5zcGVhayA9IGZ1bmN0aW9uKCkgewoJYWxlcnQoIkhlbGxvLCAiICsgdGhpcy5pZGVudGlmeSgpICsgIi4iKTsKfTsKCnZhciBiMSA9IE9iamVjdC5jcmVhdGUoQmFyKTsKYjEuaW5pdCgiYjEiKTsKYjEuc3BlYWsoKTsKCjwvc2NyaXB0Pg==




































116

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCnZhciBGb28gPSB7Cglpbml0OiBmdW5jdGlvbih3aG8pIHsKCQl0aGlzLm1lID0gd2hvOwoJfSwKCWlkZW50aWZ5OiBmdW5jdGlvbigpIHsKCQlyZXR1cm4gIkkgYW0gIiArIHRoaXMubWU7Cgl9Cn07Cgp2YXIgQmFyID0gT2JqZWN0LmNyZWF0ZShGb28pOwoKQmFyLnNwZWFrID0gZnVuY3Rpb24oKSB7CglhbGVydCgiSGVsbG8sICIgKyB0aGlzLmlkZW50aWZ5KCkgKyAiLiIpOwp9OwoKdmFyIGIxID0gT2JqZWN0LmNyZWF0ZShCYXIpOwpiMS5pbml0KCJiMSIpOwpiMS5zcGVhaygpOwoKPC9zY3JpcHQ+



































117

OO: old & busted

OO: old & busted

118

119

OLOO: new hotness

120

OLOO: new hotness

OLOO: Object.create()

121

OLOO: object creation

122







OLOO: js

123

Quiz1. How is JavaScript’s [[Prototype]] chain not like traditional/classical inheritance?2. What does “behavior delegation” mean and how does it describe object linking in JS?3. Why is “behavior delegation” as a design pattern a helpful thing? What are the tradeoffs?


124



125

126

Async Patterns• Callbacks• Generators/Coroutines• Promises

Agenda

Async Patterns

127

Callbacks

Async Patterns: callbacks

128

Async Patterns: “callback hell”

129


130


131

Inversion of Control

Async Patterns: separate callbacks

132

Async Patterns: “error-first style”

133

Async Patterns: nested-callback tasks

134

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIGdldERhdGEoZCxjYikgewoJc2V0VGltZW91dChmdW5jdGlvbigpeyBjYihkKTsgfSwxMDAwKTsKfQoKZ2V0RGF0YSgxMCxmdW5jdGlvbihudW0xKXsKCXZhciB4ID0gMSArIG51bTE7CglnZXREYXRhKDMwLGZ1bmN0aW9uKG51bTIpewoJCXZhciB5ID0gMSArIG51bTI7CgkJZ2V0RGF0YSgKCQkJIk1lYW5pbmcgb2YgbGlmZTogIiArICh4ICsgeSksCgkJCWZ1bmN0aW9uKGFuc3dlcil7CgkJCQljb25zb2xlLmxvZyhhbnN3ZXIpOwoJCQkJLy8gTWVhbmluZyBvZiBsaWZlOiA0MgoJCQl9CgkJKTsKCX0pOwp9KTsKCjwvc2NyaXB0Pg==



































Async Patterns

135

Generators (yield)

Async Patterns: generators

136

Async Patterns: generator coroutines

137

Async Patterns: generator messages

138

Async Patterns: yield tasks

139

Async Patterns

140

Promises

“continuation events”

Async Patterns: jQuery-style promises

141

Async Patterns: jQuery-style promises

142

Async Patterns: (native) promise tasks

143

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdD4KCmZ1bmN0aW9uIGdldERhdGEoZCkgewoJcmV0dXJuIG5ldyBQcm9taXNlKGZ1bmN0aW9uKHJlc29sdmUscmVqZWN0KXsKCQlzZXRUaW1lb3V0KGZ1bmN0aW9uKCl7IHJlc29sdmUoZCk7IH0sMTAwMCk7Cgl9KTsKfQoKdmFyIHg7CgpnZXREYXRhKDEwKQoudGhlbihmdW5jdGlvbihudW0xKXsKCXggPSAxICsgbnVtMTsKCXJldHVybiBnZXREYXRhKDMwKTsKfSkKLnRoZW4oZnVuY3Rpb24obnVtMil7Cgl2YXIgeSA9IDEgKyBudW0yOwoJcmV0dXJuIGdldERhdGEoIk1lYW5pbmcgb2YgbGlmZTogIiArICh4ICsgeSkpOwp9KQoudGhlbihmdW5jdGlvbihhbnN3ZXIpewoJY29uc29sZS5sb2coYW5zd2VyKTsKCS8vIE1lYW5pbmcgb2YgbGlmZTogNDIKfSk7Cgo8L3NjcmlwdD4=



































Async Patterns: promises sequence

144

sequence = automatically chained promises

Async Patterns: sequences & gates

145https://github.com/getify/asynquence

https://github.com/getify/asynquence

https://github.com/getify/asynquence

Async Patterns: sequence tasks

146

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdCBzcmM9Imh0dHBzOi8vcmF3bnBtLmdldGlmeS5pby9hc3lucXVlbmNlL2xhdGVzdC9hc3EuanMiPjwvc2NyaXB0Pgo8c2NyaXB0IHNyYz0iaHR0cHM6Ly9yYXducG0uZ2V0aWZ5LmlvL2FzeW5xdWVuY2UtY29udHJpYi9sYXRlc3QvY29udHJpYi5qcyI+PC9zY3JpcHQ+CjxzY3JpcHQ+CgpmdW5jdGlvbiBnZXREYXRhKGQpIHsKCXJldHVybiBBU1EoZnVuY3Rpb24oZG9uZSl7CgkJc2V0VGltZW91dChmdW5jdGlvbigpeyBkb25lKGQpOyB9LDEwMDApOwoJfSk7Cn0KCkFTUSgpCi53YXRlcmZhbGwoCglmdW5jdGlvbihkb25lKXsgZ2V0RGF0YSgxMCkucGlwZShkb25lKTsJfSwKCWZ1bmN0aW9uKGRvbmUpeyBnZXREYXRhKDMwKS5waXBlKGRvbmUpOyB9CikKLnNlcShmdW5jdGlvbihudW0xLG51bTIpewoJdmFyIHggPSAxICsgbnVtMTsKCXZhciB5ID0gMSArIG51bTI7CglyZXR1cm4gZ2V0RGF0YSgiTWVhbmluZyBvZiBsaWZlOiAiICsgKHggKyB5KSk7Cn0pCi52YWwoZnVuY3Rpb24oYW5zd2VyKXsKCWNvbnNvbGUubG9nKGFuc3dlcik7CgkvLyBNZWFuaW5nIG9mIGxpZmU6IDQyCn0pOwoKPC9zY3JpcHQ+



































Async Patterns: generator+sequence tasks

147

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdCBzcmM9Imh0dHBzOi8vcmF3bnBtLmdldGlmeS5pby9hc3lucXVlbmNlL2xhdGVzdC9hc3EuanMiPjwvc2NyaXB0Pgo8c2NyaXB0IHNyYz0iaHR0cHM6Ly9yYXducG0uZ2V0aWZ5LmlvL2FzeW5xdWVuY2UtY29udHJpYi9sYXRlc3QvY29udHJpYi5qcyI+PC9zY3JpcHQ+CjxzY3JpcHQ+CgpmdW5jdGlvbiBnZXREYXRhKGQpIHsKCXJldHVybiBBU1EoZnVuY3Rpb24oZG9uZSl7CgkJc2V0VGltZW91dChmdW5jdGlvbigpeyBkb25lKGQpOyB9LDEwMDApOwoJfSk7Cn0KCkFTUSgpCi5ydW5uZXIoZnVuY3Rpb24qKCl7Cgl2YXIgeCA9IDEgKyAoeWllbGQgZ2V0RGF0YSgxMCkpOwoJdmFyIHkgPSAxICsgKHlpZWxkIGdldERhdGEoMzApKTsKCXZhciBhbnN3ZXIgPSB5aWVsZCAoZ2V0RGF0YSgKCQkiTWVhbmluZyBvZiBsaWZlOiAiICsgKHggKyB5KQoJKSk7CglyZXR1cm4gYW5zd2VyOwp9KQoudmFsKGZ1bmN0aW9uKGFuc3dlcil7Cgljb25zb2xlLmxvZyhhbnN3ZXIpOwoJLy8gTWVhbmluZyBvZiBsaWZlOiA0Mgp9KTsKCjwvc2NyaXB0Pg==



































Async Patterns: CSP-style generators

148

http://getify.github.io/showme.html?data:text/html;charset=utf-8;base64,PHNjcmlwdCBzcmM9Imh0dHBzOi8vcmF3bnBtLmdldGlmeS5pby9hc3lucXVlbmNlL2xhdGVzdC9hc3EuanMiPjwvc2NyaXB0Pgo8c2NyaXB0IHNyYz0iaHR0cHM6Ly9yYXducG0uZ2V0aWZ5LmlvL2FzeW5xdWVuY2UtY29udHJpYi9sYXRlc3QvY29udHJpYi5qcyI+PC9zY3JpcHQ+CjxzY3JpcHQ+CgovLyBhc3luYyBwcm9taXNlIHdyYXAgb2YgdmFsdWUgYHhgCmZ1bmN0aW9uIGdldERhdGEoeCkgewoJcmV0dXJuIG5ldyBQcm9taXNlKGZ1bmN0aW9uKHJlc29sdmUpewoJCXNldFRpbWVvdXQoZnVuY3Rpb24oKXsgcmVzb2x2ZSh4KTsgfSwxMDAwKTsKCX0pOwp9CgovLyBzZWVkIGAyYCBhcyBpbml0aWFsIHNlcXVlbmNlIG1lc3NhZ2UsIHdoaWNoIHdpbGwgcGFzcyBpbnRvCi8vIGZpcnN0IGBydW5uZXJgIHNlZ21lbnQKQVNRKDIpCi5ydW5uZXIoCgkvLyB2MSB3aWxsIGJlIHNldCBhcyBgMmAgaGVyZQoJZnVuY3Rpb24qKHYxKSB7CgkJY29uc29sZS5sb2coImluaXRpYWwgdjE6IiArIHYxKTsgLy8gaW5pdGlhbCB2MToyCgkJdjEgKz0geWllbGQgbnVsbDsKCQljb25zb2xlLmxvZygibm93IHYxOiIgKyB2MSk7IC8vIG5vdyB2MToxMgoJCXYxICs9IHlpZWxkIGdldERhdGEodjEgKiAyKTsKCQljb25zb2xlLmxvZygiZmluYWxseSB2MToiICsgdjEpOyAvLyBmaW5hbGx5IHYxOjg0CgkJeWllbGQgZ2V0RGF0YSh2MSArIDEpOwoJfSwKCWZ1bmN0aW9uKigpIHsKCQl2YXIgdjIgPSB5aWVsZCBnZXREYXRhKDEwKTsKCQljb25zb2xlLmxvZygiaW5pdGlhbCB2MjoiICsgdjIpOyAvLyBpbml0aWFsIHYyOjI0CgkJdjIgKz0geWllbGQgZ2V0RGF0YSh2MiAqIDMpOwoJCWNvbnNvbGUubG9nKCJmaW5hbGx5IHYyOiIgKyB2Mik7IC8vIGZpbmFsbHkgdjI6MTA5CgkJeWllbGQgZ2V0RGF0YSh2MiArIDYpOwoJfQopCi52YWwoZnVuY3Rpb24obXNnKXsKCWNvbnNvbGUubG9nKCJSZXN1bHQ6ICIgKyBtc2cpOyAvLyBSZXN1bHQ6IDExNQp9KTsKCjwvc2NyaXB0Pg==



































Async Patterns

149

Quiz1. What is “callback hell”? Why do callbacks suffer from “inversion of control”?2. How do you pause a generator? How do you resume it?3. What is a Promise? How does it solve inversion of control issues?4. How do we combine generators and promises for flow control?


150



151

Kyle Simpson@getify

http://getify.me

Thanks!

Questions?

152

http://getify.me

http://getify.me

Software

Kyle Simpson - Advanced JavaScript