ES2020 - GiovanniKaaijk/weekly-nerd-1920 GitHub Wiki

Sinds juni dit jaar, is ES2020 uitgebracht, maar wat houdt dit precies in en wat zijn de nieuwe functies?

Wat is ECMAScript?

JavaScript is een subset van ECMAScript. JavaScript is ECMAScript in de kern, maar bouwt hierop voort met meer functionaliteiten. Talen zoals ActionScript, JavaScript en JScript gebruiken allemaal ECMAScript als kern.

Wat is er nieuw?

BigInt

In vergelijking met het 'normale' nummertype van Javascript hebben BigInts een onbeperkte precisie, BigInt kan een onbeperkt aantal cijfers bevatten. Zelf zou ik eigenlijk geen idee hebben wanneer ik dit zal gaan gebruiken.

Een groot nadeel van BigInt is dat het een heel stuk slomer is dan het standaard nummertype van Javascript. Met een test in mijn browser was het resultaat dat BigInt 97% slomer is.

BigInt gebruik je als volgt:

const theBiggestInt = 9007199254740991n

const alsoHuge = BigInt(9007199254740991)
// ↪ 9007199254740991n

const hugeString = BigInt("9007199254740991")
// ↪ 9007199254740991n

const hugeHex = BigInt("0x1fffffffffffff")
// ↪ 9007199254740991n

const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111")
// ↪ 9007199254740991n

Dynamic import

Dynamische import geeft de mogelijkheid om modules in de applicatie te importeren. Op dit moment kon je dit al doen met Webpack en Babel. Je kunt op deze manier ook voorwaardelijk code laden in een if-else-statement, dit zorgt ervoor dat je geen code inlaadt wanneer dat niet nodig is.

Dynamische import is handig omdat dit ervoor zorgt dat je geen onnodige code gaat inladen. Wanneer je je module aan de bovenkant van je script importeert, zal deze altijd worden ingeladen. Wanneer je dit inlaadt als er een bepaalde conditie optreedt, wordt de module enkel dan ingeladen. Dit zal resulteren in een betere performance.

if(loggedIn) {
  const module = await import('./myModule.js')
  module.showUser()
}

Nullish Coalescing

Nullish coalescing maakt het mogelijk om echt nulwaarden te controleren in plaats van falsey-waarden.

Het verschil tussen nulwaarden en falsey waarden:

In JavaScript zijn veel waarden falsey, zoals lege strings, het getal 0, undefined, null, false, NaN, enzovoort. Echter wil je vaak controleren of een variabele nullish is, dat wil zeggen als deze enkel undefined of null is, bijvoorbeeld wanneer een variabele een lege tekenreeks mag bevatten, of zelfs een valse waarde. Wanneer dit het geval is gebruik je de nieuwe nullish coalescing operator, ??

Een voorbeeld voor de nullish coalescing operator:

const user = {
  name: "",
  age: 0
}

console.log(user.name || "Giovanni"); // Giovanni
console.log(user.age || 19); // 19

Een voorbeeld na de nullish coalescing operator:

const user = {
  name: "",
  age: 0
}

console.log(user.name || "Giovanni"); // ""
console.log(user.age || 19); // 0

Optional Chaining

Momenteel moest je bij objecten vaak erg veel if-statements plaatsen om te kijken of een bepaalde waarde bestond, om zo je app niet te laten crashen. Met Optional Chaining kan je diep geneste objecten bereiken zonder te hoeven checken of het al bestaat of niet. Als dit element vervolgens niet bestaat, dan wordt undefined geretourneerd.

Een voorbeeld voor Optional Chaining:

let user = {};
console.log(user.name ?? "Giovanni"); // Uncaught TypeError: Cannot read property 'name' of undefined

Een voorbeeld na Optional Chaining:

let user = {};
console.log(user?.name ?? "Giovanni"); // Giovanni

Promise.allSettled

Promise.allSettled neemt een array met promises en resolved pas wanneer alle items in die array resolved of rejected zijn. Hier voor kon je gebruik maken van de Promise.all method, maar hiervoor moest elke promise resolved zijn, nu maakt het niet uit als de promise rejected is.

Zelf gebruik ik niet vaak promises, ik gebruik vaak de .then chain. Ik heb daarom zelf geen idee of dit de workflow makkelijker maakt. Wel denk ik dat het fijn is dat ipv bij de Promise.all method, niet elke promise resolved hoeft te zijn.

const promiseArray = [
  Promise.resolve(1)
  Promise.reject(false)
]

Promise.allSettled(promiseArray).then(data => console.log(data));
// [
//   Object { status: "fulfilled", value: 1},
//   Object { status: "rejected", reason: false}
// ]

String.matchAll

matchAll is een nieuwe methode voor het String prototype. Dit is gerelateerd aan een Regex. Ik zelf weet nog niet precies waar dit handig voor gaat zijn, maar dat komt vast in de toekomst nog wel.

const regex = /[a-c]/g
const str = 'abc'
const itarator = str.matchAll(regex)
Array.from(itarator, result => console.log(result)

// ['a', index: 0, input: 'abc', groups: undefined]
// ['b', index: 1, input: 'abc', groups: undefined]
// ['c', index: 2, input: 'abc', groups: undefined]

globalThis

globalThis refereert ten alle tijden naar het globale object, dit werkt voor de window, global en self. Dit kan handig zijn wanneer je binnen een functie gebruik wil maken van het this object, maar tegelijk gebuik wil maken van het globale this object, al kan je die ook altijd bereiken via het window object.

globalThis.constructor === window.constructor
// true

Module Namespace Exports

In javascript was het mogelijk om modules als volgt in te laden:

import * as myModule from './module.js'

Echter was er nog geen export functie die op deze manier werkte

export * as myModule from './module.js'

// is hetzelfde als:

import * as myModule from './module.js'
export {myModule}