Conditional statements and truthy values - Robust Client-Side JavaScript
The key to robust JavaScript is asking “if” a lot. During the concept phase, ask “what if”. In the code, ask
if
to handle different cases differently.The
if
statement, or conditional statement, consists of a condition, a code block and an optional second code block.
Code language: JavaScript
if (condition) {
// …
} else {
// …
}
When an
if
statement is evaluated, first the condition expression is evaluated. The result of the expression is then converted into a boolean value,true
orfalse
. If this result istrue
, the first code block is executed, otherwise the second block, if given.Most likely, this is not new to you. The reason we are revisiting it is the conversion into boolean. It means you can use a condition expression that does not necessarily evaluate to a boolean value. Other types, like Undefined, Null, String or Object are possible. For example, it is possible to write
if ("Hello!") {…}
.If you rely on the implicit conversion, you should learn the conversion rules. ECMAScript defines an internal function ToBoolean for this purpose. In our code, we can use the public
Boolean()
function to convert a value into boolean. This delegates to the internal ToBoolean function.To illustrate the conversion, imagine that
Code language: JavaScript
if (condition) {
// …
} else {
// …
}
is a short version of
Code language: JavaScript
if (Boolean(condition) === true) {
// …
} else {
// …
}
Values are called truthy when ToBoolean converts them into
true
. Values are called falsy when ToBoolean converts them intofalse
.The way ToBoolean works is simple, but with a twist. Let us quote the ECMAScript specification which is quite readable for once:
ToBoolean Conversions Argument Type Result Undefined Return false. Null Return false. Boolean Return argument. Number If argument is +0, -0, or NaN, return false; otherwise return true. String If argument is the empty String (its length is zero), return false; otherwise return true. Symbol Return true. Object Return true. As you can see, most types have a clear boolean counterpart. All objects, including functions, dates, regular expressions and errors, are truthy. The two types denoting emptiness,
undefined
andnull
, are falsy.For numbers and strings though, it is complicated. Numbers are truthy except for zeros and NaN. Strings are truthy except for empty strings.
Quoted content by Mathias Schäfer is licensed under CC BY-SA. See the other snippets from Robust Client-Side JavaScript.