Something that I’ve learned that has proven to be fundamental in understanding and using conditional statements in Javascript (if, while, etc.) is how and what they evaluate to. A couple of great articles that explain this in detail are located here and here. Both are a great read and the articles address and explain the concepts of ‘truthy’ and ‘falsey’, which I have found to be key concepts in using conditionals correctly and effectively.
Basically, conditional statements return a value and then evaluate that to a Boolean equivalent – true or false. The equivalent numeric value of true would be 1 and 0 would be false (the way I remember this is that it’s like converting the Booleans to binary code which is a computer’s native language).
Something that has confused me lately is this example:
var x = "cat";
if (x > 0) {
alert(x);
}
Before my understanding of how conditionals evaluate, I would have looked at this conditional and read it as: “If ‘cat’ is greater than 0, then execute the code. ” This would be confusing as ‘cat’ is a string data type and not numeric, so the condition doesn’t seem to make any sense.
But, if one has an understanding that the condition returns a result that evaluates to the equivalent of a Boolean, which has a numeric equivalent (0 or 1), and takes into account coercion in the JS engine, then the code could be understood as: The condition (x = "cat") returns a value that is a string, and is ‘truthy’ since a string is a primitive data type that converts to a Boolean value of true, or the numeric value of 1. So, since x holds a value that has the Boolean numeric equivalent of 1, the condition is true, and with this concept being understood, "cat" is indeed greater than 0. The code will execute…or will it?
On testing this code in the console using Javascript, it did not execute and the condition evaluated to false. This may be because of a feature (some would call it a ‘quirk’) in Javascript called type coercion which will convert values in an expression if their type is not relevant to the operator’s functionality. For example, if you are using the + operator for arithmetic, and have one string and one number on either side, Javascript will attempt to coerce the type of the string to a number value. So, if I console.log(x) after it has been assigned, then it does return a value of true when coerced to a Boolean, which would make it equal to 1. But, because of type coercion, when “cat” is used with >, Javascript cannot coerce the string "cat" to a number type and so returns a result of NaN (Not a Number), which converts to the boolean false. So, the expressions in if conditionals, when used in Javascript, need to be composed in a manner that keeps type coercion in mind.
The concept of conditions evaluating to a boolean for if statements (though, not the concept of type conversion) can also be applied in PHP conditionals. Take the following example:
if ($username && $password) {
echo "Username and Password is set."
}
Without understanding that conditionals evaluate to a Boolean, and the concepts of truthy and falsey, then you would look at this and wonder what the condition is – only a couple variables are listed…what about those variables? If you understand that the condition is evaluated to true or false, and that a variable is truthy if it ‘exists’ (i.e. is not falsey with a value of ‘not undefined, null, NaN, 0, or false’, and in this case especially, an empty string), then the code will execute. If the variables are falsey and are an empty string or one of the falsey values listed above, then the code will not run and the user will know that the password and username variables are not set (they are falsey and the condition is evaluated to false). I think of it like the variable has life in it and exists if it holds a truthy value, and is dead or doesn’t ‘exist’ if it holds a falsey value. Existence is a key concept also discussed further in the helpful articles mentioned at the top of this post.
I have found that understanding that conditionals evaluate to a Boolean is crucial to understanding various uses of them. The article mentioned at the beginning of this post does a great job of explaining the concept more thoroughly and I encourage readers to check it out if the above explanation isn’t clear. Hope this helps out some in any case.
