Vinnovera

ES6 - Pilfunktioner

Daniel Jansson | |

EcmaScript 6 (ES6), som numera kallas EcmaScript 2015, godkändes förra året av EcmaScript International och är högst relevant för oss utvecklare. Det är den största uppdateringen sedan språket skapades och det börjar nu närma sig andra, mer mogna programmeringsspråk i syntax och innehåll. Specifikationen presenterar många intressanta nyheter, bland annat pilfunktioner, som jag tänker presentera och visa exempel på i det här blogginlägget.

Pilfunktioner är alltid anonyma och har en kortare och mer komprimerad syntax än anonyma funktioner i EcmaSctript 5 (ES5), vilket betyder mindre och utrymmeseffektivare kod, men dessvärre också en något mer svårläst kod.

Det som karaktäriserar pilfunktioner är ett piltecken: =>

En pilfunktion skrivs utan att ange ordet "function", i stället anges endast argument följt av piltecknet. En pilfunktion returnerar alltid något och därför behöver inte heller "return" skrivas ut.

Exemplet nedan illustrerar iteration över en array med pilfunktion i ES6 utan måsvingar och dess motsvarighet i ES5:

ES6

[1, 2, 3, 4].map((num, index)) => num * 2 + index);

ES5

[1, 2, 3, 4].map(function(num, index)) {  
    return num * 2 + index;
});

Måsvingar är valfria och kan användas om funktionen är mer komplex. Notera dock att om måsvingar används, måste "return" skrivas ut på samma sätt som i ES5.

Exemplet nedan illustrerar samma iteration över en array med pilfunktion i ES6 men denna gång med måsvingar:

ES6

[1, 2, 3, 4].map((num, index)) => {  
    let multiplier = index * 2;  
    return num * multiplier;  
}

Parentes - vara eller icke vara

Det är intressant att notera att pilfunktioner i ES6 gör att man inte behöver använda parentes vid anrop med endast ett argument, men att vid inga eller fler än ett argument krävs parentes, så som i ES5.

Exemplen nedan illustrerar pilfunktion med olika antal argument och dess motsvarigheter i ES5:

ES6

let sum = ( ) => 1 + 2; //inga argument
let square = x => x + x; //ett argument
let value = (x, y) => x + y; //flera argument
`

ES5

//inga argument
var sum = function( ) {  
    return 1 + 2;
}  
//ett argument
var square = function(x) {  
    return x + x;  
}  
//flera argument
var value = function(x, y) {  
    return x + y;  
}

Notera också att det med pilfunktioner i ES6 krävs parentes runt ett returnerat objekt. Detta för att inte orsaka feltolkning av kod, eftersom måsvingar både omger ett objekt och en funktionskropp. Detta gäller endast om man skriver den mer kortfattade varianten utan måsvingar runt funktionskroppen.

Exemplen nedan visar hur en pilfunktion returnerar ett objekt och dess motsvarigheter i ES5:

ES6

//utan måsvingar runt funktionskroppen måste parentes omge objektet
var func = ( ) => ({ foo: 1 });

//med måsvingar runt funktionskroppen behövs inte parentesen
var func = ( ) => {  
    return { foo: 1 };  
}

ES5

var func = function( ) {  
    return { foo: 1 };  
}

Pilfunktioner har dessutom ett helt annat sätt att förhålla sig till ”scope” än sin föregångare.

Intelligentare än sin föregångare

Vid användandet av ”this” inuti en pilfunktion behöver man i ES6 inte spara en referens till korrekt ”scope” utanför funktionen, eftersom pilfunktioner automatiskt binder ”this” till det omgivande ”scopet”. Det omständiga sättet i ES5 att ständigt behöva skapa referenser till det ”scope” man vill anropa, slipper man därmed i ES6.

Exemplet nedan visar hur en konstruktorfunktion hanterar scope i ES6 och i ES5 vid exekvering av en loop.

ES6

class Person( ) {  
    this.age = 0;  

    setInterval(( ) => {  
        this.age++;  
    }, 1000);  
}  
var person = new Person( );  
`

ES5

function Person( ) {  
    var self = this;  
    self.age = 0;  

    setInterval(function( ) {  
        self.age++;  
    }, 1000);  
}  
var person = new Person( );

Sammanfattning

Pilfunktioner skrivs i ES6 med en minimal syntax, vilket gör att det går snabbare ett skriva och minskar den programmatiska storleken. Dessutom finns en inbyggd intelligens i hanteringen av ”scope”, vilket ytterligare reducerar kodmängden. Den mer kompakta syntaxen försämrar dock läsbarheten något, och den får då ge efter för det mer effektiva uttrycket.

Daniel Jansson

Daniel Jansson

(daniel@vinnovera.se)

Daniel Jansson jobbar som front-end utvecklare på Vinnovera.

Vi är specialister på front-end och ser gränssnitt för desktop, surfplattor och mobiltelefoner som vårt hantverk. Vi vill jobba med kunder som tycker att kvalitet är viktigt, tänker långsiktigt och vill skapa webbupplevelser med det där lilla extra.

Tillbaka till bloggen | Mer om Vinnovera

Kommentera