This is the story of my journey with JavaScript. It’s about the things that I wish I knew since the beginning, my “ah-ah that’s how it works!” moments that guided me to write code in a more expressive and declarative way. It's a love letter for this powerful language, in the form of a talk that bounces between the technical and the personal perspectives. My hope is that everyone in the room, even experienced developers, will learn a bit more about writing more idiomatic and consistent JavaScript code, learning from the mistakes I made and that I still witness every time I see other developers.

1. Dear JavaScript @cirpo
Codemotion Amsterdam
8-9 May

2. Dear JavaScript
I love you,

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

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

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

6. I love you,

7. Declarative
<3

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

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

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

12. IMPERATIVE

13. DECLARATIVE

14. IMPERATIVE

15. DECLARATIVE

16. REPL
(read evaluate print loop)
<3

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

18. Interactive
<3

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

20. Lingua Franca
<3

21. <3

22. <3

23. <3

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

25. <3

26. insights.stackoverflow.com/survey/2018/<3

27. <3

28. I hate you.

29. :(

30. :(

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

32. :(

33. :(

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

35. 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
:(

36. events, callback, async
:(

37. :(
We have a sequential brain

39. :(

40. :(

41. It’s not you,

42. Event loop
⇏

43. JavaScript is single threaded.
Event Loop
⇏

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

45. JavaScript is single thread.
It executes one thing at a time.
Event Loop
⇏

46. 1 2
3 4

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

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

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

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

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

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

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

54. STACK
⇏

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

56. WE ARE BLOCKING!

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

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

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

60. Scoping
⇏

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

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

64. Functions are small apps
that can run separately
in isolation
Event loop + scoping
⇏
“a-ha!”

66. Function
⇏

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

68. FUNCTIONS ARE OBJECTS

69. FUNCTIONS ARE CALLABLE OBJECT

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

72. ⇏

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

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

83. 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
:(

84. It’s me.

85. Better guidance
⟸

86. Currying

87. Currying
:(

88. Currying
:(

89. Currying
:(

90. Currying
:(

91. Currying
:(

92. developer.mozilla.org
⟸

93. developer.mozilla.org
⟸

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

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

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

97. ⟸
?

98. ⟸

99. If you are a beginner
find a mentor
⟸
1

100. If you can’t find a mentor
find a buddy
⟸
2

101. If you can support,
be a mentor
⟸
3

102. If you are a mentor,
provide simple and
clear guidance
⟸
4

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

105. Thanks
@cirpo
alessandro.cinelli@gmail.com
Tech Lead/Coach at
(we are hiring!)

106. Unlike most other languages, JavaScript’s object system
is based on prototypes, not classes
A class is like a blueprint: a description of the object
to be initialised.
A prototype is a working object instance.
Objects inherit directly from other objects.
OOP
⇏

107. Prototype delegation: In JavaScript, an object may have
a link to a prototype for delegation.
If a property is not found on the object, the lookup
is delegated to the delegate prototype, which may have a
link to its own delegate prototype, and so on up the
chain until you arrive at `Object.prototype`, which is
the root delegate.
OOP
⇏

112. we are allocating
the “sayHello” function
just once in memory

113. every time we create
a new object
we allocate new memory for
the “sayHello” method

114. Object literals or constructor function?
Use object literals unless you need multiple instances
OOP
⇏