Boolean And Friends in JavaScript

Conditions, typecasting, logical operators, comparison operators, ternary operator, optional chaining, null-coalescing operator - they are all part of JavaScript. Understanding how Boolean values work and how to use them effectively is essential for writing clean, reliable code.

Boolean

A Boolean represents one of two values: true or false. It’s a primitive data type in JavaScript.

// Boolean primitive
const isActive = true;
const isDeleted = false;

console.log(typeof isActive); // "boolean"

// Boolean from comparison
const isAdult = 25 >= 18; // true
const isEmpty = "".length > 0; // false

You can also create Boolean values using the Boolean() wrapper, but this is generally not recommended as it creates an object instead of a primitive:

// Boolean wrapping object - avoid this
const boolObject = new Boolean(false);

console.log(typeof boolObject); // "object"
console.log(boolObject == false); // true
console.log(boolObject === false); // false - different types!

// Use Boolean() as a function instead (without new)
const boolPrimitive = Boolean(1); // true
console.log(typeof boolPrimitive); // "boolean"

Logical Operators

JavaScript has three logical operators: AND (&&), OR (||), and NOT (!).

AND Operator (&&)

Returns the first falsy value, or the last value if all are truthy:

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false

// Short-circuit evaluation
const user = { name: "Adrian" };
const greeting = user && user.name; // "Adrian"

// Common pattern: conditional rendering
const isLoggedIn = true;
const message = isLoggedIn && "Welcome back!";
console.log(message); // "Welcome back!"

OR Operator (||)

Returns the first truthy value, or the last value if all are falsy:

console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

// Default values
const userInput = "";
const name = userInput || "Anonymous";
console.log(name); // "Anonymous"

// Fallback chain
const color = undefined || null || "" || "blue";
console.log(color); // "blue"

NOT Operator (!)

Inverts the Boolean value:

console.log(!true); // false
console.log(!false); // true

// Double NOT for type conversion
console.log(!!"hello"); // true
console.log(!!0); // false
console.log(!!null); // false
console.log(!!undefined); // false

Falsy Values

In JavaScript, there are exactly 8 falsy values. When evaluated in a Boolean context, they all become false:

// All falsy values in JavaScript
console.log(Boolean(false)); // false
console.log(Boolean(0)); // false
console.log(Boolean(-0)); // false
console.log(Boolean(0n)); // false (BigInt zero)
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false

This matters when using conditions:

const value = 0;

if (value) {
  console.log("truthy");
} else {
  console.log("falsy"); // This runs because 0 is falsy
}

const text = "";

if (text) {
  console.log("has text");
} else {
  console.log("empty"); // This runs because "" is falsy
}

Truthy Values

Everything that is not falsy is truthy. Some values that might surprise you:

// These are all truthy
console.log(Boolean("0")); // true - non-empty string
console.log(Boolean("false")); // true - non-empty string
console.log(Boolean([])); // true - empty array
console.log(Boolean({})); // true - empty object
console.log(Boolean(function () {})); // true - function
console.log(Boolean(-1)); // true - negative number
console.log(Boolean(Infinity)); // true

== vs ===

The double equals (==) performs type coercion before comparing, while triple equals (===) checks both value and type:

// == (loose equality) - performs type coercion
console.log(1 == "1"); // true
console.log(0 == false); // true
console.log("" == false); // true
console.log(null == undefined); // true

// === (strict equality) - no type coercion
console.log(1 === "1"); // false
console.log(0 === false); // false
console.log("" === false); // false
console.log(null === undefined); // false

Warning: Always prefer === over == to avoid unexpected type coercion bugs.

Examples

Let’s look at practical examples combining what we’ve learned:

// Ternary operator
const age = 25;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // "adult"

// Optional chaining (?.)
const user = { address: { city: "Warsaw" } };
console.log(user?.address?.city); // "Warsaw"
console.log(user?.phone?.number); // undefined (no error)

// Nullish coalescing operator (??)
const count = 0;
const result1 = count || 10; // 10 (0 is falsy)
const result2 = count ?? 10; // 0 (?? only checks null/undefined)

// Combining operators
const config = null;
const theme = config?.theme ?? "light";
console.log(theme); // "light"

Bonus

Here are some advanced patterns using Boolean logic:

// Toggle a boolean
let isOpen = false;
isOpen = !isOpen; // true

// Convert to boolean
const hasItems = !!["item"].length; // true

// Guard clauses
function processUser(user) {
  if (!user) return;
  if (!user.name) return;

  console.log(`Processing ${user.name}`);
}

// Short-circuit for default objects
const options = null;
const settings = options || { theme: "dark", lang: "en" };

// Nullish coalescing assignment (??=)
let value = null;
value ??= "default";
console.log(value); // "default"

Closing Notes

Understanding Boolean values, falsy/truthy concepts, and logical operators is fundamental to writing good JavaScript. The key takeaways are:

• Use === instead of == for comparisons
• Know your falsy values - there are only 8 of them
• Use optional chaining (?.) to safely access nested properties
• Use nullish coalescing (??) when you want to handle only null and undefined
• Use the ternary operator for simple conditional assignments
• Leverage short-circuit evaluation for clean, concise code