Mijn best practices – JavaScript

1. Cache uitschakelen

Firefox:
Ontwikkelaarshulpmiddelen openen -> Instellingen openen (F1) -> "Disable HTTP Cache (when toolbox is open)"

Chrome:
DevTools openen -> Instellingen openen (F1) -> "Disable cache (while DevTools is open)"

2. De JS-console open houden

Open in de DevTools het tabblad Console en houd het open, zodat stap 1 actief blijft en je bovendien fouten in het netwerk en in JS meteen ziet.

Ook een aanrader is deze plug-in, die JS-fouten nog beter weergeeft, voor als je zelf eens vergeet te kijken:

3. JavaScript: verplichte kost “You Don't Know JS”

• You Don't Know JS (1st Edition)
• Legt uit waarom je this beter kunt vermijden
• Legt uit waarom er in JS soms ogenschijnlijk vreemde dingen gebeuren (denk aan lexical scope en closures)

4. De puntkomma

• Altijd gebruiken
• Het is niet verplicht, maar helpt bijvoorbeeld om deze valkuil te omzeilen: Stack Overflow
• JavaScript voegt automatisch een puntkomma in:

// you want to return 5 and have ugly formatting:
return
5

// JavaScript Interpretation:
return;
5;

5. Logische operatoren && en ||

• In Java worden a && b en a || b volgens de booleaanse algebra geëvalueerd. a en b moeten booleans zijn.
• In JavaScript:
  • Bij a && b wordt b geretourneerd als a true is
  • Bij a || b wordt b geretourneerd als a false is

Ook expressies kun je zo koppelen, wat het kortste if-statement ooit oplevert – syntactic sugar:

• isAdmin && showDeleteButton();
• (Strikt genomen is dit geen statement meer)

Het wordt ook vaak gebruikt voor standaardwaarden:

• let sendNewsletter = form.getNewsletterOptIn() || false;

6. Is JavaScript pass-by-reference of pass-by-value?

Dat is interessant in JavaScript. Een voorbeeld:

function changeStuff(a, b, c) {
    a = a * 10;
    b.item = "changed";
    c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);
console.log(obj2.item);

Dit levert de volgende output op:

10
changed
unchanged

Als obj1 helemaal geen referentie was, dan zou een wijziging van obj1.item geen enkel effect hebben op obj1 buiten de functie.

Was het argument een echte referentie, dan zou alles veranderen: num zou 100 zijn en obj2.item zou “changed” bevatten. In plaats daarvan blijft num 10 en blijft obj2.item “unchanged”.

In werkelijkheid wordt het meegegeven element by value doorgegeven. Alleen is wat by value wordt doorgegeven zelf een referentie. Technisch heet dit call-by-sharing.

In de praktijk betekent dit: als je de parameter zelf wijzigt (zoals bij num en obj2), heeft dat geen effect op het oorspronkelijke object dat aan de functie werd meegegeven. Wijzig je echter de interne waarden van de parameter, dan worden die wijzigingen wel doorgevoerd (zoals bij obj1).