In JavaScript, understanding truthy and falsy values is fundamental to writing efficient and concise code. Combined with the concept of short-circuiting, developers can write elegant solutions to common programming challenges.
In this hands-on guide, we’ll explore truthy and falsy values, and understand the mechanics of short-circuiting in JavaScript.
You can get all the source code from here.
Table of Contents
Understanding Truthy and Falsy Values
In JavaScript, every value has an inherent Boolean interpretation when evaluated in a Boolean context. Values that evaluate to true
are considered truthy, while that evaluate to false
are falsy.
Let’s explore some examples:
// Truthy Values
if ('Hello') {
console.log('Truthy!'); // Output: Truthy!
}
if (42) {
console.log('Truthy!'); // Output: Truthy!
}
if (['apple', 'banana']) {
console.log('Truthy!'); // Output: Truthy!
}
// Falsy Values
if ('') {
console.log('Falsy!'); // This code block is not executed
}
if (0) {
console.log('Falsy!'); // This code block is not executed
}
if (null) {
console.log('Falsy!'); // This code block is not executed
}
Here’s a breakdown of the code above:
Truthy Values
'Hello'
: Any non-empty string in JavaScript is considered truthy. In this case, the string'Hello'
is non-empty, so the condition evaluates to true.42
: Any non-zero number (positive or negative) is considered truthy. Since42
is a non-zero number, the condition evaluates to true.['apple', 'banana']
: Arrays in JavaScript are considered truthy, regardless of their contents. Since the array['apple', 'banana']
is non-empty, the condition evaluates to true.
Falsy Values
''
(empty string): An empty string in JavaScript is considered falsy. Therefore, the condition evaluates to false, and the code block inside the if statement will not be executed.
0
: The number zero is considered falsy in JavaScript. Therefore, the condition evaluates to false, and the code block inside the if statement will not be executed.
null
: The null value is considered falsy in JavaScript. Therefore, the condition evaluates to false, and the code block inside the if statement will not be executed.
In JavaScript, values other than false
, 0
, ''
(empty string), null
, undefined
, and NaN
are considered truthy. Understanding these truthy and falsy values is crucial when writing conditional statements and logical operations in JavaScript.
Understanding truthy and falsy values is crucial as they play a significant role in conditional statements and logical operations.
What is Short-Circuiting in JavaScript?
Short-circuiting is a behavior exhibited by logical operators (&&
, ||
) where the evaluation of the second operand is skipped if the outcome can be determined by evaluating the first operand alone.
Let’s examine how short-circuiting works with practical examples:
The &&
Operator
The &&
operator returns the first falsy operand, or the last truthy operand if all operands are truthy.
const value = 0;
const result = value && 'Truthy Value';
console.log(result); // Output: 0
In this example, value
evaluates to 0
, which is a falsy value. Since the first operand is falsy, the expression short-circuits, and the result is 0
.
const value="Hello";
const result = value && 'Truthy Value';
console.log(result); // Output: Truthy Value
Here, value
evaluates to a non-empty string, which is truthy. Therefore, the second operand 'Truthy Value'
is returned, as it’s the last truthy operand.
The ||
Operator
The ||
operator returns the first truthy operand, or the last falsy operand if all operands are falsy.
const name="";
const displayName = name || 'Guest';
console.log(displayName); // Output: Guest
In this example, name
evaluates to an empty string, which is falsy. Therefore, the expression short-circuits, and 'Guest'
is assigned to displayName
.
const name="Alice";
const displayName = name || 'Guest';
console.log(displayName); // Output: Alice
Here, name
evaluates to a non-empty string, which is truthy. Therefore, the first operand 'Alice'
is returned, as it’s the first truthy operand encountered.
Practical Use Cases
Providing Default Values
Short-circuiting is commonly used to provide default values for variables.
const options = {};
const limit = options.limit || 10;
console.log(limit); // Output: 10 (default value)
In this example, options
is an empty object. The code intends to assign a value to limit
based on the options.limit
property. However, since options.limit
is not defined (it’s undefined), the logical OR (||
) operator is used.
The logical OR operator returns the value of the first operand if it’s truthy. If the first operand is falsy (in this case, options.limit
is undefined), it returns the value of the second operand (10
in this case), which acts as a default value.
Therefore, limit
will be assigned the value 10
because options.limit
is falsy (undefined).
Safely Accessing Nested Properties
Short-circuiting can also be used to safely access nested properties of objects.
const user = { address: { city: 'New York' } };
const city = user.address && user.address.city;
console.log(city); // Output: New York
In this example, user
is an object containing another object address
, which contains the city
property.
The expression user.address && user.address.city
is utilizing short-circuiting. It checks if user.address
exists and if it does, it further checks if user.address.city
exists.
If user.address
is truthy (if it exists), JavaScript proceeds to evaluate user.address.city
. If user.address
is falsy (if it’s undefined or null), JavaScript short-circuits the evaluation and doesn’t proceed to evaluate user.address.city
.
This prevents a potential TypeError
if user.address
is not defined or null.
Since user.address
exists in this case, the expression evaluates to the value of user.address.city
, which is 'New York'
.
This technique ensures safe access to nested properties and helps avoid runtime errors in cases where objects might not be fully populated or structured as expected.
Conclusion
Short-circuiting can greatly enhance your development workflow.
You can practice these concepts in your projects to become proficient in leveraging JavaScript’s short-circuiting behavior effectively.
If you have any feedback, feel free to reach out to me on Twitter and Linkedin