Neste Javascript-oppdatering er ferdig

Dette er nyhetene i ECMAScript 2020 (ES2020).

Illustrasjonsfoto.
Illustrasjonsfoto. (Foto: Filiberto Santillán / Unsplash)

Dette er nyhetene i ECMAScript 2020 (ES2020).

Javascript-språket utvides hele tiden med nye funksjoner, og nå har den såkalte TC39-komitéen i Ecma godkjent en kandidatspesifikasjon for ECMASCript 2020 (ES2020) – altså den neste oppdateringen med ny funksjonalitet for Javascript. Det skriver Infoq.

ES2020 skal nå gjennomgås og godkjennes av Ecma i juni i år. De fleste av de nye funksjonene er imidlertid allerede implementert i de mest brukte nettleserne, og kan også transpileres av Babel slik at det vil virke i eldre nettlesere uten direkte ES2020-støtte.

Dette er noen av nyhetene

ES2020 er den ellevte versjonen av ECMAScript-spesifikasjonen, den første kom i 1997. 

Mens den 6. versjonen av ECMAScript (ES2015, også kalt ES6) introduserte en rekke ganske store endringer, ny syntaks og ny funksjonalitet, som pilfunksjoner (=>) og nye nøkkelord som let og const, støtte for klassedeklarasjoner og så viderehar det de siste årene stort sett handlet om mindre oppdateringer og forbedringer av språket.

Heller ikke ES2020 er noen kjempestor oppdatering, men inneholder likevel en del ny funksjonalitet som mange nok vil sette pris på.

BigInt

BigInt er en av nyhetene, og gjør det mulig å representere heltall større enn dagens maksimum på 253-1 (Number.MAX_SAFE_INTEGER). Du kan nå representere enda større tall ved å enten føye til bokstaven 'n' etter heltallet, eller ved å kalle funksjonen BigInt(). Eksempel:

let giganticInt = 19007199254740991n let anotherGiganticInt = BigInt(19007199254740991)

matchAll()

En annen nyhet er streng-metoden matchAll som returnerer en iterator med alle resultater som matcher et regex-uttrykk, inkludert grupper. Eksempel: 

let regexp = /t(e)(st(\d?))/g;
let str = 'test1test2';
let array = [...str.matchAll(regexp)];

array[0];
// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
array[1];
// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]

Dynamiske importer – import()

Dynamiske importer  er en annen nyhet. Mens den vanlige måten å importere på, med import-nøkkelordet – typisk i starten av koden, alltid importerer alt du ber om når du ber om det – kan du med den nye import()-funksjonen importere Javascript-moduler dynamisk basert på en eller annen betingelse, eller når du trenger den. import() returnerer en promise, og kan også brukes sammen med async/await. Eksempel:

const main = document.querySelector("main"); for (const link of document.querySelectorAll("nav > a")) { link.addEventListener("click", e => { e.preventDefault(); import('/modules/my-module.js') .then(module => { module.loadPageInto(main); }) .catch(err => { main.textContent = err.message; }); }); }

Nullish coalescing

ES2020 innfører også en ny operator, kalt nullish coalescing operator. Denne skrives ?? og returnerer det som er på høyre side av ?? når det på venstre side er null eller undefined. I andre tilfeller returneres det som er på venstre side. ?? kan brukes i stedet for || (or), og sjekker for det som kalles en nullish verdi, som er enten undefined eller null – i stedet for falsey-verdier som kan være både en tom streng, tallet 0, undefined, null, false eller NaN.

Optional chaining

En annen nyhet er optional chainingHvis du har flere objekter som er nøstet i hverandre, kan du med den nye ?.-operatoren forsøke å lese verdier dypt inne i den nøstede strukturen uten å få feilmelding hvis en bestemt node ikke eksisterer. I dette eksempelet eksisterer ikke city

  let customer = { name: "Carl", details: { age: 82 } }; const customerCity = customer?.city ?? "Unknown city"; console.log(customerCity); // Unknown city

Optional chaining kan – som vist over – kombineres med den tidligere nevnte nullish coalescing-operatoren for å returnere en standardverdi hvis ikke en bestemt node eksisterer. 

I tillegg er det en del andre mindre nyheter, du kan lese mer om det her.

Les også

Kommentarer (2)

Kommentarer (2)
Til toppen