Every once in a while I get confused on truthy falsies in javascript, so I thought I’d compile some things I’ve found and write down the cases so I have something for future reference (and so it sticks).
First I’ll list the truthy/falsy cases, and then I’ll go over the difference between Javascript and traditional languages in what they return from operators such as && and || (Javascript doesn’t return true or false is what I’m driving at, that’ll make sense in a minute).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | var emptyString = ""; //falsy var nonEmptyString = "this is text"; // truthy var numberZero = 0; // falsy var numberOne = 1; // truthy var emptyArray = []; // truthy, BUT []==false is true. More below. var emptyObject = {}; // truthy var notANumber = 5 / "tree"; // falsy // NaN is a special javascript object for "Not a Number". function exampleFunction(){ alert("Test"); } // examleFunction is truthy // BUT exampleFunction() is falsy because it has no return (undefined) |
Strings of some falsies from above are true:
1 2 3 4 5 | var test = "0"; // this is a string, not a number (test == false); // returns false, test string is truthy (test * 1 == false); // returns true, test is now a number, falsy |
Arrays can cause trouble. An empty array is already set aside, so it comes up as true. But comparing an empty array to a boollean is false.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | if([] == false){ // code runs } if( [] ) { // runs too } if([] == true){ // doesn't run } if( ![] ){ // doesn't run either } |
Difference between Javascript and PHP, Javascript: empty arrays are true. PHP they’re false. In PHP the string “0″ is also false.
1 2 3 4 5 6 7 | <? php $emptyArray = arra(); // falsy in PHP $stringZero = "0"; // falsy in PHP ?> |
Ok so those are some of the basic for what evaluates as true and false, here they are in action. What happens is Javascript evaluates whether or not things are true and then returns them if they meet the criteria. For example:
Logical or, ||
1 2 3 4 5 6 7 | ("first string" || "second string"); // returns first string ("first string" || ""); // returns first string (0 || "second string"); // returns "second string" (0 || false); // returns false |
That allows functions to have optional parameters:
1 2 3 4 5 6 7 8 9 10 11 12 | function speak(word){ var word = word || "You gave me no word"; alert(word); } speak("Hello"); // alerts Hello speak(); // alerts You gave me no word //word is null when function is started |
Logical and, &&:
1 2 3 4 5 | ("first string" && "second string"); // returns "second string" ("first string" && ""; // returns "" (0 && "test two") // returns 0 |
That’s sweet because one variable can depend on other:
1 2 3 4 5 6 7 8 9 10 11 | var checkbox = dojo.byId("agreeToTerms"); //or getElementById if you're not using dojo var name = checkbox.checked && prompt("What is your name"); //name is either their name, or false if they haven't checked the agreeToTerms checkbox // IMPORTANT NOTE: Internet Explorer 8 sucks as usual and breaks the prompt function. var createArrowNav = createArrowNav || false; //parameter passed for creating arrow nav createArrowNav && createArrowNav(); // function createArrowNav runs if the parameter is true, returns false otherwise |
Logical not, ! (this one actually turns what it gets to the opposite truth value, as opposed to || and && returning the truth value)
1 2 3 4 5 6 | (!"first string" || "second string"); // returns first string (!"first string" || "second string"); // returns false (!0 || !"second string"); // returns true // 0 converts to true and is returned |
You can use that to get true or false no matter what you’ve been given
1 2 3 4 5 | (!!"test"); // returns true (!!""); // returns false (!!variableThatDoesntExist); // returns false even though checking for undefined variable |