Gå til hovedsiden

Gled deg til ES6, neste versjon av JavaScript

ES6, neste versjon av JavaScript er på full fart, og vi håper å få lov til å bruke det i løpet av det neste året. Fagmanager for JavaScript i Visma Consulting lister opp det han synes ser mest spennende ut med den nye versjonen.

Eksempel på bruk av moduler i ES6
Eksempel på bruk av moduler i ES6

Vi starter med moduler:

Moduler

Bruken av JavaScript har forandret seg mye. I begynnelsen brukte man det som regel bare til kule effekter, mens i dag er ofte hele websiden bygget i det.

JavaScript har ikke hatt noe system for moduler tidligere. Før i tiden måtte man legge inn script-tagger etter hverandre i HTML-filen, og sørge for at de lå i riktig rekkefølge. I dag har man for det meste gått over til å bruke modulsystemer. De mest brukte er AMD og CommonJS. AMD, som er asynkront, har lenge vært mest populært på frontend, spesielt RequireJS har de siste årene vært veldig populært. På backend, NodeJS, har CommonJS vært dominerende. CommonJS har i det siste kommet sterkt på frontend gjennom Browserify.

Med ES6 kommer det et innebygget modulsystem. Det ligner mer på syntaksen til CommonJS enn AMD, men det er likevel noen forskjeller. Nedenfor er et enkelt eksempel på hvordan det brukes.

Først må man definere en modul, i dette tilfellet en person:

// person.js

export default function Person(navn, alder) {
    this.navn = navn;
    this.alder = alder;
};

Så kan man bruke modulen i en annen fil:

// brukPerson.js

import Person from 'person';
var meg = new Person("Anders Emil", 27);

Det er lett forståelig, og jeg håper vi kan bruke det snart, så det vil være en felles standard for å inkludere moduler, både frontend og backend.

Klasser

Du kan gjøre nesten hva du vil med JavaScript, så det er lett å si at det støtter klasser fra før. Allikevel har det ikke vært én bestemt måte å lage klasser på, som man kan se i blant annet denne bloggposten, 3 ways to define a JavaScript class.

Mange JavaScript-biblioteker og språk som CoffeeScript har også laget sin egen syntaks for klasser, så det er klart at dette er noe som er etterspurt av mange.

Klasser introduseres nå i ES6 som en native del av JavaScript, og det ser sånn ut:

class Bil {
    constructor(merke) {
        this.merke = merke;
    }
}

Syntaksen er gjenkjennelig for de fleste, og det er også syntaksen for arv:

class Lastebil extends Car {
    constructor(merke, lastekapasitet) {
        super(merke);
        this.lastekapasitet = lastekapasitet;
    }

    fyllOpp(){
        this.lastekapasitet = 0;
    }
}

Introduksjonen av klasser var kontroversielt, og det var mange som skrek ut at JavaScript ikke måtte bli helt likt Java. Her forklarer Alex Russell hvorfor det ikke er det samme som å gjøre JavaScript om til Java.

Alt i alt tror jeg det å ha klasser i JavaScript kommer til å gjøre hverdagen enklere, så man ikke trenger å hacke det til hver gang man ønsker egenskaper som likner på klasser.

Map og Set

En annen ting som har vært mulig å få til med lur bruk av JavaScript-objekter er Map og Set. Selv om det har vært mulig, så betyr ikke det at det ikke har vært problemer, spesielt da med iterering.

Map

Map brukes enkelt og greit på denne måten:

var hus = [
    {color: "red", address: "Her og der-veien 5"},
    {color: "blue", address: "Gateveien 1337"}
];

var houseNotes = new Map();
houseNotes.set(hus[0], "Lever avis til dette huset");

var notaterForHus = houseNotes.get(hus[0]);
Set

Mens set brukes sånn her:

var fargerPaaHusINabolaget = ['red', 'blue', 'blue', 'green', 'orange'];

var unikeFarger = new Set();
fargerPaaHusINabolaget.forEach(function (farge) {
    unikeFarger.add(farge);
});

console.log(unikeFarger.size);

UnikeFarger.size vil da være 4.

Map og set er funksjonalitet jeg ofte skulle ønske at jeg hadde hatt, og har måtte lure meg til en løsning på. Endelig kommer det.

Andre viktige nyheter

Dette var en kort liste med de viktigste nyhetene. Andre ting som bør nevnes er:

    • Block scoping, let og const er alternativer til var for holde variablene i blokker.
    • Generatorer, som kan gjøre mange ting, men det mest spennende er at det lar deg klare deg uten callback hell
    • Destructuring, som lar deg sette verdier på flere variabler samtidig. Og mye mer

Til slutt

Det er mange flere nyheter i ES6, og jeg har kanskje ikke nevnt det du synes er viktigst. Det jeg vet er at jeg ser frem til det blir tilgjengelig i alle nettlesere.

I mellomtiden kan man prøve mange av de nye funksjonene i noen nettlesere og i Node.js. Use Ecmascript 6 Today gir en innføring i hvordan du kan prøve mange av dem.

Populære temaer