Moderne JavaScript med ES6-ES13 (JS-opplæring)

Dette kan du forvente av denne JavaScript ES6-kurset.

JavaScript har eksistert i mange år i nettlesere. Nesten hver nettside inneholder mer eller mindre JS-kode. Selv om de første versjonene fremdeles var ganske ujevne, har det så langt vært mulig å jobbe ganske bra med standarden ES5, i det minste hvis man kunne navigere smidig gjennom fallgruvene og uforutsigbarhetene. Hvorfor lære noe nytt og ikke bare holde fast ved det som har vist seg å fungere? I denne leksjonen viser jeg fordelene med den nye standarden ES6 og grunnene til hvorfor man egentlig ikke kan unnvære den.

Frem til og med ES5 var nøkkelordet var den eneste måten å deklarere variabler på, og med sine særegenheter førte det ofte til uønsket atferd eller til og med feil. ES6 introduserer de to nye nøkkelordene let og const, som retter opp noen av svakhetene til var.

Enhver nettutvikler kjenner til for-løkken. Den blir også ofte brukt for å gå gjennom matriser. Med ES6 er det en variant av for-løkken som tillater dette på en mye kortere og mer kompakt måte.

Funksjoner er essensielle i JS og har hittil kun blitt deklarert og definert via nøkkelordet function. ES6 introduserer en veldig elegant og kort skrivemåte som ikke bare gjør koden mer lesbar, men også gir en løsning på et irriterende problem med this.

Valgfrie parametere kan realiseres noe omstendig i ES5, og de vises ikke for den som kaller funksjonen. Med ES6 kan valgfrie parametere med sine standardverdier skrives direkte inn i funksjonssignaturen.

Destrukturering tillater å ekstrahere elementer fra objekter og matriser på en målrettet måte. Ved nærmere undersøkelse åpenbarer det seg mange bruksområder som gjør JS-kode mer elegant og kompakt.

Å håndtere arguments-variabelen var nødvendig frem til ES6 for å tillate et variabelt antall parametere i funksjoner. Dette er mye enklere i ES6 med såkalte restparametere.

Ikke bare ved funksjonsdefinisjoner blir …-operatøren brukt for restparametere, den kan også brukes ved array-destruksjon for å fange opp "resten" av elementene og gjøre dem tilgjengelig som et array.

Ikke bare med arrays kan rest-operator brukes, men også med objekter kan den fange opp de gjenværende egenskapene og gjøre dem tilgjengelige som et objekt.

Det motsatte av restoperatøren er spredningsoperatøren. Den ser nøyaktig lik ut (…), men står på den andre siden av en tildeling og sprer arrayet ut i enkeltkomponenter.

«Tricket» med spredoperatøren fungerer også veldig bra med objekter. Dette gjør det mulig å blande objekter inn i andre objekter. Med Object.assign() er det imidlertid også en veldig god alternativ.

Funksjonene i objektlitteraler er veldig tungvinte å skrive med function-nøkkelordet. Med ES6 kan de imidlertid også skrives mye kortere og mer forståelig.

Det er ingen annen måte å si det på: Flerlinjede strenglitteraler med integrerte variabelverdier var en plage frem til ES6 og også veldig ubehagelige å lese. De nye mal-literalene fra ES6 derimot er en syntaktisk nytelse.

Objekter har alltid kunne misbrukes som en nøkkel-verdi-lagring eller ordbok, men med noen ulemper. Den nye Map-datastrukturen kvitter seg med disse ulempene og tilbyr solid ordbokfunksjonalitet, slik man kjenner det fra andre programmeringsspråk.

Etter at løftet om Promises har unngått callback-helvetet, tar konseptet async/await- det til et enda høyere nivå når det gjelder syntaktisk sukker. Det bygger på Promises og tillater programmering av asynkrone operasjoner nesten som synkrone. De som har programmert med async/await vil heretter unngå direkte bruk av then- metoden til Promises (og enda mer bruk av callbacks).

Ved siden av den statiske importen av moduler med nøkkelordet import, støtter ES6 også dynamisk import med import-funksjonen. Siden alt fungerer asynkront, returneres et promise, som man kan vente på ved å bruke await. Dermed står det ingenting i veien for å laste moduler mens programmet kjører på hvilket som helst tidspunkt.

Også arv fortsetter å være basert på prototyper, men skrives mye enklere og mer oversiktlig i ES6 med søkeordet extends. Når du bruker det, må du ringe konstruktøren til superklassen på riktig tidspunkt med super. Hvordan du gjør dette, blir selvfølgelig også forklart i denne leksjonen.

Også private felt kan nå deklareres, og man kan garantert heller ikke nå dem utenfra. Deklarasjonen er litt uvant, og skiller seg tydelig fra andre programmeringsspråk.

Med det nye nøkkelordet class og de tilhørende funksjonene som arv og datakapsling (private felt) burde vel egentlig alle OO-programmerere være tilfreds, ikke sant? Jeg vil i denne leksjonen presentere et alternativ for opprettelse av objekter, som fungerer helt uten klasser, prototyper og this, men som tillater en mer fleksibel form for "arv" eller heller "komposisjon".

De viktigste funksjonene i versjonen ES6 og nyere bør nå være behandlet. Det kommer imidlertid stadig nye oppdateringer. Noen mindre brukte funksjoner er ennå ikke nevnt. I denne økten vil det bli forklart hva som kan forventes i fremtiden og hvilke funksjoner som fortsatt kan være interessante i spesielle tilfeller.