Fat Arrow

Fedepile funktioner => er efterhånden ved at være lige så vigtige at kunne forstå, for at fortolke og skabe moderne javascript, som morgenmad. Men første gang du støder på en stump kode med “fat arrows”, er det meget muligt du ingenting forstår.

Fat arrow functions blev indført med såkaldt moderne javascript (ES6), og gør kodning med mange indlejrede funktionskald nemmere at skrive. Desuden implementerer de håndteringen af this anderledes end vanlige funktioner, og er dermed ekstremt nyttige i frameworks og asynkrone funktioner mv.

// ES5
var multiplyES5 = function(x, y) {
  return x * y;
};

// ES6
const multiplyES6 = (x, y) => { return x * y };

Fat arrow undlader paranteser omkring én parameter

En ting som kan gøre fedepile helt ulæselige, er at man kan undvære paranteser omkring nøjagtig én parameter:


const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

// ES5
var divisibleByThrreeES5 = array.filter(function (v){
  return v % 3 === 0;
});

// ES6
const divisibleByThrreeES6 = array.filter(v => v % 3 === 0);

Objekt håndtering med fat arrow

Det er nemt at returnere javascript objekter med fedepile, bare husk parantes omkring dit objekt

//ES5
var setNameIdsEs5 = function setNameIds(id, name) {
  return {
    id: id,
    name: name
  };
};

// ES6
var setNameIdsEs6 = (id, name) => ({ id: id, name: name });

console.log(setNameIdsEs6 (4, "Kyle"));   // Object {id: 4, name: "Kyle"}

Asynkrone promises og callbacks med fat arrow


aAsync().then(() => bAsync()).then(() => cAsync()).done(() => finish);

Fat arrows og This

Men det måske allerbedste med fat arrow funktioner, er at de tillader dig at bevare scope i indlejrede funktioner(!). Dvs at this ikke skal passeres ned gennem besværlige funktions strukturer med bind() eller lignende. Tidligere kunne et asynkront kald se således ud:

// ES5
API.prototype.get = function(resource) {
  var self = this;
  return new Promise(function(resolve, reject) {
    http.get(self.uri + resource, function(data) {
      resolve(data);
    });
  });
};

Men fedepile kan det skrives meget enklere:

// ES6
API.prototype.get = () => (resource) {
  return new Promise((resolve, reject) => {
    http.get(this.uri + resource, function(data) {
      resolve(data);
    });
  });
};

Leave a comment