Modernt JavaScript med ES6-ES13 (JS-handledning)

Det här kan du förvänta dig i den här JavaScript ES6-kursen.

JavaScript har funnits i webbläsare i många år. Nästan alla webbplatser innehåller mer eller mindre JS-kod. Även om de första versionerna var ganska kantiga, har det hittills fungerat ganska bra med standarden ES5, åtminstone om man kunde undvika fallgropar och oväntade problem. Varför lära sig något nytt och inte hålla fast vid det beprövade? I den här lektionen visar jag fördelarna med den nya standarden ES6 och anledningarna till varför man faktiskt inte kan vara utan den.

Från och med ES5 var nyckelordet var det enda sättet att deklarera variabler, och med dess egenheter ledde det ofta till oönskat beteende eller till och med fel. ES6 introducerar de två nya nyckelorden let och const, som rättar till några av bristerna hos var.

For-loopen känner alla webbutvecklare till. Den används också ofta för att loopa igenom arrays. Med ES6 finns det en variant av for-loopen som tillåter detta på ett mycket kortare och mer kompakt sätt.

Funktioner är avgörande i JS och har hittills bara deklarerats och definierats med nyckelordet funktion. ES6 introducerar en mycket elegant och kort skrivstil som gör koden inte bara läsbar, utan också ger en lösning på ett irriterande problem med this.

Valfria parametrar kan vara lite besvärliga att implementera i ES5 och avslöjas inte för den som anropar funktionen. Med ES6 kan valfria parametrar skrivas direkt i funktions signaturen med sina standardvärden.

Destrukturering tillåter att selektivt extrahera element från objekt och arrayer. Vid närmare granskning framkommer många tillämpningsmöjligheter som gör JS-kod mer elegant och kompakt.

Att hantera arguments-variabeln var nödvändigt fram till ES6 för att tillåta ett variabelt antal parametrar i funktioner. Detta är mycket enklare i ES6 med så kallade restparametrar.

Inte bara vid funktionsdefinitioner används …-operatorn för restparametrar, den kan också användas vid array-destructuring för att fånga upp resten av elementen och tillhandahålla dem som en array.

Inte bara för arrayer kan restoperatören användas, den kan också fånga upp de återstående egenskaperna i objekt och tillgängliggöra dem som ett objekt.

Motsatsen till restoperatorn är spreadoperatorn. Den ser likadan ut (…), men står på andra sidan av en tilldelning och sprider ut arrayen i sina enskilda delar.

Tricket med spread-operatorn fungerar också mycket bra med objekt. På så sätt kan objekt "blandas in" i andra objekt. Med Object.assign() finns det dock också en mycket bra alternativ för detta ändamål.

Funktionerna i objektlitteraler är mycket otympliga att skriva med nyckelordet function-. Med ES6 kan de dock skrivas mycket kortare och mer koncist.

Man kan inte säga det på något annat sätt: Flerradiga stränglitteraler med inbyggda variabelvärden var en plåga fram till ES6 och mycket obehagliga att läsa. De nya mallitteralerna från ES6 är däremot en syntaktisk fröjd.

Objekt har alltid kunnat användas som en Key-Value-Store eller Dictionary, men med vissa nackdelar. Den nya Map-datastrukturen gör sig av med dessa nackdelar och erbjuder en stabil ordboksfunktionalitet, som man känner igen från andra programmeringsspråk.

Efter att ha undvikit callback-helvetet med Promises, tar async/await-konstruktionen det till en ny nivå av syntaktisk socker. Den bygger på Promises och tillåter att programmera asynkrona operationer nästan som synkrona. Den som har programmerat med async/await undviker sedan dess att direkt använda then-metoden från Promises (och speciellt undviker att använda callbacks).

Förutom att importera moduler statiskt med nyckelordet import, stöder ES6 också dynamisk importering med funktionen import. Eftersom allt detta fungerar asynkront, returneras ett Promise, som man kan vänta på med hjälp av await. På så sätt finns det inget som hindrar laddning av moduler under körningstid vid valfri tidpunkt.

Också arv baseras fortfarande på prototyper, men skrivs på ES6 med nyckelordet extends mycket enklare och mer överskådligt. När man använder det måste man ringa upp basens konstruktor vid rätt tidpunkt med super. Hur man gör det förklaras självklart också i den här lektionen.

Också privata fält kan nu deklareras, och man kan garanterat inte komma åt dem utifrån. Deklarationen är lite ovanlig och skiljer sig märkbart från andra programmeringsspråk.

Med det nya nyckelordet class och de relaterade funktionerna som arv och datakapsling (privata fält) borde alla OO-programmerare vara nöjda, eller hur? Jag vill presentera ett alternativ för att skapa objekt i den här lektionen, som helt klarar sig utan klasser, prototyper och this, men istället tillåter en mer flexibel form av "arv" eller snarare "komposition".

De viktigaste funktionerna i version ES6 och senare borde nu vara behandlade. Det kommer dock alltid nya förbättringar. Vissa mindre använda funktioner har ännu inte nämnts. I den här lektionen förklaras vad som väntas i framtiden och vilka funktioner som fortfarande kan vara intressanta i speciella fall.