B. szybki JS - operator + oraz !

Bardzo szybka lekcja o dość tajemniczym operatorze, jakim jest + w JavaScript oraz nieco o ! i !!. Zaczynamy!

Ok, co wyjdzie z tego kodu?

console.log(1+"1"); 
console.log("1"+"1"); 
console.log("1"+"1"); 
console.log(1+1);

Cóż, w każdym przypadku, w którym mieszamy string i number number jest zamieniany do stringa i klejony jak w PHP operatorem kropki:

console.log(1+"1"); //11
console.log("1"+"1"); //11
console.log("1"+"1"); //11
console.log(1+1); //2

To teraz coś bardzo zaskakującego – pomyślmy co ten kod nam da:

console.log("Ba" + + "Hello World!");

Ok, podpowiem:

Przy liczbach, plus działa jako dodawanie
Przy stringach plus działa jako konkatenacja (operator kroki z PHP, Fortrana i innych takich)
Przy liczbach lub stringach to zawsze jest sprowadzane do stringów
Taka kropka przed napisem albo czymkolwiek to jest konwersja do typu int

Ok, to myślimy, do czego może nam przekonwertować się string? W sensie, do jakiej liczby? Ja swoją drogą byłem przekonany, że będzie to wartość ASCII pierwszej litery stringu, czyli ASCII dla H, ale byłem w błędzie…

Oto, co dostajemy:

console.log("Ba" + + "Hello World!"); //BaNaN

Nawet śmieszne. Tutaj warto pokombinować z różnymi typami konwersji liczb w JS:

console.log(+".3"); //0.3
console.log(parseInt(".3")); //NaN
console.log(parseFloat(".3")); //0.3

Ok, więcej:

console.log(+"1."); //1
console.log(parseInt("1.")); //1
console.log(parseFloat("1.")); //1
console.log(parseFloat("1.0")) //1

Jeszcze więcej:

console.log(+"16px"); //NaN
console.log(parseInt("16px")); //16
console.log(parseFloat("16px")); //16

To tak po to, aby nic nas nie zaskoczyło. Nie tylko na pytaniach kwalifikacyjnych, tego rodzaju rzeczy przydają się. Można uniknąć różnych błędów, jak wiemy co robimy, inaczej to później trudno jest to wyłapać.

Warto też wiedzieć, że operator negacji działa nie tylko z typami boolowskimi:

console.log(!""); //true
console.log(!" "); //false
console.log(!0); //true
console.log(!1); //false
console.log(![]); //false
console.log(!{}); //false

Świetnie się nadaje do konwersji do typu bool, użyty podwójnie:

console.log(!!""); //false
console.log(!!" ");  //true
console.log(!!0);  //false
console.log(!!1); //true
console.log(!![]); //true
console.log(!!{}); //true

Więcej różnych dziwactw JavaScriptowych już niedługo!

B. szybki JS – operator + oraz !