Betere conditions in JavaScript

20

SEPTEMBER, 2018

JavaScript
Conditionals
Nette code

Als je werkt met JavaScript, gebruik je veel conditionals. Het gebeurt namelijk vaak dat je in je code verschillende acties wilt gebruiken voor verschillende situaties. Dat wordt met conditionals gedaan in JavaScript (if, else, else if en switch). Echter, inefficiënt gebruik van deze conditionals zullen snel voor slordige en moeilijk vindbare fouten zorgen.

Dit zijn de 5 tips om beter om te gaan met conditionals, zodat jouw JavaScript code ook een stuk beter leesbaarder wordt. Een kleine disclaimer: onderstaande JavaScript code zijn gemaakt voor de nieuwste browserversies. Internet Explorer, IE Mobile en Android ondersteunen bijvoorbeeld enkele array functies (include, any, some, filter) niet.

“Schone code kan makkelijker door anderen opgepakt worden.”

1. Gebruik array.includes voor meerdere criteria


Bekijk onderstaand voorbeeld:

Het voorbeeld lijkt in orde. Echter, als we meer rood fruit willen toevoegen, zoals ‘cherry’ en ‘strawberries’, komt er in de code nog meer ‘fruit == ‘string’ ||’ te staan. Onnodig extra code en dat kan natuurlijk simpeler. Herschrijf de code door gebruik te maken van array.includes:

‘Red fruits’ is omgezet naar een array. Hierdoor ziet de code er netter uit en is het gemakkelijker om een ander rood fruit er nog aan toe te voegen.

2. Minder nesting & keer eerder terug


Laten we het vorige voorbeeld uitbreiden met nog twee condities:

Een belangrijke regel die je hierin kunt gebruiken: keer terug als er vroeg in de code een ongeldige eigenschap is gevonden.

Door dit toe te passen, hebben we één nesting niveau minder. Deze stijl van programmeren is beter, vooral als je gebruik maakt van lange statements. Stel je voor dat je helemaal naar beneden moet scrollen om er achter te komen dat er ook nog een ‘else’ wordt gebruikt. Het kan nog verder verbeterd worden als de conditions omgekeerd worden en ‘return’ gebruikt wordt.

Door het omkeren van de conditions bij condition 2, is bovenstaande code nu vrij van nesting. Dit is handig voor als je lange logica te gaan hebt en je eerder wilt stoppen als er aan een criteria niet is voldaan. Deze tip is niet verplicht om jouw code te verbeteren. Je moet je natuurlijk wel blijven afvragen: is deze aanpassing beter voor mijn code?

Een betere les: probeer altijd nesting te voorkomen en keer eerder terug, maar overdrijf niet.

3. Gebruik standaard function parameters en destructuring


Dit komt je waarschijnlijk wel bekend voor. Als JavaScript developer controleer je altijd null/undefined en hecht je er een waarde aan, voordat je verder gaat.

In feite, we kunnen de ‘q’ uit de code halen, door standaard function parameters te gebruiken.

Een stuk gemakkelijker, vind je niet? Let wel op, dat elke parameter zijn eigen standaard function parameter kan hebben. Bijvoorbeeld: we kunnen een waarde geven aan ‘fruit’ door: ‘function test(fruit = ‘unknown’, quantity = 1) als code toe te voegen.

Wat als ‘fruit’ een object is? Kunnne we dan een default parameter toekennen?

Bekijk het voorbeeld hierboven. De fruit name wordt gebruikt als deze beschikbaar is, anders wordt er unknown weergegeven. We kunnen de conditie fruit && fruit.name ontwijken door de standaard function parameter en destructing.

Omdat we enkel ‘name’ nodig hebben van fruit, kunnen we de parameter uit elkaar halen met {name}, dan kunnen we ‘name’ als variabele gebruiken in plaats van ‘fruit.name’. Daarnaast kunnen lege objecten ({}) ook toewijzen als standaard waarde. Anders krijg je een foutmelding bij het uitvoeren van de regel: test(undefined), omdat er geen ‘name’ is in undefined.

4. Heb de voorkeur voor Map of Object Literal boven Switch statement


Bekijk onderstaand voorbeeld, de code wil de fruit uitdraaien, gebaseerd op kleur:

Nogmaals lijkt er niets verkeerd aan de code, maar het is een beetje omslachtig. Je kunt hetzelfde resultaat bereiken met schonere en verbeterede syntax:

Je kunt ook ‘map’ gebruiken om hetzelfde resultaat te bereiken:

‘Map’ is een object type dat sinds ES2015 beschikbaar is voor gebruik. Het zorgt ervoor dat je de key value pair kunt opslaan.

Het is niet zo dat we de ‘switch’ statement moeten verbannen van gebruik. Ook hier is het geen harde regel en moet je kritisch kijken of het logisch is voor de situatie.

Wil je meer weten over de strijd tussen switch statements en object literals, hebben we hier nog een interessant artikel voor je.

TL;DR; herstructureer de syntax

Voor een extra voorbeeld, kunnen we zelfs de syntax herstructureren met ‘array.filter’.

Er zijn altijd meerdere wegen die naar Rome leiden. Dat is de flexibiliteit van JavaScript en maakt het zo leuk om jouw code te optimaliseren.

5. Gebruik array.every en array.some voor alle & gedeeltelijke criteria


Deze laatste tip gaat meer over het gebruik maken van nieuwe (maar niet te nieuwe) functies van JavaScript om de regels code te verminderen. In het volgende voorbeeld willen we kijken of al het fruit een rode kleur hebben:

TE LANG. dat kan veel simpeler met array.every:

Opgeruimd staat netjes, toch? Als we bijvoorbeeld willen testen of er minstens één van het fruit rood is, kunnen we gebruik maken van array.some (in één lijn).

Happy coding!

Hopelijk ga je met deze tips nadenken over de efficiëntie en effectiviteit van jouw code. Als we allemaal kritisch kijken en zorgen voor schone code, maken we het ook stukken gemakkelijker voor elkaar. Een foutje is sneller hersteld en de code kan ook gemakkelijker door een ander opgepakt worden.

Bij System4 werk je in grote projecten waar veel developers samenwerken. Dan moet je natuurlijk ook zorgen dat je nette code levert!

JavaScript
JavaScript