`truthy` en `falsy` in TypeScript

In dit artikel leggen we truthy en falsy in TypeScript uit.

YouTube Video

truthy en falsy in TypeScript

De concepten truthy en falsy spelen een zeer belangrijke rol in voorwaardelijke statements in TypeScript-programma's. Hier leggen we deze concepten in detail uit en hoe ze daadwerkelijk worden gebruikt. Daarnaast geven we specifieke TypeScript-codevoorbeelden om te begrijpen hoe truthy en falsy waarden worden behandeld.

Wat zijn truthy en falsy?

In JavaScript en TypeScript wordt elke waarde geëvalueerd als waar (true) of onwaar (false) in een voorwaardelijke expressie. Deze waarden worden logischerwijs geclassificeerd als truthy of falsy.

• truthy verwijst naar waarden die als true worden geëvalueerd in conditionele expressies.
• falsy verwijst naar waarden die als false worden geëvalueerd in conditionele expressies.

In TypeScript worden de volgende waarden behandeld als falsy:.

2. Het getal 0
3. "" (lege string)

Alle andere waarden worden behandeld als truthy.

Specifieke voorbeelden van truthy en falsy

 1// Examples of falsy values
 2console.log("0 is", Boolean(0) ? "truthy" : "falsy");
 3console.log('"" is', Boolean("") ? "truthy" : "falsy");
 4console.log("null is", Boolean(null) ? "truthy" : "falsy");
 5console.log("undefined is", Boolean(undefined) ? "truthy" : "falsy");
 6console.log("NaN is", Boolean(NaN) ? "truthy" : "falsy");
 7
 8// Examples of truthy values
 9console.log("1 is", Boolean(1) ? "truthy" : "falsy");
10console.log('"hello" is', Boolean("hello") ? "truthy" : "falsy");
11console.log("[] is", Boolean([]) ? "truthy" : "falsy");
12console.log('" " (space) is', Boolean(" ") ? "truthy" : "falsy");

Voorwaardelijke instructies met behulp van truthy en falsy

De concepten truthy en falsy worden vaak gebruikt in voorwaardelijke statements en loops. Bijvoorbeeld, in if-statements of while-loops, kun je deze waarden rechtstreeks gebruiken voor eenvoudige voorwaardelijke evaluaties.

 1// Checking if the length of the array is 0
 2let items: string[] = [];
 3
 4if (items.length) {
 5    console.log("The array is not empty");
 6} else {
 7    console.log("The array is empty");
 8}
 9
10// Checking if the input value is empty
11let input = "";
12
13if (input) {
14    console.log("Input has value");
15} else {
16    console.log("Input is empty"); // This will be executed
17}

Falsy-waarden afhandelen met ?? (Nullish Coalescing) en || (Logische OF)

In TypeScript zijn er verschillende operators die nuttig zijn bij het werken met falsy waarden. Met name de Nullish Coalescing Operator (??) en de logische OF-operator (||) worden vaak gebruikt.

|| (Logische OF)

De logische OF-operator wordt gebruikt om falsy waarden te vervangen door een standaardwaarde. Echter, alle waarden die als falsy worden beschouwd (niet alleen null en undefined, maar ook 0 en lege strings "") worden ook inbegrepen.

1let username = "";
2let displayName = username || "Guest";
3// Since username is empty, "Guest" is assigned
4
5console.log(displayName); // "Guest"

??（Nullish Coalescing）

De null-coalescing-operator past de standaardwaarde alleen toe op null of undefined en behandelt andere falsy waarden zoals 0 of lege strings "" zoals ze zijn.

1let username2 = "";
2let displayName2 = username2 ?? "Guest";
3// The empty string is retained
4// since username2 is not null or undefined
5
6console.log(displayName2); // ""

Valkuilen met betrekking tot truthy en falsy

Een belangrijk punt om op te letten bij het begrijpen van truthy en falsy is dat onbedoelde waarden als falsy kunnen worden beschouwd. Bijvoorbeeld, 0 en lege strings "" zijn geldige waarden, maar worden beschouwd als falsy in conditionele uitspraken, wat kan leiden tot onjuiste evaluaties.

1let score = 0;
2
3if (score) {
4    console.log("You have a score!"); // This will not be executed
5} else {
6    console.log("No score available"); // This will be executed
7}

In dergelijke gevallen stelt het gebruik van strikte vergelijkingsoperatoren je in staat om waarden zoals 0 en false nauwkeurig te onderscheiden.

1let score = 0;
2
3if (score === 0) {
4    console.log("Score is zero"); // Correctly evaluated
5}

Valkuilen met betrekking tot falsy en NaN

NaN vereist speciale behandeling omdat het niet gelijk is aan enige waarde, inclusief zichzelf, bij het gebruik van vergelijkingsoperatoren.

1console.log("NaN === NaN:", NaN === NaN); // false

Het is daarom veiliger om Number.isNaN() te gebruiken om NaN nauwkeurig te detecteren.

 1// Bad Example
 2let value = parseInt("0");
 3if (!value) {
 4    console.log("Value is NaN(Incorrect)"); // Incorrectly treats 0 as NaN
 5}
 6
 7// Good Example
 8let value2 = parseInt("hello");
 9if (Number.isNaN(value2)) {
10    console.log("Value is NaN(Correct)"); // Correctly identifies NaN
11}

Zo is NaN niet eens gelijk aan zichzelf, dus vergelijkingen met NaN geven altijd false terug. Door in plaats daarvan Number.isNaN() te gebruiken, kun je betrouwbaardere controles uitvoeren.

Conclusie

De concepten truthy en falsy in TypeScript zijn erg handig, maar u moet voorzichtig zijn met bepaalde waarden, vooral 0 en lege strings. Bij het gebruik van deze waarden in conditionele controles kan het gebruik van strikte vergelijking (===) of de Nullish Coalescing Operator (??) in plaats van losse vergelijking (==) helpen onverwacht gedrag te voorkomen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video