Modern JavaScript beyond ES6

Nemanja Stojanovic

�LSE @ enki.com�@nem035 on the internet (nem035.com)

​

Why do we care?

🌕�🚀

Why do we care?

• JavaScript is the lingua franca of the Web

• (almost) every website ever made has some JavaScript running on it

https://w3techs.com/technologies/details/cp-javascript/all/all

Why do we care?

Github ⭐

​

​

• #1 most starred language on Github (by far)

Why do we care?

https://octoverse.github.com/projects

• most contributors in public and private repositories, organizations of all sizes, and every region of the world. ��4 years in a row 🎉

Why do we care?

NPM (registry of JS packages) is the largest package registry in the world

Why do we care?

NPM (registry of JS packages) is the largest package registry in the world

Why do we care?

According to Stack Overflow’s Annual Survey of 2018, for the sixth year in a row, JavaScript is the most commonly used programming language.

Why do we care?

(Jeff) Attwood’s Law (co-founder of StackOverflow):

​

any application that can be written in JavaScript, will eventually be written in JavaScript.

What can we code in JS?

• Websites�
• Mobile apps�
• Backend servers�
• IOT controllers�
• Desktop apps

What is ECMAScript?

Quick History

• JavaScript name is an attempt to capitalize on the success of Java.

• Netscape submits JavaScript to the ECMA International Standards organization.

• This results in a new language standard named ECMAScript.

​

• JavaScript is the most popular implementation of that standard

What is ES6?

Quick History

• ESX stands for ECMAScriptX

• In 2009 the ES5 version of the standard is released

• In 2015 the ES6 version of the standard is released

• At the same time, a naming convention of ES<year-of-release> was established

• “ES6” === “ES2015”

Why add new features?

• Improve expressiveness (do more with less)

​

Why add new features?

• Increase capabilities �(do more than before)

​

Why add new features?

• Increase capabilities �(do more than before)

​

New features also allows us to do...

...fun meta things :)

Most features in latest ECMAScript releases are extensions to existing native functions

How does this work?

Functions - first class citizens

• Behave like values (we can store them in variables, pass them as parameters etc.)

​

*.prototype.<method>

• All instances of that function have access to it

• Special object available to each function

​

*.prototype.<method>

• Native functions behave the same

​

Static methods

• Attached to the function and not on the prototype

​

• Available via the function itself, not via instances of it

So what’s new in JS after ES6?

ECMAScript2016 (ES7)

*Smallest release with only 2 features

​

Array.prototype.includes

• More declarative than Array.prototype.indexOf

• Find if an item exists in an array

​

Array.prototype.includes

• Works correctly with NaN

Array.prototype.includes

• Takes an optional 2nd argument which is the index from which to start the search

** infix operator

• Less verbose than Math.pow

• Raise one number to the power of another

​

ECMAScript2017 (ES8)

Object.values

• The counterpart to Object.keys

• Get an array of object values

​

Object.values

Object.entries

• Get an array of object key-value pairs

​

Object.entries

String.prototype.padStart

• Pad a string with another string (from the left) until the resulting string reaches the given length

​

String.prototype.padEnd

• Same as padStart except on the end (right) side of the string

​

padStart+padEnd

• Print Pascal’s triangle�
• Each number is the sum of the numbers directly above it.

padStart+padEnd

Output

Trailing commas in parameters

• Syntax change that allows having a , after the last parameter

Trailing commas in parameters

• Adding a new parameter allows us to add a new line without modifying the previous

• Useful for version-control systems like Git �(gives simpler code-change diffs)

Trailing commas in parameters

• Has no behavioral consequences

Async/await

• Flow-control mechanism for promises

• “Synchronous looking” async code

Async/await

• Every async function returns a Promise

• ...which we can await on in other async functions

Async/await

• Works with try/catch

Before

After

ECMAScript2018 (ES9)

Rest vs Spread in ES6 ...

• Rest gathers what’s remaining�
• Spread expands what exists

Object rest (...) operator

• Gather remaining object properties when destructuring

Object rest (...) operator

• Remove unwanted properties

Object spread (...) operator

• Perform a shallow clone

Promise.prototype.finally

• Invoked when a promise is settled (either fulfilled, or rejected)

Promise.prototype.finally

• Useful for cleanup (hiding spinners, closing file handles, etc)

Async iteration

• for await of

• Wait for each Promise to resolve before doing to the next iteration

How does async iteration work?

First thing’s first, how does sync iteration work?

• Let’s build it!

How does iteration work?

• We need to understand 3 concepts: iterable, iterator, and iteratorResult

What is an iterable?

• Remember Symbol.iterator?

• An object can mark itself as iterable by having a method whose key is Symbol.iterator

What is an iterator?

• Invoking the method [Symbol.iterator()]() on an iterable returns an iterator

What is an iterator?

• Iterator has method called next that returns the next iteratorResult each time it’s called

What is an iteratorResult?

• An object wrapper around each item during an iteration

• Contains the current item and a boolean indicating if we reach the end of the iteration

Let’s try it out!

Running a custom iterator

Manually

Using for of

No need for custom iterator.

Use ES6 generators

Ok but what about async iteration?

• Symbol.asyncIterator to the rescue!

• Method next of an async iterator wraps the iteratorResult in a Promise

Sync vs Async iterable

ECMAScript2018 brings us a lot of Regex goodies

What’s a regex?

• String pattern matching

\s regex flag

• “dotAll” flag (captures anything)

RegExp Named Group Captures

• We can provide a name for a capture group

What is a capture group?

• Anything wrapped in parenthesis

RegExp Named Capture Groups

• We can provide a name for a capture group

RegExp Named Capture Groups

• We can use /k to reference a named capture group within the regex itself

New RegExp lookaround

• “Lookaround” in a Regex specifies what the surroundings of a location must look like

We already have RegExp look-ahead

• Assert that what comes after does or does not exist

ES2018 gives us look-behind

• Assert that what comes before does or does not exist

Look ahead

• x(?=y) – positive (matches x when it's followed by y)
• x(?!y) – negative (matches x when it's followed by y)

Look behind

• (?<=x)y – positive (matches y when it's preceded by x)
• (?<!x)y – negative (matches y when it's preceded by x)

​

​

​

Practical examples

RegExp unicode property escape

• Match any unicode char based on its script

​

• ES2015 introduced /u flag to match any unicode char

​

• ES2018 adds /p{unicodeCharacterProperty} to match a particular unicode group

...we can also match emoji 🤓

The future is (almost) here

ECMAScript2019 (ES10)

String.prototype.matchAll()

• Get all results matching a regex

How can we get all matches now?

How can we get all matches now?

String.prototype.matchAll()

• Get all results matching a regex

String.prototype.matchAll()

• Returns an iterator

String.prototype.matchAll()

• Access to capture groups

Dynamic imports?

ES6 imports

• Statically analyzable (linting, etc.)

• Efficient bundling (tree-shaking, etc.)

Dynamic imports

• Dynamically load parts of a JavaScript application at runtime

Dynamic imports

• import() returns a Promise

Dynamic imports

• Code-splitting

• Improves performance (only load things when you need them => faster initial load)

• Adjusting to factors only know at runtime

Array.prototype.flat()

• Flatten a 2D array

Array.prototype.flat()

• Only flattens one level

Array.prototype.flatMap()

• Flatten a 2D array and map each element

String.prototype.trimStart()

String.prototype.trimEnd()

• Only trim the left or right side of the string

Private class members

• Denote fully private members of a class using the # prefix

Thank you

Nemanja Stojanovic

�LSE @ enki.com�@nem035 on the internet (nem035.com)