JavaScript Comparison and Logical Operators
Comparison operators compare two values and return a boolean (true or false). Logical operators combine multiple conditions. Together, these operators form the foundation of conditional logic and decision-making in JavaScript programs.
Comparison Operators
The == (equal to) operator compares two values for equality after performing type conversion if necessary. For example, 5 == "5" returns true because JavaScript converts the string "5" to the number 5 before comparing. This loose equality can cause unexpected results and bugs. Most style guides recommend avoiding == in favor of strict equality ===.
The === (strictly equal) operator compares both value and type without any type conversion. 5 === "5" returns false because they're different types (number vs string). === is safer and more predictable than ==. It's the recommended equality operator in modern JavaScript—always use === unless you specifically need type coercion.
The != (not equal) operator is the opposite of ==, returning true if values are different (after type conversion). 5 != "5" returns false because they're considered equal after conversion. Like ==, != performs type coercion, which can lead to confusing results. Prefer !== for clarity and safety.
The !== (strictly not equal) operator returns true if values differ in value or type, without type conversion. 5 !== "5" returns true because they're different types. Always prefer !== over != for the same reasons you prefer === over ==: predictability and avoiding type coercion bugs.
The > (greater than) and < (less than) operators compare numeric values or strings lexicographically. 10 > 5 returns true. String comparison is alphabetical: "b" > "a" returns true. If comparing different types, JavaScript attempts type conversion, which can produce unexpected results. For strings, uppercase letters come before lowercase in Unicode.
The >= (greater than or equal) and <= (less than or equal) operators include equality in their comparison. 10 >= 10 returns true, as does 10 <= 10. These operators use the same type coercion rules as > and <. They're commonly used for range checking and validation logic.
// Equal vs Strictly Equal
console.log(5 == "5"); // true (type conversion)
console.log(5 === "5"); // false (different types)
// Not equal
console.log(5 != "5"); // false
console.log(5 !== "5"); // true
// Comparisons
console.log(10 > 5); // true
console.log(10 < 5); // false
console.log(10 >= 10); // true
console.log(5 <= 10); // true
Logical Operators
The && (logical AND) operator returns true only if both operands are truthy. If either operand is falsy, it returns false. In conditional statements: if (age >= 18 && hasLicense) checks that both conditions are true. AND is used when multiple conditions must all be satisfied for code to execute. It's the logical equivalent of "both this AND that must be true."
The || (logical OR) operator returns true if at least one operand is truthy. It only returns false if both operands are falsy. In conditionals: if (isWeekend || isHoliday) executes if either condition is true. OR is used when any of several conditions can trigger code execution. It's the logical equivalent of "either this OR that (or both) must be true."
The ! (logical NOT) operator inverts a boolean value: !true becomes false, and !false becomes true. It converts truthy values to false and falsy values to true. For example, !0 returns true because 0 is falsy. The double NOT (!!) is commonly used to convert any value to its boolean equivalent: !!"hello" returns true, !!0 returns false.
An important characteristic: logical operators don't just return true/false—they return one of the actual operand values. && returns the first falsy value it encounters, or the last value if all are truthy. || returns the first truthy value, or the last value if all are falsy. This enables patterns like default values: let name = userName || "Guest".
Logical operators use short-circuit evaluation, meaning they stop evaluating as soon as the result is determined. With &&, if the first operand is falsy, the second isn't evaluated (because the result must be false). With ||, if the first operand is truthy, the second isn't evaluated (because the result must be true). This is useful for conditional execution and avoiding errors.
// Logical AND
console.log(true && true); // true
console.log(true && false); // false
// Logical OR
console.log(true || false); // true
console.log(false || false); // false
// Logical NOT
console.log(!true); // false
console.log(!false); // true
// Combined
let age = 25;
let hasLicense = true;
if (age >= 18 && hasLicense) {
console.log("Can drive");
}
// Short-circuit
let name = "" || "Guest";
console.log(name); // "Guest"