{"id":987,"date":"2009-08-11T20:20:05","date_gmt":"2009-08-12T01:20:05","guid":{"rendered":"http:\/\/unitstep.net\/?p=987"},"modified":"2009-08-11T20:20:05","modified_gmt":"2009-08-12T01:20:05","slug":"evaluation-of-boolean-values-in-javascript","status":"publish","type":"post","link":"https:\/\/unitstep.net\/blog\/2009\/08\/11\/evaluation-of-boolean-values-in-javascript\/","title":{"rendered":"Evaluation of boolean values in JavaScript"},"content":{"rendered":"<p>If you have a background in a strongly-typed language such as Java, you&#8217;ll be used to using logical operators only with boolean values\/expressions.  However, in most dynamically-typed languages this doesn&#8217;t have to be the case, due to the nature of dynamic typing: The type of the variable is often determined based on the <em>context<\/em> in which it is used.<\/p>\n<p>With <strong>JavaScript<\/strong> there are actually two concepts at play when using logical operators: What is actually returned from the result of a logical operation, and how variables are converted to boolean values when the context requires it.<\/p>\n<p><!--more--><\/p>\n<h2>Undergoing a conversion<\/h2>\n<p>Firstly, we&#8217;ll look at how variables in JavaScript are converted to boolean values.  One way to explicitly convert a non-boolean value to a boolean one in JavaScript is to use the <a href=\"https:\/\/developer.mozilla.org\/en\/Core_JavaScript_1.5_Reference\/Global_Objects\/Boolean#Description\">global Boolean object as a function<\/a>.  By using the following code, you can explicitly get the boolean conversion of a variable or expression:<\/p>\n<pre><code>var asBoolean = Boolean(someVariable);<\/code><\/pre>\n<p>The variable <code>asBoolean<\/code> is now guaranteed to have a boolean value.  <strong>Note that this is not the same as the expression <code>new Boolean(someVariable)<\/code>, as that returns a Boolean (wrapper) object representing the converted value of <code>someVariable<\/code>, not a boolean primitive.<\/strong><\/p>\n<p>So what values of <code>someVariable<\/code> will result in <code>true<\/code> being returned, and which ones will result in <code>false?<\/code>  The following values will evaluate to <code>false<\/code>, while all others will evaluate to <code>true<\/code>:<\/p>\n<ul>\n<li>0 or -0 (Most floating-point implementations have <a href=\"http:\/\/en.wikipedia.org\/wiki\/Signed_zero\">positive and negative zero<\/a>, due to the IEEE 754 standard)<\/li>\n<li>null<\/li>\n<li>undefined<\/li>\n<li>NaN<\/li>\n<li>The empty string (&#8220;&#8221;)<\/li>\n<li><code>false<\/code> itself<\/li>\n<\/ul>\n<p>This means that all other expressions or values, including any non-null object (including the <code>Boolean<\/code> object for false!) and the string &#8220;false&#8221; will be converted to true.<\/p>\n<p>Note that using the <code>Boolean<\/code> function isn&#8217;t the only way to explicitly convert a variable to its boolean equivalent.  You could also apply the logical NOT operator twice, like so:<\/p>\n<pre><code>var asBoolean = !(!someVariable);<\/code><\/pre>\n<p>This is because the contract of the logical NOT operator in JavaScript is to return false if the operand can be converted to true and true otherwise.  The second NOT simply reverses the negation done by the first NOT operator.  While all of this may seem dead simple, it will be important to note as we move on to how other logical operators work.<\/p>\n<h2>Logical conversion<\/h2>\n<p>This is perhaps the most important difference with JavaScript.  <strong>Although the logical NOT operator (!) is guaranteed to return a boolean value, the logical AND (&#038;&#038;) and logical OR (||) operators are not<\/strong>.  This is by design, and although it might be a bit of a change for some developers, the feature can actually be quite useful.<\/p>\n<p>Consider the following code examples:<\/p>\n<pre><code>var result = a &amp;&amp; b<\/code><\/pre>\n<p><strong>In this example of using logical AND, <code>a<\/code> is returned if it can be converted to false; otherwise <code>b<\/code> is returned.<\/strong><\/p>\n<pre><code>var result = a || b<\/code><\/pre>\n<p><strong>In this example of using logical OR, <code>a<\/code> is returned if it can be converted to true; otherwise <code>b<\/code> is returned.<\/strong><\/p>\n<p>This means that one of the original operands or expressions used with the logical operators will be returned as a result of the evaluation.  You will not always get an actual boolean value, unless both of the operands were booleans to begin with.  Usually, this doesn&#8217;t matter, since if you use the result in a boolean context, it will get converted to the expected value.  For example:<\/p>\n<pre><code>var string1 = \"\";\r\nvar string2 = \"a string that is not empty\";\r\nvar result = string1 || string2;\r\nif (result)\r\n{\r\n  window.alert(\"At least one string was not empty\");\r\n  window.alert(result);\r\n}<\/code><\/pre>\n<p>This example will output &#8220;At least one string was empty&#8221;, and then &#8220;a string that is not empty&#8221;.  This is because the logical OR operator first converts <code>string1<\/code> to a boolean, which results in <code>false<\/code>.  Thus, the result of the logical OR returns <code>string2<\/code> into the result.  Since the result is now a non-empty string, it converts to <code>true<\/code> for the if-conditional.  <\/p>\n<p>This also highlights a convenient way of using logical OR &#8211; give me the first expression if it evaluates to true, otherwise give me the second.  This is usually used to test for the availability of built-in objects in a particular JavaScript environment.<\/p>\n<p>However, consider the following example:<\/p>\n<pre><code>var string1 = \"\";\r\nvar string2 = \"a string that is not empty\";\r\nvar result = string1 || string2;\r\nif (true == result)\r\n{\r\n  \/\/ We will never get here.\r\n  window.alert(\"At least one string was not empty\");\r\n  window.alert(result);\r\n}<\/code><\/pre>\n<p>In this slightly changed example, instead of directly supplying the result to the if-conditional, we test whether it is equal to <code>true<\/code>.  In this case, it fails, since when using the <a href=\"https:\/\/developer.mozilla.org\/en\/Core_JavaScript_1.5_Reference\/Operators\/Comparison_Operators\">equality operator<\/a>, operands are not converted to booleans.  (Using the strict equality operator also would not work)<\/p>\n<p>This underscores an important point: <strong>If you actually want a boolean value to work with, you will have to explicitly convert it, using either the <code>Boolean<\/code> function or a double application of the logical NOT operator<\/strong>, like so:<\/p>\n<pre><code>result = Boolean(result);\r\n\/\/ Or, we could do this:\r\nresult = !(!result);<\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>JavaScript offers some neat features due to its dynamic typing and these can help speed development, but you just need to be aware of how they work so that you don&#8217;t get tripped up.  This is especially true when dealing with implicit type conversion and how logical operators work.  I hope you found this helpful and as always, any feedback is appreciated!<\/p>\n<h3>References<\/h3>\n<ol class=\"less note\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en\/Core_JavaScript_1.5_Guide\/Operators\/Logical_Operators\">Logical Operators<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en\/Core_JavaScript_1.5_Guide\/Predefined_Core_Objects\/Boolean_Object\">Boolean Object<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en\/Core_JavaScript_1.5_Reference\/Global_Objects\/Boolean#Description\">Boolean Description<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en\/Core_JavaScript_1.5_Reference\/Operators\/Comparison_Operators\">Comparison Operators<\/a><\/li>\n<\/ol>","protected":false},"excerpt":{"rendered":"<p>If you have a background in a strongly-typed language such as Java, you&#8217;ll be used to using logical operators only with boolean values\/expressions. However, in most dynamically-typed languages this doesn&#8217;t have to be the case, due to the nature of dynamic typing: The type of the variable is often determined based on the context in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[208,64,4,137],"tags":[361,451,405,362,438,263],"_links":{"self":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/987"}],"collection":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/comments?post=987"}],"version-history":[{"count":20,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/987\/revisions"}],"predecessor-version":[{"id":1007,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/987\/revisions\/1007"}],"wp:attachment":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/media?parent=987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/categories?post=987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/tags?post=987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}