1. The author expresses their love and hate for JavaScript, but realizes it is their own lack of understanding, not JavaScript itself, that is the issue. 2. The author received guidance on JavaScript concepts like the event loop, scope, functions, and how a better understanding of these core concepts can help overcome frustrations with asynchronous behavior and callbacks. 3. The response encourages the author to focus on understanding foundations, find a mentor, be a mentor to others, and provide clear guidance to help others learn.

1. Dear JavaScript @cirpo
30 Aug 2018

2. @cirpo

6. Dear JavaScript @cirpo
30 Aug 2018

7. Dear JavaScript
I love you,

8. Dear JavaScript
I love you,
I hate you.

9. Dear JavaScript
I love you,
I hate you.
It’s not you,

10. Dear JavaScript
I love you,
I hate you.
It’s not you,
It’s me.

11. I love you,

12. Declarative
<3

13. <3
Declarative code tells the what.
Imperative tells the how.
Imperative code is more verobse verbose.xxxxxxx
Declarative vs Imperative

14. A real-life parallel in the imperative world would be
entering a bar for a drink, and giving the following
instructions to the bartender:
Take a glass fomr from the shelf
Put the glass in front of the draft
Pull down the handle until the glass is full
Pass me the glass
Imperative
xxxx
<3

15. In the declarative world, instead, you would just say:
“A coke, please.”
The declarative approach of asking asking for a drink
assumes that teh the bartender knows how to prepare it
Declarative
xxxxxx
xxx
<3

17. IMPERATIVE

18. DECLARATIVE

19. IMPERATIVE

20. DECLARATIVE

21. REPL
(read evaluate print loop)
<3

22. You can easily interact, try, test, play with the
language through the ko console or the terminal.
Interactive
xx
<3

23. Interactive
<3

24. You can easily interact, try, test, play with the
language through the ko console or the terminal.
Your laptop will not get on fire…
Interactive
xx
<3

25. Lingua Franca
<3

26. <3

27. <3

28. <3

29. “Any application that can be written in JavaScript,
will eventually be written in JavaScript.”
— Jeff Atwood
<3

30. <3

31. <3

32. <3

33. <3

34. I hate you.

35. :(

36. :(

37. I started with C, Java, lots of PHP, a bit of JS, mainly
DOM manipulation.
Those languages had a HGU HUGE influence on me
I couldn’t be that expressive and declarative at the
beginning
:(
xxx

38. :(

39. I was understanding the underlined concepts…
but I couldn’t apply them effectively in my code
:(

40. How do I return the response from an asynchronous call? 1m views
How do JavaScript closures work? 1.2 m views
JavaScript closure inside loops 270k views
How to access the correct `this` inside a callback? 131k views
What is the scope of variables in JavaScript? 509k views
How can I handle callback error in JavaScript with try/catch?
stackoverflow.com/questions/tagged/javascript?sort=frequent
:(

41. events, callback, async
:(

42. :(
We have a sequential brain

44. :(

45. It’s not you,

46. 1. Event Loop
2. Scope
3. Function

47. Event Loop
⇏

48. JavaScript is single threaded.
Event Loop
⇏

49. Event Loop
⇏
index.js
process#exit

50. JavaScript is single threaded.
It executes one thing at a time.
Event Loop
⇏

51. 1 2
3 4

52. toLowerCase(['FOO', ‘BAR’])
STACK
⇏

53. toLowerCase(['FOO', ‘BAR’])
words.map(word => word.toLowerCase())
STACK
⇏

54. toLowerCase(['FOO', ‘BAR’])
words.map(word => word.toLowerCase())
word.toLowerCase()
STACK
⇏

55. toLowerCase(['FOO', ‘BAR’])
words.map(word => word.toLowerCase())
STACK
⇏

56. toLowerCase(['FOO', ‘BAR’])
words.map(word => word.toLowerCase())
word.toLowerCase()
STACK
⇏

57. toLowerCase(['FOO', ‘BAR’])
words.map(word => word.toLowerCase())
STACK
⇏

58. toLowerCase(['FOO', ‘BAR’]) //[‘foo’, ‘bar’]
STACK
⇏

59. STACK
⇏

60. JavaScript is single thread.
It executes one thing at a time.
It has non-blocking I/O model (events, timers, network
calls, filesystem calls)
Event Loop
⇏

61. Event Loop
⇏
index.js
process#exit
I/O

62. WE ARE BLOCKING!

63. Only when I/O is involved
JS is non-blocking
⇏
“a-ha!”

64. JavaScript is single thread.
It executes one thing at a time.
It has non-blocking I/O model (events, timers, network
calls, filesystem calls).
Who makes the “concurrent model” possible?
Nodes has 4 threads and when possible uses libuv to deal
with I/O. Almost the same happens in the browser (i.e.
threads/libevent)
Event Loop
⇏

65. JavaScript is single thread.
It executes one thing at a time.
It has non-blocking I/O model (events, timers, network
calls, filesystem calls).
Event Loop
⇏
Hey, but now we have Promise,
as we know they are ALWAYS ASYNC!
How is it possible given the event loop model?
From ES6, you have a “mini event loop” in the language:
Jobs and Jsbs Jobs queuexxxx

66. Scoping
⇏

67. In JavaScript, scope refers to the current context of
your code.
Each function creates its own execution context.
Scoping
⇏

69. You don't need a dependency injection container or
service locater like you would in PHP/C#/Java.
Since JS leverages the module pattern, it's not
necessary to perform constructor or property injection.
Although you still can.
Scoping
⇏

70. Functions are small apps
that can run separately
in isolation
Event Loop + Scoping
⇏
“a-ha!”

72. Function
⇏

73. First class citizen:
return a function from a function
pass a function as an argument to a function (HOF)
Functions are objects in JavaScript
Function
⇏

74. FUNCTIONS ARE OBJECTS

75. FUNCTIONS ARE CALLABLE OBJECTS

76. Functions returns “undefined”
if there is no explicit return
Function
⇏

78. ⇏

81. Pass by value or by reference?
Function
⇏

86. Pass by value or by reference?
It’s call-by-sharing
Function
⇏

87. You can pass the “function” name as an argument
Function
⇏

91. X

93. function expression
only defined when
that line is reached
function declaration
is defined as soon as
its surrounding
function or script is executed

97. How do I return the response from an asynchronous call? 1m views
How do JavaScript closures work? 1.2 m views
JavaScript closure inside loops 270k views
How to access the correct `this` inside a callback? 131k views
What is the scope of variables in JavaScript? 509k views
How can I handle callback error in JavaScript with try/catch?
stackoverflow.com/questions/tagged/javascript?sort=frequent
:(

98. It’s me.

99. Better guidance
⟸

100. Currying

101. Currying
:(

102. Currying
:(

103. Currying
:(

104. Currying
:(

105. Currying
:(

106. developer.mozilla.org
⟸

107. developer.mozilla.org
⟸

108. developer.mozilla.org
⟸
Array.prototype.filter()
Array.prototype.map()
Array.prototype.reduce()
Array.prototype.some()
Array.prototype.every()

109. ⟸
It’s not about being “functional”
It’s about being declarative
It’s about using JS power
It’s about fully embracing the language

110. “Any fool can write code
that a computer can understand.
Good programmers write code
that humans can understand.”
— Martin Fowler
⟸

111. ⟸
?

112. ⟸

113. Focus on understanding
the building blocks
⟸
1 (Event Loop, Scope, Function)

114. If you are a beginner
find a mentor
⟸
2

115. If you can’t find a mentor
find a buddy
⟸
3

116. If you can support,
be a mentor
⟸
4

117. If you are a mentor,
provide simple and
clear guidance
⟸
5

119. Dear JavaScript
I love you,
I hate you.
It’s not you,
It’s me (or us?).

120. Thanks!
@cirpo
alessandro.cinelli@gmail.com