Truthy and Falsy Values in JavaScript (Explained)
You have probably learned about the boolean data type that consists of two values either true or false. Truthy and falsy values in JavaScript are related to how values are evaluated in a boolean context. Understanding them is crucial when working with conditional statements and logical operations.
This tutorial will show you what are truthy and falsy values and how they work with code examples.
What are Truthy and Falsy Values in JavaScript?
In JavaScript, truthy values are considered those values that are true while falsy values are considered those values that are false when evaluated in the boolean context. And to check whether a value is truthy or falsy we use a built-in JavaScript Boolean() function.
Truthy Values in JavaScript
The following list shows the example of truthy values that are considered truthy in the JavaScript boolean context.
1- Non-empty strings: such as “Hello World”, “javascript”, or “2023” are considered truthy values.
For example, the code below shows a variable x holding a non-empty string. When we check it through the Boolean() function, its output is true.
var x = "This is a String";
document.write(Boolean(x));
// will output: true
2- All Numbers except (0, 0.00, -0) are considered truthy values in JavaScript.
Example:
var x = 654;
document.write(Boolean(x));
// will output: true
3- Arrays: like [11, 34, 45] are truthy values. However, an empty array is also considered a truth value in JavaScript. Like shown below.
var x = [65, 98, 33];
document.write(Boolean(x));
// will output: true
//----------------------------------
//an Empty array
var y = [];
document.write(Boolean(y));
// will also output: true
4- Objects: {Name: “John”, Age: 34} are considered truthy values. Like empty arrays, an empty object returns the truthy value in a boolean context.
var x = {
Name : "John",
Age : 29
};
document.write(Boolean(x));
// will output: true
//----------------------------------
//an Empty object
var y = {};
document.write(Boolean(y));
// will also output: true
5- true: The boolean value true is inherently a truthy value as shown below in the code example.
var x = true;
document.write(Boolean(x));
// will output: true
Falsy Values in JavaScript
Below are examples of falsy values that are considered falsy in JavaScript.
1- "" (Empty Strings): Empty strings are considered false and return false if we check them through the Boolean() function.
In the example below, we create an empty string. And check it through the Boolean() function.
//empty string
var x = "";
//using Boolean() function
var booleanValue = Boolean(x);
document.write(booleanValue);
// will output: false
2- 0 (zero): The number zero is inherently falsy in the boolean context.
For example, if we check the boolean value of a variable that has an assigned value of 0, using the Boolean() function, and display it on the screen. The output will be false.
var x = 0;
document.write(Boolean(x));
// will output "false"
3- undefined: If the variable is declared in JavaScript but has no value assigned then it will show undefined if you print it. Because undefined is its initial value. Undefined is also considered a falsy value.
Code Example: In the below code, we declared a variable with the name x and did not assign any value.
var x;
document.write(Boolean(x));
// will output "false"
4- null: Same as undefined and indicates false.
var x = null;
document.write(Boolean(x));
// will output: false
5- NaN: NaN stands for not a number which appears as an output when we place an invalid character instead of a number. It is also considered a falsy value in JavaScript.
document.write(Boolean(NaN));
// will output: false
6- false: False is a boolean value that is inherently a falsy value.
var x = false;
document.write(Boolean(x));
// will output: false
That’s all. Now, you know what are truthy and falsy values in JavaScript, how they work, and the difference between them. If you have questions then leave in the comment section below.
Also, see this shorthand method to convert any value to truth or falsy using JavaScript double exclamation mark.
Don’t forget to help others by sharing this tutorial!
Topic: JavaScript
