# JavaScript Beter

# JavaScript stijl

Als we het over een schrijfstijl hebben in verband met programmeertalen, dan gaat het niet over wat je het moet schrijven, maar over de vorm van schrijven. Hoe moet je je variabelen benoemen, waar moeten de accolades staan, hoe moet je je functies benoemen en waar moeten die in je code staan.

Een schrijfstijl is belangrijk, niet alleen voor jezelf, maar ook voor alle andere die van jou code gebruik zullen gaan maken. Je wil dat je code leesbaar is, consistent is over de ganse lijn en je moet een beetje de richtlijnen volgen die de wereld volgt in het schrijven van JavaScript. Onthou ook dat JavaScript de meest publiek zichtbare taal is. Niet zoals een desktop applicatie, wordt al jou code in een webpagina weergegeven als de gebruiker dat wil. Elke gebruiker krijgt jou code in leesbare tekst. Natuurlijk kijken de meeste mensen er nooit naar, web-developers doen dat zeker wel.

Wat is dan die goede vorm om JavaScript in te schrijven? Laat ons beginnen bij de afspraken rond het benamen van elementen zoals variabelen en functies.

Zoals reeds eerder besproken kan je voor de benamingen letters, cijfers en een paar leestekens gebruiken, maar wat belangrijker is, is duidelijkheid.

let XYZ45_ert45$;

Dit is zeker geen duidelijke variabelnaam. Na een tijdje weet je zelf niet meer wat de variabele zal onthouden of inhouden. We willen leesbaarheid en vooral betekenis.

Natuurlijk kan het zijn dat we korte variabelen gebruiken zoals; a, b, x, y, enz. Deze zullen we meestal gebruiken voor kort gebruikte locale variabelen. Globale variabelen daarentegen geven we duidelijke namen die de lading dekken en de leesbaarheid vergroten.

Naamgeving maar zeker ook de afspraken rond de schrijfwijze ervan, zijn gegroeid over de jaren en tegenwoordig wordt in JavaScript camelCase gebruikt, waarvan we in vorige hoofdstukken reeds gebruik maakten. Dit gaat over de vorm van de naam, niet de naam zelf. vb:

let score;
let highScore;
let nogGrotereHighScore;

Functies worden op dezelfde manier geschreven. Maar terwijl je een variabele meestal een eigennaam geeft, wordt die van een functie meestal een werkwoord gegeven, omdat een functie iets doet.

function calculate() {}
function calculateDistance() {}
function checkFormFields() {}

Objecten worden starten dan weer met een hoofdletter, zo kan je snel herkennen. We kennen er al een paar zoals: Math, Array, Date, String, ...

Als je van een andere programmeertaal komt, of als je camelCase helemaal niets vindt en liever underscores gebruikt in je variabelnamen, dan mag dat. Als je liever prefixen gebruikt zodat het duidelijk wordt wat voor soort informatie er in je variabelen zit, dan mag dat. Maar camelCase is de dominante vorm. Het wordt aanbevolen door Yahoo!, Google, Mozzila, ... en het wordt ook gebruikt door populaire bibliotheken (libraries) zoals jQuery en Prototype. En het wordt ook gebruikt in de DOM zelf. Je kan er niet omheen wanneer je met JavaScript bezig bent.

Waar zetten we accolades die bij een functie horen, of een if-statement, of een for-lus? De dominante vorm in JavaScript is dezelfde als in de meeste C-gebaseerde talen. De opende accolade staat steeds op dezelfde lijn als het statement waar het bij hoort. De sluitende accolade staat steeds alleen op één lijn.

if (x > 1) {
	// do something intelligent
}
for (let i = 0; i < 10; i++) {
	// do something even better
}
function doingIt() {
	// doing stuff
}

Er zijn andere stijlen, komende uit Pascal of Allman, waar de opende accolade alleen op één lijn staat en mooi boven de sluitende accolade. Deze worden echter zelden gebruikt in JavaScript.

Tegenwoordig is het zelfs zo dat de meeste editor gebruik van een 'prettifier' zoals prettier.io. Deze zet je code 'mooi', zodat het voot iedereen makkelijker lezen wordt.

Als je nog meer informatie wil over de stijl die voorgeschreven wordt, zoek dan eens op 'JavaScript style guidelines' en je vindt goede documentatie, zeker op Google of Mozzila.

# Minify

Als je ooit in de broncode van een website hebt gekeken, dan heb je misschien al code gezien die er helemaal opgepropt en onleesbaar uitziet. Geen enkele spatie te bekennen, geen enkele variabelnaam die betekenis heeft, geen enkele functienaam die duidt op wat die doet. Het is wel JavaScript code, maar dat wil niet zeggen dat het echt zo geschreven is.

Dit is het resultaat van minificatie, de code is geminifiëerd. Dit is het proces om code compacter te maken. Alle spaties zijn er uit, alle commentaar werd verwijderd, alle variabel- en functienamen werden tot een absoluut minimum herleid en alle code staat op één regel. Dit zorgt er voor dat de laadtijden voor dit script verkorten. Met andere woorden, de pagina zal sneller laden en uitgevoerd worden.

Minifiëren doen we niet zelf. Er zijn een aantal minifiërings tools online. Goed gekende zijn JSMin, de Yahoo UI Compressor en de Google Closure Compiler. Laat ons deze laatste bekijken via http:// closure-compiler.appspot.com of minify.org. Het enige wat je moet doen is je JavaScript-code kopiëren in het venster en de website geeft geminifiëerde code terug in het rechtse venster nadat je op de knop 'compile' hebt geklikt.

Twee dingen over minificatie:

• doe dit alleen als je script werkt en je het terdege hebt getest,
• hou een kopij van je origineel bij! (er is niet echt een weg terug)

Als je externe libraries gebruikt zoals jQuery of andere, zal je zien dat je meestal ook de geminifiëerde code kan downloaden. Meestal staat dan in de naam van het bestand het woord 'min'.