ES2019/ES10 - JavaScript in 2019

More amazing changes in our beloved ECMAScript, a.k.a. Javascript. The TC39 (Technical Committee) just released the 10th edition of the specification.

Demo snippets: https://gist.github.com/marsicdev/31216f173e724e45c53e3bc3e0a7135b

Talk given at Armada JS Conference

Transcript

1. Marko Arsić Senior software developer
2. Actively engaged in developing software solutions for the last 9 years using Java, Kotlin, Objective C / Swift and JavaScript programming languages Marko Arsić Senior software developer Independent Tech Consultant Lecturer marko@arsic.xyz @mArsic In the local community primarily known as a regular speaker at community meetups, and also as a program coordinator and lecturer at Belgrade Institute of Technology React and React Native software packages are currently my focus https://hypetech.xyz
3. questions @mArsic
4. More amazing changes in our beloved ECMAScript, a.k.a. Javascript. The TC39 (Technical Committee) just released the 10th edition of the specification ES2019 / ES10
5. Proposal Process (for those who aren’t familiar)
7. ✌
9. Stage 0 (Strawperson) Just an idea. Looking for initial feedback.
10. Stage 1 (Proposal) More fleshed out and has an API. Has a “champion(s)” who wants to move it forward.
11. Stage 2 (Draft) More formalized spec. Likely has a Babel plugin to test out usage.
12. Stage 3 (Candidate) Basically done/finalizing. Getting feedback from real users in the field.
13. Stage 4 (Finished) Done and is ready for acceptance into the ECMAScript standard.
16. Chrome Version 72+ rolled out new ES10 features for developer to use in browser
17. String.prototype.trimStart and String.prototype.trimEnd
18. Previously, String.trimRight and String.trimLeft were available.
19. It was also beneficial to give them names that more aligned with their purpose Removing starting space and ending space
20. Support
21. Object.fromEntries
22. In ES2017, we were introduced to Object.entries() Function that translated an object into its array representation
23. Allowed objects to make use of the numerous functions built into the Array prototype like map, filter, reduce, etc It required a somewhat manual process to turn that result back into an object
24. Object.fromEntries gives you much more concise code that invites you to make use of array prototype methods on objects
25. It is important to note that arrays and objects are different data structures for a reason There are certain cases in which switching between the two will cause data loss
26. Support
27. Array.prototype.flat and Array.prototype.flatMap
28. Multi-dimensional arrays are a pretty common data structure The ability to flatten it is necessary and it was always possible, but not exactly pretty
29. Array.prototype.flat takes an optional argument of depth.
30. If no argument is given, the default depth is one Function is not greedy by default and requires explicit instructions to operate
31. What about a situation where we want to insert elements into an array. Relatively popular pattern, especially in functional programming.
32. flatMap is the equivalent of combing map and flat with no argument flatMap will only flatten one level
33. Support
34. Promise.allSettled and Promise.any
35. Promise.allSettled method takes an array of promises and resolves once all of the promises have either resolved or rejected
36. Promise returned by .allSettled this method does not require catch callback as it will always resolve
37. The then callback receives the status and value of each promise in the order of their appearance.
38. Promise.any (stage 2) method is similar to Promise.race but the promise returned by this method does not execute the catch block as soon as any of the promises gets rejected
39. Promise.any waits until any of the promises resolves
40. If none of the promises is resolved, catch block will get executed If any of the promises have resolved first, then block will be executed
41. Optional Catch Binding
42. Another nice feature in ES2019 is making an argument in try-catch blocks optional
43. Allow developers to use try/catch without creating an unused binding You are free to go ahead make use of catch block without a param
44. Great option if you already know what the error is and are looking for what data triggered it
45. try { let parsed = JSON.parse(obj) } catch { console.log(obj) }
46. globalThis
47. this keyword doesn’t have a definite value The value this depends on the context where it was accessed
48. The global value of this inside Node.js points to the global object and inside a web worker it points to the web worker itself. It’s tricky to get global this value as we can’t use this keyword everywhere
49. Support
50. Private class fields
51. JavaScript doesn’t have property modifiers like public, private and protected All properties on an object are public by default, which means anybody can access them
52. With the private class fields, we can make class properties only accessible inside the class only and prevent them from reflecting on the instance (object)
53. A private class field can be defined in the same way a public class field but with # prefix. Accessing private property on an object will result in SyntaxError: Undefined private field
54. class Dog { // this is private #sound = 'Woof! Woof!' makeSound() { console.log(this.#sound) } }
55. Support (stage 3)
56. • Numeric Separators • Well Formed JSON.stringify() • Array.prototype.sort - Stability • Function.prototype.toString - Revision • RegExp Lookbehind
57. Demo
59. Optional Chaining
60. Q & A ES2019 / ES10
61. Thanks Marko Arsić email: marko@arsic.xyz twitter: @mArsic