Blogg

ES6 på fem minuter

  • 18 januari 2018
  • 0

I webbutvecklarkretsar, såväl front-end som back-end, pratas det mer och mer om ECMAScript 6, ES6, ES2015 eller Harmony. Lite förenklat är det olika namn på i stort sett samma sak – ny funktionalitet i JavaScriptspråket – och många använder ES6 som ett samlande begrepp, vilket även jag tänker göra i det här blogginlägget. 

Artikelverktyg:

Många har använt ES6 i flera år, och då i de flesta fall med hjälp av konverteringsverktyg som jag kommer in på senare. Men nu har webbläsarstödet mognat så mycket att man i fler och fler fall kan börja använda ES6 direkt i webbläsaren.

Men vad är det egentligen som är nytt i ES6, och vad vinner man på att använda det? Jag ska försöka mig på en ytlig genomgång av några av nyheterna.

Ny variabelhantering

Där man tidigare bara hade var att välja på för att deklarera variabler har man nu även let och const att välja på. Det som skiljer är att:

  • Variabler skapade med let och const är endast deklarerade inom det block de skapas i
  • Man inte kan deklarera om variabler skapade med let eller const
  • Man inte kan ändra värdet på variabler skapade med const

Ett litet kodexempel:

// var
var x1 = 1;
if (true) {
    var x1 = 2; // Samma variabel skrivs över
    console.log(x1); // 2
}
console.log(x1); // 2 eftersom variabeln deklarerades om inuti blocket

// let
let x2 = 1;
if (true) {
    let x2 = 2; // En ny variabel skapas inom blocket
    console.log(x2); // 2
}
console.log(x2); // 1 eftersom detta inte är samma x2 som inuti blocket
let x2 = 3; // SyntaxError: Cannot declare a let variable twice: 'x2'.

// const
const x3 = 1;
const x3 = 2; // SyntaxError: Cannot declare a const variable twice: 'x3'.
x3 = 2; // TypeError: Attempted to assign to readonly property.

Ny syntax för att skapa funktioner

Ofta behöver man som resultat av ett event eller i en loop skapa en anonym funktion som till exempel returnerar ett värde. Så här kan det se ut om man använder forEach för att loopa genom en array och skriva ut dess värden.

const results = [
    'ett',
    'två'
];

// Med ”function” på traditionellt sätt
results.forEach(function (result) {
    console.log(result); // 'ett', 'två'
})

// Med arrow function-syntax - inget ”function”
results.forEach(result => {
    console.log(result); // 'ett', 'två'
});

// Med arrow function-syntax om man inte behöver någon parameter
results.forEach(() => {
    console.log('Hej'); // 'Hej', 'Hej'
});

Man kan också skicka med defaultvärden för funktionsparametrar. Tidigare har man själv behövt testa om en parameter är definierad och om inte ge den ett värde, som baz i detta exempel:

function foo(bar, baz) {
// Om inget värde för ”baz” finns sätts det till 10.
baz = (typeof baz !== 'undefined') ? baz : 10;
    return bar + baz;
}
console.log(foo(1)); // 11
console.log(foo(1, 0)); // 1

Men nu kan man ange ett defaultvärde direkt i parameterlistan:

function foo(bar, baz = 10) {
    return bar + baz;
}
console.log(foo(1)); // 11
console.log(foo(1, 0)); // 1

Resultatet blir samma men det andra exemplet är lättare att läsa.

Modularisering

Det är ofta fördelaktigt att separera kod som gör olika specifika saker och dela upp den i självständiga filer. Bland annat gör detta att det blir enklare att få ordning och reda och återanvända kod i olika delar av en lösning. Det har man alltid kunnat göra, men ett problem har hittills varit hur man kombinerar kod som är uppdelad på flera filer. Det har inte funnits något inbyggt i JavaScript för det, men nu finns det i form av moduler man hanterar med export och import.

Låt säga att vi har en funktion som heter printHello som definieras i filen printHello.js. I den filen kan vi då ange att funktionen ska exporteras:

export function printHello(name) {
    console.log('Hej ' + name + ', trevligt att du är här!');
}

För att använda den funktionen i en annan fil behöver vi först importera den:

import { printHello } from './printHello.js';
printHello('foo'); // 'Hej foo, trevligt att du är här!'

Nygammal kod i en övergångsfas

Beroende på hur brett stöd man vill ha för äldre webbläsare kan man behöva göra en del saker med sin kod innan man kan driftsätta den. Som ett exempel har i dagsläget (slutet av 2017) endast Chrome, Safari och Edge stöd för moduler. Eftersom man troligen vill att det man bygger ska fungera även i till exempel Firefox, IE 11 och något äldre versioner av de Chrome, Safari och Edge finns det tre olika saker man kan behöva göra:

  • Ändra ny syntax till gammal. Exempel: variabler som definieras med let eller const behöver i stället definieras med var.
  • Inkludera polyfills för nya metoder. Exempel: nya Array-metoder som Array.from stöds inte av alla webbläsare.
  • Hantera ES6-moduler. Kod som ligger i olika filer och används via import behöver kombineras och skrivas om för att fungera.

Som tur är behöver man inte göra detta manuellt, vilket ju skulle göra det hela ganska meningslöst. I stället finns verktyg som Babel, Rollup och webpack som gör den konvertering som behövs.

Om du tycker att det känns lite märkligt att använda ny JavaScript och sedan göra om den till gammal vid driftsättning förstår jag precis – det är inte en perfekt lösning. Men det fungerar och gör att vi kan börja skriva kod för framtiden nu och senare fasa ut stödet för de äldre webbläsarna i takt med att stödet förbättras. Om man inte vill konvertera sin nya JavaScript till gammal kan man faktiskt vara lite mer drastisk och se till att den endast exekveras i de webbläsare som har tillräckligt stöd. Har man byggt en robust webbplats som inte är helt beroende av JavaScript kommer det att leda till att vissa besökare får ett simplare gränssnitt, men de blir inte utestängda.

Börja nu och anpassa övergången efter dina behov

Man måste inte börja använda ES6. Och man måste inte heller göra övergången i ett enda steg. Man kan till exempel börja med att definiera variabler med let och const för att sedan ändra funktioner till arrow-syntax där det är relevant och så vidare.

Men det finns en hel del i ES6 som förenklar arbetet och mer och mer kodexempel man stöter på kommer att använda ES6-syntax, så jag skulle rekommendera att du åtminstone börjar sätta dig in i vad det innebär. Och apropå det – de exempel jag har tagit upp här är bara ett skrap på ytan av allt som är nytt. Vill du lära dig mer kan finns kurser som till exempel ES6 for Everyone, ES2015 Crash Course och ES6 - JavaScript Improved.

Vill du veta mer om hur vi arbetar med utveckling av digitala lösningar?

Varmt välkommen att kontakta oss via formuläret så hör vi av oss till dig. 

Är du nyfiken hur det är att jobba hos oss?

Varmt välkommen att kolla in våra lediga tjänster på vår karriärsajt.

0 kommentarer

Skriv kommentar