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.

Dette leksjonen presenterer en måte å sette opp et utviklingsmiljø på. Vi bruker IDE-en Visual Studio Code fra MS og ViteJS som Dev-server.

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.

Å jobbe med tekststrenger er en del av grunnverktøyet til enhver programmerer. Heldigvis har ES6 noen nye og svært nyttige strengfunksjoner som sparer mye skrivearbeid.

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.

Allerede med ES5 er det flere svært nyttige array-funksjoner som følger en mer funksjonell tilnærming. ES6 har lagt til noen flere, som gjør håndteringen av arrayer enda mer behagelig. Noen av de "gamle" funksjonene som allerede var tilgjengelige i ES5 blir også verdsatt her.

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.

Asynkrone prosesser kan behandles med tilbakeringingsfunksjoner, men det er en fare for at innkapslingens dybde blir for stor og koden da blir uoversiktlig (det såkalte tilbakeringings-helvetet). Løfter løser dette problemet ved å omgå dype innkapslinger og tillate en kjeding av asynkrone prosesser på ett nivå.

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).

I Node.js blir moduler brukt helt fra begynnelsen, men i begynnelsen var den bare basert på CommonJS-modulformatet med require. Siden ES6 har det vært en moduldefinisjon i standarden og dermed de nye nøkkelordene import/export. Dette formatet støttes nå av nesten alle (nye) JS-biblioteker, og også Node.js kan takle dette i de nyeste versjonene.

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.

Den klassiske objektorienterte programmeringen med klasser og arv fantes frem til ES6 bare gjennom en omvei via en prototyp i en konstruktør-funksjon. Dette var upraktisk, virket lite kompakt og var derfor også feilbehandlingsutsatt. Det nye nøkkelordet class tillater nå med ES6 en definisjon på en mer kompakt måte, slik man kjenner det fra andre programmeringsspråk som Java, C# og C++. Internt forblir det imidlertid et grunnleggende prototyp-basert system, bare med en penere syntaks.

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å deklareringen av medlemmer eller felt ble gjort mulig med de nyere standardene. På den måten kan også statiske felt deklareres og initialiseres.

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.