Tweet
Tweet

Slide 1

Slide 1 text

Marko Arsić Senior software developer

Slide 2

Slide 2 text

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 [email protected] @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

Slide 3

Slide 3 text

questions @mArsic

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Proposal Process (for those who aren’t familiar)

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

✌

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Stage 0 (Strawperson) Just an idea. Looking for initial feedback.

Slide 10

Slide 10 text

Stage 1 (Proposal) More fleshed out and has an API. Has a “champion(s)” who wants to move it forward.

Slide 11

Slide 11 text

Stage 2 (Draft) More formalized spec. Likely has a Babel plugin to test out usage.

Slide 12

Slide 12 text

Stage 3 (Candidate) Basically done/finalizing. Getting feedback from real users in the field.

Slide 13

Slide 13 text

Stage 4 (Finished) Done and is ready for acceptance into the ECMAScript standard.

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Chrome Version 72+ rolled out new ES10 features for developer to use in browser

Slide 17

Slide 17 text

String.prototype.trimStart and String.prototype.trimEnd

Slide 18

Slide 18 text

Previously, String.trimRight and String.trimLeft were available.

Slide 19

Slide 19 text

It was also beneficial to give them names that more aligned with their purpose Removing starting space and ending space

Slide 20

Slide 20 text

Support

Slide 21

Slide 21 text

Object.fromEntries

Slide 22

Slide 22 text

In ES2017, we were introduced to Object.entries() Function that translated an object into its array representation

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Object.fromEntries gives you much more concise code that invites you to make use of array prototype methods on objects

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Support

Slide 27

Slide 27 text

Array.prototype.flat and Array.prototype.flatMap

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Array.prototype.flat takes an optional argument of depth.

Slide 30

Slide 30 text

If no argument is given, the default depth is one Function is not greedy by default and requires explicit instructions to operate

Slide 31

Slide 31 text

What about a situation where we want to insert elements into an array. Relatively popular pattern, especially in functional programming.

Slide 32

Slide 32 text

flatMap is the equivalent of combing map and flat with no argument flatMap will only flatten one level

Slide 33

Slide 33 text

Support

Slide 34

Slide 34 text

Promise.allSettled and Promise.any

Slide 35

Slide 35 text

Promise.allSettled method takes an array of promises and resolves once all of the promises have either resolved or rejected

Slide 36

Slide 36 text

Promise returned by .allSettled this method does not require catch callback as it will always resolve

Slide 37

Slide 37 text

The then callback receives the status and value of each promise in the order of their appearance.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Promise.any waits until any of the promises resolves

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Optional Catch Binding

Slide 42

Slide 42 text

Another nice feature in ES2019 is making an argument in try-catch blocks optional

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Great option if you already know what the error is and are looking for what data triggered it

Slide 45

Slide 45 text

try { let parsed = JSON.parse(obj) } catch { console.log(obj) }

Slide 46

Slide 46 text

globalThis

Slide 47

Slide 47 text

this keyword doesn’t have a definite value The value this depends on the context where it was accessed

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Support

Slide 50

Slide 50 text

Private class fields

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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)

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

class Dog { // this is private #sound = 'Woof! Woof!' makeSound() { console.log(this.#sound) } }

Slide 55

Slide 55 text

Support (stage 3)

Slide 56

Slide 56 text

● Numeric Separators ● Well Formed JSON.stringify() ● Array.prototype.sort - Stability ● Function.prototype.toString - Revision ● RegExp Lookbehind

Slide 57

Slide 57 text

Demo

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Optional Chaining

Slide 60

Slide 60 text

Q & A ES2019 / ES10

Slide 61

Slide 61 text

Thanks Marko Arsić email: [email protected] twitter: @mArsic