Astazi vreau sa scriu cate ceva pentru prietenii mei care stiu Javascript sau vor sa invete. Voi scrie despre valorile truthy & falsey. 

Este un subiect destul de important daca vrei sa inveti programare si mai ales javascript. Poate nu o sa fiu cel mai clar in articol dar sunt multe alte informatii pe net, le puteti cauta.

Pe scurt: truthy – ceva care se evalueaza la TRUE, falsey – ceva care se evalueaza la FALSE. Simplu, nu? Bun mersi ca ati citit si sper ca v-a fost de folos. Glumesc :))!

Este logic si multe limbaje se aseamana la acest lucru. Unu (1) este truthy, zero (0) este falsey. Un obiect de orice fel este la randul sau truthy (inclusiv functiile, regexp, array etc) – tot timpul. Cea mai simpla cale ca sa iti dai seama daca ceva este truthy este ca sa determini daca este sau nu falsey. De ce? Pentru ca sunt numai 5 valori falsey in JavaScript.

undefined, null, NaN, 0, “” (string gol) & false

Nota: Este posibil sa initializezi o valoare primitiva in mod explicit (string, numar, null, undefined, boolean) folosind un obiect, astfel rezultatul tot timpul o sa fie truthy. De exemplu 0 (zero) este falsey dar new Number(0); este truthy. Un exemplu chiar mai infricosator este new Boolean(false);  care de asemenea este truthy. Ai grija! Foarte rar este nevoie sa initializezi o valoare astfel.

De ce ar trebui sa iti peste ce este truthy si ce este altfel?

O valoare “truthiness” determina cum se va evaloa intr-o expresie logica. De exemplu:

if(0) {
  alert('ALERT');
}

Poate o sa va dati seama din prima ca functia alert nu va fi niciodata rulata pentru ca 0 este o valoare falsey, nu satisface conditia din if care este “ruleaza doar daca NU ESTE FALSEY”.

BONUS:

Cum se evalueaza o conditie IF in Javascript? Asa:

1. Evalueaza expresia
2. Apeleaza Valoare(Rezultat(1)).
 
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
 
3. Apeleaza ToBoolean(Rezultat(2)).
 
↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
 
4. Daca rezultat(3) este false, returneaza (normal, empty, empty).
5. Evalueaza statement-ul
6. Rezurneaza Rezultat(5).

Cum am evidentiat, ce ne intereseaza este bitul din pasul 3, care apeleaza functia ToBoolean cu rezultatul de la pasul 2, care esential este valoarea care am pasat-o. Dar ce este ToBoolean?

ToBoolean este o functie simpla:

Sper ca ati inteles pana aici :)).

[stag_alert style=”red”]Destul cu teoria![/stag_alert]

Acum stim ce se intampla cand pasam ceva la o expresie if ( if(…bit…){} ), dar cata relevanta au valorile truthy si falsey in alte conexte logice? Pai, multa!

Hai sa exploram simpla structura if pentru ultima data:

if(X) {
  // Daca acest cod ruleaza, ce am demonstrat cu X?
  alert(123);
}

Daca primim o alerta cu 123 ce putem spune cu siguranta despre X? Pai cu siguranta putem spune ca NU ESTE una dintre undefined, null, NaN, 0, “” (string gol) & false . Astfel putem spune ca X este truthy. Ar putea sa fie true, un numar care nu este zero, un array, o functie si asa mai departe.

Tine minte ca in Javascript tot ce nu este un primitiv poate sa fie considerat un obiect. Functiile sunt obiecte, Array-urile sunt obiecte. Si toate obiectele sunt truthy.

Din moment ce toate obiectele sunt truthy, se intampla sa vedem des astfel de cod:

var el = document.getElementById('foo');
 
if (el) {
    el.style.color = 'red';
}

el nu este un boolean, este doar un obiect (in acest caz un element DOM). Blocul if se executa doar daca expresia este truthy, Puteam totusi sa fim mai expliciti. Functia getElementById returneaza null daca nu gaseste elementul, deci am putea scrie codul asa:

var el = document.getElementById('foo');
 
if (el !== null) {
    el.style.color = 'red';
}

Este de obicei un mic avantaj ca sa specifici explicit valoarea de falsey care o vrei. Cateodata, vrei sa te protejezi contra null sau undefined dar sa ingadui false, de exemplu. In astfel de cirumstante, logic, foloseste syntaxa explicita (foloseste operatorii stricti – === / !==).

Funtia ToBoolean de care am mai zis mai sus se intampla in toate contextele logice in Javascript. De exemplu, operatorul && (logical AND):

0 && alert(0);
1 && alert(1);

In acest caz, doar o alerta cu 1 vom primi, din moment ce zero este falsey si astfel nu satisface operatorul && care se uita in stanga si vrea ceva truthy. Operatorul logic AND evalueaza partea dreapta numai daca stanga este truthy.

Mai departe am verificate daca rezultatul functie getElementById nu este null verificand daca este truthy. Daca el era truthy atunci stiam ca exista elemtul in DOM si puteam incepe interactiunea programatica cu el.

Folosim un concept similar cu accesatul obiectelor.

alert(foo.bar);

Singurele valori care vor pusca o eroare cand vei rula codul de mai sus sunt null si undefined. Deci, daca foo este truthy putem in mod sigur sa incercam sa accesam proprietatea bar fara sa ni se puste erori:

if (foo) {
    alert(foo.bar);
}

 Asumeaza lucruri cu atentie

Cu if-ul nostru am demonstrat numai ca foo este truthy. Totusi s-ar putea sa nu fie obiectul de care avem nevoie. Este ceva de asumat si luat in calcul. Normal, este sigur sa presupui ca daca o valoare numita in mod obscur de care ai nevoie nu este falsey, o sa fie valoare truthy de care ai nevoie.

element.addEventListener ? element.addEventListener(‘click’, func, false) : element.attachEvent(‘onclick’, func);

Aici facem niste presupuneri:

1. Daca elementul are o proprietatea addEventListener si valoarea este ceva truthy, trebuie sa fie o functie, deci o putem apela.

2. Daca mi exista atunci attachEvent trebuie sa eiste si trebuie sa fie o functie.

Codul se intampla sa mearga si pe versiuni vechi de Internet Explorer care nu au methoda W3C DOM Event addEventListener. Presupunerile pe care le fac sunt considerate sigure in mediile pe care ma gandesc ca va opera scriptul meu, dar s-ar putea ca acest cod sa nu fie sigur in alte medii, deci este important sa iei in calcul asta: doar daca ceva este truthy nu inseamna ca valoarea este ceea ce tu cauti (la fel si cu valoriile falsey).

Este ceva obisnuit sa incerci o conditie mai deep:

a && a.b && a.b.c && a.b.c();

1.  Ne asiguram ca a este truthy. 2. Ne asiguram ca a.b este truthy (deci exista). 3. Ne asiguram ca a.b.c este truthy deci exista si in cele din urma 4. Apelam a.b.c

Din nou, facem presupuneri, dar deja stim asta. Aceasta structura este foarte folositoare, desi daca este prea lunga deja iti ingreuneaza codul si il face greu de urmarit, deci poti lua in calcul si alte metode:

a && a.b.c();  – 1. Ne asiguram ca a este truthy si apelam a.b.c

In exemplul de mai sus am determinat ca este sigur sa zicem ca daca a este truthy, este sigur obiectul care il cautam, deci sigur trebuie sa aiba o structura minim: a={b:{c:function(){…}}}

Booleni expliciti

Poate acum te intrebi de ce mai exista booleni expliciti in Javascript daca ne putem descurca usor cu valorile truthy sau falsey. Si este adevarat, ne putem descurca faca acesti booleni si foarte rar ii apelam explicit. De obicei asa:

if (foo.isAFoo()) { // … }

foo.isAFoo() poate returna orice valoare truthy si nu ar face diferenta in executarea codului.

Dar, este important ca in multe situatii sa fii cat mai explicit cu intentiile. Deci ar trebui sa insistam si sa folosim booleni reali atunci cand este de luat o decizie binara (2 valori posibile).

Ca sa facem cast la o valoare catre booleanul reprezentativ, folosim ToBoolean. Putem folosi constructorul Boolean ca o functie:

Boolean(0); // => false

Asta returneaza o valoare booleana – true sau false, si este o modalitate rapida de a afla daca o valoare este truthy sau falsey.

Boolean(undefined); // => false
Boolean(null); // => false
Boolean(false); // => false
Boolean(0); // => false
Boolean(""); // => false
Boolean(NaN); // => false
 
Boolean(1); // => true
Boolean([1,2,3]); // => true
Boolean(function(){}); // => true

O scurtatura cunoscuta si des folosita este de a folosi operatorul logic NOT dublu, asa:

!!null; // => false
!!0; // => false
!!123; // => true
!!'foo'; // => true

Te voi lasa pe tine sa mai exersezi.

C’est fini la comedie!

Cam atat, v-am imbatat astazi cu notiuni tehnice. Dar poate cuiva ii va prinde bine acest articol. Pa.