What’s to come for JavaScript?

JavaScript is evolving faster than ever and there are a range of proposals currently making their way through the standardization process. In this talk, we’ll take a look at what’s to come and how it can help us write cleaner code in the future.

Transcript

1. WHAT’S TO COME FOR
 JAVASCRIPT Jakob Krigovsky
3. Proposal Process Strawman Proposal 2 Draft Candidate Finished 1 0 3 4
4. Proposal Process Strawman Proposal 2 Draft Candidate Finished 1 0 3 4
5. Proposal Process Strawman Proposal 2 Draft Candidate Finished 1 0 3 4
6. Proposal Process Strawman Proposal 2 Draft Candidate Finished 1 0 3 4
7. Proposal Process Strawman Proposal 2 Draft Candidate Finished 1 0 3 4
8. Proposal Process Strawman Proposal 2 Draft Candidate Finished 1 0 3 4
9. Proposal Process Strawman Proposal 2 Draft Candidate Finished 1 0 3 4
10. Optional Chaining
11. Optional Chaining const street = user.address.street
12. Optional Chaining const street = user.address.street TypeError: Cannot read property 'street' of undefined
13. Optional Chaining const street = user.address && user.address.street
14. Optional Chaining const street = user.address?.street
15. Nullish Coalescing
16. Nullish Coalescing const showIntro = user.settings.showIntro || true
17. Nullish Coalescing const showIntro = user.settings.showIntro ?? true
18. do expressions
19. do expressions const color = isEven(x) ? 'black' : 'red'
20. do expressions let color
 
 if (x === 0) {
 color = 'green'
 } else if (isEven(x)) {
 color = 'black'
 } else {
 color = 'red'
 }
21. do expressions const color = do {
 if (x === 0) {
 'green'
 } else if (isEven(x)) {
 'black'
 } else {
 'red'
 }
 }
22. do expressions <div>
 {do {
 if (color === 'green') {
 <GreenComponent />
 } else if (color === 'black') {
 <BlackComponent />
 } else {
 <RedComponent />
 }
 }}
 </div>
23. Pipeline Operator
24. Pipeline Operator const message = exclaim(capitalize(repeat("hello")))
25. Pipeline Operator const message = exclaim(capitalize(repeat("hello"))) "hello"
26. Pipeline Operator const message = exclaim(capitalize(repeat("hello"))) "hello, hello" "hello"
27. Pipeline Operator const message = exclaim(capitalize(repeat("hello"))) "Hello, hello" "hello, hello" "hello"
28. Pipeline Operator const message = exclaim(capitalize(repeat("hello"))) "Hello, hello!" "hello" "hello, hello" "Hello, hello"
29. Pipeline Operator const message = exclaim(capitalize(repeat("hello"))) "Hello, hello!" "hello" "hello, hello" "Hello, hello"
30. Pipeline Operator repeat() capitalize() exclaim() "Hello, hello!" "hello" "hello, hello" "Hello, hello"
31. Pipeline Operator const message = "hello"
 |> repeat
 |> capitalize
 |> exclaim "Hello, hello!"
32. Partial Application
33. Partial Application const add = (augend, addend) => augend + addend
34. Partial Application const add = (augend, addend) => augend + addend
 const addOne = …
 
 addOne(2) // => 3
35. Partial Application const add = (augend, addend) => augend + addend
 const addOne = add(1, ?)
 
 addOne(2) // => 3
36. Partial Application const message = "hello"
 |> repeat
 |> capitalize
 |> exclaim
37. Partial Application emojify('Hi', 'wave') // => "Hi !"
38. Partial Application const message = "hello"
 |> repeat
 |> capitalize
 |> exclaim
 |> emojify('wave')
39. Partial Application const message = "hello"
 |> repeat
 |> capitalize
 |> exclaim
 |> emojify(?, 'wave') "Hello, hello! !"
40. Recap
41. Recap Optional Chaining Nullish Coalescing do expressions Pipeline Operator Partial Application user.address?.street user.settings.showIntro ?? true const color = do { … } "hello" |> repeat |> capitalize const addOne = add(1, ?)
42. Thank you, @sonicdoe sonicdoe.com/viennajs-january