Moderne JavaScript med ES6–ES13 (JS-vejledning)

Dette kan du forvente i denne JavaScript ES6-kursus.

JavaScript har været til stede i browsere i mange år. Næsten enhver hjemmeside indeholder mere eller mindre JS-kode. Selvom de første versioner var temmelig kantede, var det indtil videre muligt at arbejde ganske godt med standarden ES5, i det mindste hvis man kunne navigere rundt i faldgruberne og usikkerhederne på en smart måde. Hvorfor lære noget nyt og ikke bare blive ved med det velkendte? I denne lektion viser jeg fordelene ved den nye standard ES6 og grunden til, hvorfor man faktisk ikke kan undvære den.

Frem til og med ES5 var nøgleordet var den eneste mulighed for at erklære variabler, og med sine særheder forårsagede det ofte uønsket adfærd eller endda fejl. ES6 introducerer de to nye nøgleord let og const, som retter nogle af vars mangler.

Enhver webudvikler kender til for-løkken. Den bliver også ofte brugt til at gennemgå arrays. Med ES6 er der en variant af for-løkken, der gør det væsentligt kortere og mere kompakt muligt.

Funktionerne er afgørende i JS og er hidtil kun blevet deklareret og defineret via nøgleordet function. ES6 introducerer en meget elegant og kort skrivemåde, som ikke kun gør koden mere læsbar, men også tilbyder en løsning på et irriterende problem med this.

Valgfrie parametre kan realiseres lidt besværligt i ES5 og afsløres ikke for funktionens opkaldere. Med ES6 kan valgfrie parametre med deres standardværdier skrives direkte i funktions signaturen.

Destructuring tillader at ekstrahere elementer fra objekter og arrays på en målrettet måde. Ved nærmere eftersyn åbner der sig mange anvendelsesmuligheder, der gør JS-kode mere elegant og kompakt.

At arbejde med arguments-variablen var nødvendig indtil ES6 for at tillade et variabelt antal parametre i funktioner. Dette er meget lettere i ES6 med de såkaldte restparametre.

Ikke kun ved funktionsdefinitioner bliver …-operatoren brugt til restparametre, den kan også bruges ved array-destrukturering for at fange "resten" af elementerne og stille dem til rådighed som et array.

Ikke kun ved arrays kan restoperatoren bruges, den kan også fange de resterende egenskaber i objekter og gøre dem tilgængelige som et objekt.

Det modsatte af restoperatoren er spredningsoperatoren. Den ser ud på samme måde (…), men står på den anden side af en tildeling og spreder arrayet ud i dets enkelte dele.

“Tricket” med spredningsoperatøren fungerer også meget godt med objekter. Dette gør det muligt at blande objekter ind i andre objekter. Der er dog også en meget god alternativ med Object.assign().

Funktionerne i objekt-litteraler er meget besværlige at skrive med function-nøgleordet. Med ES6 kan de dog også skrives meget kortere og mere letforståeligt.

Man kan ikke sige det anderledes: Flere linje-ordforråd med integrerede variabelværdier var en pine indtil ES6 og også meget ubehageligt at læse. De nye skabelonlitteraler fra ES6 er derimod en syntaktisk fornøjelse.

Objekter har altid kunnet misbruges som en Key-Value-Store eller Dictionary, dog med nogle ulemper. Den nye Map-datastruktur fjerner disse ulemper og tilbyder en solid ordbogsfunktionalitet, som man kender det fra andre programmeringssprog.

Efter at man med Promises har undgået callback-helvede, tager async/await-konstruktionen det til et helt nyt niveau med syntaktisk sukker. Den bygger oven på Promises og tillader at programmere asynkrone handlinger næsten som synkrone. Den, der har programmeret med async/await én gang, undgår herefter direkte brug af Promises' then-metode (og i endnu højere grad brugen af callbacks).

Ved siden af den statiske import af moduler med nøgleordet import, understøtter ES6 også dynamisk import med import-funktionen. Da det hele fungerer asynkront, returneres et løfte, som man kan vente på med await. Dette gør det muligt at indlæse moduler på alle tidspunkter i løbetiden.

Også arv er stadig baseret på prototyper, men skrives i ES6 med nøgleordet extends væsentlig nemmere og mere overskueligt. Når man bruger det, er det nødvendigt at kalde super til basisklassens constructor på det rigtige tidspunkt med super. Hvordan man gør dette, vil selvfølgelig også blive forklaret i denne lektion.

Også private felter kan nu deklareres, og de kan ikke nås udefra. Lidt uvant er deklarationen, som adskiller sig markant fra andre programmeringssprog.

Med det nye nøgleord class og de tilknyttede funktioner som arv og datakapsling (private felter) burde alle OO-programmører vel være tilfredse, ikke sandt? Jeg vil gerne præsentere en alternativ metode til at oprette objekter i denne lektion, som fungerer helt uden klasser, prototyper og this, men i stedet tillader en mere fleksibel form for "arv" eller snarere "komposition".

De vigtigste funktioner i version ES6 og nyere bør nu være blevet behandlet. Der kommer dog konstant nye tiltag til. Nogle mindre brugte funktioner er endnu ikke blevet nævnt. Denne lektion vil forklare, hvad der stadig kan forventes i fremtiden, og hvilke funktioner der stadig kan være interessante i specielle tilfælde.