Logical Operators in JavaScript

Javascript, je houdt ervan, en je moet toch altijd een beetje huilen.

Want 1 + ‘3’ - ‘3’ = 10

Dit ervaar ik al ruim 10 jaar. Een van de ergste pijnpunten waar ik tot op de dag van vandaag tegenaan blijf lopen - zeg maar: zoiets als je scheenbeen steeds stoten op dezelfde plek - blijft toch het toepassen van zogenaamde Logical Operators.

We kunnen er niks aan doen, JavaScript blijft Loosely Typed. Kort door de bocht betekent dit dat deze taal zich niet te veel bezighoudt met types, en voert conversies automatisch uit. Ja, dat lees je goed; automated typecastings!

Let op, niet schrikken:

De + operator cast het liefst naar een String; de - operator naar een Number; enz… Probeer er maar niet te veel over na te denken, accepteren is beter als genezen…

Truthy && Falsy

Doordat JavaScript zo vergefelijk is betreffende automatische type conversies, wordt er binnen de community veelal gesproken over truthy en falsy als het gaat om het variabelen in statements.
Stamp deze goed in je hoofd als je dit onderwerp wilt begrijpen, een logische lijst bestaat eigenlijk niet:

Falsy

• Een lege String, oftewel een String met een length van 0
• Number 0
• false
• undefined
• null
• NaN

Truthy

• Lege Arrays ([])
• Lege Objecten ({})
• Al het andere!!

Combineren/Chaining

Binnen Logical Operators werkt het principe van truthy/falsy niet anders.
Je kan ze gebruiken om code in te korten, waardoor je kostbare coderegels bespaart. Vaak zijn het leuke hulpmiddelen en helpen ze je code schoon te houden, maar ze kunnen ook verwarring veroorzaken, vooral wanneer ze aan elkaar ketent.

Logische Operators combineren in feite twee expressies en zullen ofwel waar, onwaar of de overeenkomende waarde teruggeven en worden gerepresenteerd door &&, wat AND betekent - evenals ||, wat OR betekent. Kijk maar:

console.log(true && true) // true

console.log(false && true) // false

console.log(true && false) // false

console.log(false && false) // false

console.log(true || true) // true

console.log(true || false) // true

console.log(false || true) // true

console.log(false || false) // false

So far so good.

Het wordt echt leuk als we Logical Operators gaan combineren en andere waardes invoeren als simpele Booleans.

Nog steeds geldt:

• && : De eerste falsy waarde wordt teruggegeven. Als die er niet is, wordt de laatste truthy waarde teruggegeven.
• ||: De eerste truthy waarde wordt teruggegeven. Als die er niet is, wordt de laatste falsy waarde teruggegeven.

Nu we weten wat truthy/falsy kan veroorzaken, en dat Javascript automatisch conversies uitvoert, is het tijd voor een ritje in de botsauto’s:

console.log(0 && {a: 1}) // 0

console.log(false && 'a') // false

console.log('2' && 5) // 5

console.log([] || false) // []

console.log(NaN || null) // null

console.log(true || 'a') // true

Laat dit even inwerken. Lees dit vooral nog een keer, en niet vlak voordat je wilt gaan slapen, maar juist ‘s ochtends met een stevige kop koffie in je hand…

Ook voor bij de koffie: Deze talk is erg duidelijk en heerlijk sarcastisch.