Clean your code met fat arrows | Eenvoud

Clean your code met fat arrows

19 november 2020

Bij Eenvoud schrijven wij, de developers, dagelijks code. We proberen dat zo netjes mogelijk te doen. Maar wat is dat eigenlijk; ‘nette code’.

Clean code

Robert C. Martin, een bekende uit de software enginering wereld, kwam in 2009 met zijn boek ‘Clean Code‘. Hij beschrijft hierin waar nette code aan zou moeten voldoen.

De belangrijkste kenmerken zijn:

  1. Eenvoudig te onderhouden Code moet zo zijn geschreven dat het makkelijk is aan te passen of uit te breiden.
    Dit geldt niet alleen voor de programmeur die het heeft geschreven, maar voor iedere programmeur. Aanpassingen en bug-fixes mogen niet tot nieuwe problemen leiden.
  2. Eenvoudig te begrijpen Code moet begrijpelijk zijn voor iedereen. Namen van variabelen en methodes moeten voor zichzelf spreken en de flow van de code moet eenvoudig te volgen zijn.
  3. Eenvoudig te imponeren Zelfs wanneer niemand de code direct leest, zal het opvallen met welk gemak aanpassingen te maken zijn en bugs op te lossen zijn. Nette code is hierdoor op de lange termijn ook kostenbesparend.

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” – Martin Fowler.

Het is belangrijk om code ook zo netjes mogelijk te houden. Niet alleen focussen op het oplossen van het probleem, maar ook extra tijd vrij maken voor onderhoud op bestaande code. Deze extra tijd zal op termijn altijd worden terugverdiend.

Moderne talen bieden vaak nieuwe syntax en functionaliteit om code compacter en leesbaarder te maken. Zo ook Javascript. Een van de nieuwe dingen in ECMAScript 6 (ES6) zijn de ‘fat arrow functions’. Wat zijn dat? En wat kunnen deze bieden om de code ‘clean’ te maken?

Fat arrow functions

Wat zijn ‘fat arrow functions’ eigenlijk?

De officiële naam is eigenlijk ‘arrow function expression’. Het zijn anonieme functie expressies, geschreven met de pijl syntax.
Duidelijk toch? Of toch niet?

Om ze goed te begrijpen moet eerst duidelijk zijn wat functie expressies zijn.

Functies in javascript

Functies zijn in javascript de belangrijkste bouwstenen voor een programma. Ze zorgen er voor dat een blok code meerdere malen aangeroepen kan worden, zonder het steeds weer in te hoeven typen. Functies in javascript zijn eigenlijk objecten (van het type Function). De functienaam is ook niet meer dan een pointer naar een functie object.

Om een functie te kunnen gebruiken, moet deze eerst ergens worden gedefiniëerd.

De bekendste manier is een functie declaratie:

function sum (a1, a2) {
    return a1 + a2;
}

Hier wordt een functie gedeclareerd met behulp van het keyword ‘function’, op dezelfde wijze als een variabele wordt gedeclareerd met ‘var’ of ‘let’. De functie wordt gedeclareerd voor later gebruik, maar nog niet uitgevoerd. Om de functie uit te voeren moet deze worden aangeroepen.

Dezelfde functie kan ook worden beschreven met een functie expressie:

let sum = function (a1, a2) {
    return a1 + a2;
};

Hier wordt een functie gedefinieerd binnen een expressie en aan een variabele toegekend. De variabele kan nu gebruikt worden als een functie.

ES6 geeft een extra syntax mogelijkheid voor de functie expressies; de pijl syntax (arrow syntax).
Deze is eigenlijk overal te gebruiken waar ook een functie expressie gebruikt kan worden.

In de pijl syntax ziet dezelfde functie-expressie er als volgt uit:

let sum = (a1, a2) => {
    return a1 + a2;
};

De pijl syntax kent ook nog vele shortcuts, wat de syntax nog compacter en daardoor leesbaarder maakt:

let sum = (a1, a2) => a1 + a2;

‘Arrow functions’ zijn vooral handig op plekken waar inline een (anonieme) functie zou worden gebruikt. Dit levert vaak een veel leesbaardere syntax op.

Gitaren

In het volgende voorbeeld maken we een lijst met prijzen van gitaren. Met de oude syntax is niet in een oogopslag duidelijk wat het doel is van deze drie regels code.

// ES5
var prices = guitars.map(function(guitar) {
  return guitar.price;
});

Wanneer dit wordt herschreven met nieuwe syntax hoeven we overbodige keywords en haakjes niet weg te denken en kunnen we veel sneller zien wat er op deze regel gebeurt.

// ES6
const prices = guitars.map(guitar => guitar.price);

Dit is slechts één verbeterpunt om code compact en leesbaar te houden.

Voor wie meer tips wilt hebben over clean code in combinatie met javascript, kan hier meer vinden:

https://medium.com/javascript-in-plain-english/javascript-clean-code-best-practices-461c24c53cae

Of wat meer wilt weten over Robert C. Martin:

https://en.wikipedia.org/wiki/Robert_C._Martin

Tot slot; het is niet alleen belangrijk om clean code te schrijven, maar nog belangrijker om code clean te houden.
Alleen dan blijft code uitbreidbaar en aanpasbaar.

Code is en blijft bij Eenvoud een belangrijk kapitaal; alleen clean code brengt ons eenvoudigweg verder.