Skip to main content

Falsy JavaScript

In continuation of my previous blog on the basic JavaScript expressions, this blog is about Falsy and Truthy values in JavaScript.

When presented with a non boolean expression instead of a boolean value, JavaScript uses Truthy or Falsy values instead to determine the result. At first glance, this could be confusing and could lead to errors while scripting.

var a = "someval";
var b;
if (a) { // this is a truthy
    // Block is executed
}
if (b) { // b is undefined and so a falsy
    // Block is not executed
}


The Falsy Values
All expressions, objects and values are Truthy by default. There are exceptions and they are called the Falsy values and are listed below:
  # The empty string; ""
  # null
  # undefined
  # The number 0
  # NaN
  # The boolean false

It gets tricky
If you see the below table, you will note that it gets tricky or rather one should be a little extra careful while dealing with Falsy values.

ExpressionValue
Falsy Values
falsefalse
NaNfalse
undefinedfalse
0false
""false
nullfalse
Truthy Values
Infinitytrue
truetrue
1true
"1"true
"0"true
Complicating things now
0+0false
0+"0"true
"0"+"0"true
1-1false
"1"-1false
"1"-"1"false
Double Negation
!!0false
!!1true
!!"0"true
!!"1"true
Logical comparison
null == nulltrue
null == undefinedtrue
null == NaNfalse
null == ""false
null == 0false
null == falsefalse
undefined == undefinedfalse
undefined == NaNfalse
undefined == ""false
undefined == 0false
undefined == falsefalse
NaN == NaNfalse
NaN == ""false
NaN == 0false
NaN == falsefalse
"" == ""true
"" == 0true
"" == falsetrue
0 == 0true
0 == falsetrue
false == falsetrue
Strict Logical comparison
null === nulltrue
"" === ""true
"" === 0false
"" === falsefalse
0 === 0true
0 === falsefalse
false === falsetrue
Arrays
[ ]true
![ ]false
[ ] == truefalse

To remember:
# An empty array evaluates to Truthy whereas any boolean operation on an empty array results in a Falsy
# NaN is not equal to anything, not even itself
# Undefined is not equal to anything, not even itself
# Use strict equals (===) to be extra sure while comparing. This compares by type and value
# Avoid using Falsy value and stick to plain  true or  false to be sure of the results.

Now that you have read this far, Congratulations! I expect 0 bugs from your code henceforth :)

Comments

  1. thanks for the comment Joe .. and thanks for the link too

    ReplyDelete

Post a Comment

Popular posts from this blog

Using duplicate IDs in HTML

Well today I'm being a bit controversial. Let us see what the HTML5 spec says about unique IDs in a HTML file. The  id  attribute specifies its element's  unique identifier (ID) . The value must be unique amongst all the IDs in the element's  home subtree  and must contain at least one character. The value must not contain any  space characters . An element's  unique identifier  can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS. Yes its been mentioned almost everywhere on the planet that ID must be unique. Now let us look at the below code, Launch dup.css #p2 {   background-color: yellow;  } dup-id.html <!DOCTYPE html> <html>   <head>     <title>Duplicate ID Tester</title> <link rel="stylesheet" href="dup.css" />  

Minimal required code in HTML5

I've encountered this question repeatedly of late. "What are the tags required at bare minimum for a html file?" Earlier there were a bunch of mandatory tags that were required for any html file. At bare minimum, the recommended structure was: (ref: http://www.w3.org/TR/html4/struct/global.html ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML>   <HEAD>     <TITLE>A small HTML</TITLE>   </HEAD>   <BODY>     <P>Small HTML file!</P>   </BODY> </HTML> Yes, using capitals for the tags was the way to go! Those were the days of the purists and strict was the way to be. Now open your notepad and copy the above code, save the file as old.html and launch it in Chrome or Firefox. You will see only one line "Small HTML file!" shown. Now launch the developer tools in Chrome or Inspect Element in Firefox. Thi

Fixing Date, Time and Zone on RHEL 6 command line

Had to fix all time related issues on a remote RHEL 6 server which runs without any windowing system. Plain ol' command line. Documenting steps here for future reference: Check to see if your date and timezone settings are accurate: # date # cat /etc/sysconfig/clock The server I accessed had wrong settings for both the commands. Here are the steps I used to correct: Find out your timezone from the folder /usr/share/zoneinfo # ls /usr/share/zoneinfo Mine was pointing to America/EDT instead of  Asia/Calcutta Update and save the /etc/sysconfig/clock file to # sudo vi /etc/sysconfig/clock ZONE="Asia/Calcutta" UTC=true ARC=false Remove the /etc/localtime # sudo rm /etc/localtime Create a new soft link to your time zone # cd /etc # sudo ln -s /usr/share/zoneinfo/Asia/Calcutta /etc/localtime # ls -al localtime Now it should show the link to your time zone Set your hardware clock to UTC # sudo hwclock --systohc --utc # hwclock --show Update your t