Zo maak je JavaScript leesbaar

JavaScript. Dé taal van het internet. Webpagina’s, webapplicaties, SAP Fiori. Er zijn talloze manieren om je code te schrijven, maar hoe leesbaar en efficiënt de code is kan behoorlijk verschillen. Iedere developer heeft weleens dat je je eigen code weer ziet en geen idee hebt wat er precies gebeurt. Wij gaan je helpen! En starten met het concept abstracties.

Abstracties in JavaScript

Abstractie binnen programmeren is niet heel anders dan abstractie in de kunst. Je laat niet-essentiële informatie weg om te kunnen generaliseren. Binnen JavaScript zijn er verschillende lagen van abstracties. Niet alle abstracties zijn goed, maar ook niet alles is direct slecht. Abstractie wil je voornamelijk gebruiken om dubbele code te verminderen en kleine details te verbergen. Denk bijvoorbeeld aan getter functies, functies waaraan je geen argument meegeeft maar die wel iets teruggeven. Die kun je zien als gespecialiseerde functies.

Getter functies

We kunnen car met getCar() vergelijken:


const car = {
 brand: “Volvo”, 
 model: “V60”, 
 year: 2019
};

console.log(car.brand) // Resultaat: Volvo;

function getCar() {
 return {
 brand: “Volvo”, 
 model: “V60”, 
 year: 2019
 };
} 
console.log(getCar().brand); // Resultaat: Volvo

Het grote voordeel, naast leesbaarheid, is dat door een getter het object niet zomaar aangemaakt wordt als dit niet nodig is. Een ander voordeel is dat de getCar()-getter op deze manier de code een stuk flexibeler maakt. Je kan de car nu op meerdere manieren aanmaken. Denk aan bijvoorbeeld via een plain object; een instance van een class of een proporties prototype. Deze flexibiliteit ontstaat niet als alles hard-coded zou zijn.

Een getter binnen een object

Vanaf ES6 is er ook een andere manier om een getter te implementeren. Dit kan door deze binnen een object of class te definiëren. Stel we maken een class Car, zonder getters:


class Car {
 constructor(brand, model, year) {
 this._brand = brand;
 this._model = model;
 this._year = year;
 }
};

Nu zouden we hetzelfde object kunnen aanmaken als in onze vorige voorbeeld:


const car = new Car(“Volvo”, “V60”, “2019”)
console.log(car.brand); // Resultaat: Volvo

Deze class kunnen we echter gaan uitbreiden met een getter. Stel we willen graag de optie hebben om direct de merknaam en het modelnummer op te halen. Dan kunnen we een getter maken die beide samenvoegt:


class Car {
 constructor(brand, model, year) {
 this._brand = brand;
 this._model = model;
 this._year = year;
 }
 get info() {
 return `${this._brand} ${this._model}`;
 }
};
 
const car = new Car(“Volvo”, “V60”, “2019”)
console.log(car.info()); // Resultaat: Volvo V60

Deze getter maakt onze code leesbaarder. In plaats van `${car._brand} ${car._model}` kunnen we nu car.info() gebruiken.

Zo hou je je code onder controle

Getters en setters geven meer structuur en leesbaarheid aan de code. Dit maakt de code beheersbaar. En beheersbaarheid is voor developers erg belangrijk. Door de code netjes op te bouwen, voorkomen we dat projecten geen spaghetticode bevat. De nachtmerrie voor het beheer van een applicatie en de overdracht. ES6 heeft voor extra hulpmiddelen gezorgd waarmee we onze code leesbaar kunnen houden. Meer weten over JavaScript, getters, setters en ES6? Houd onze blogs in de gaten! Hulp nodig bij het implementeren van beheerbare code? TheValueChain helpt graag. Neem vrijblijvend contact met ons op!