To see the actual code samples of this README guide, please check the 03-OperatorsAndEquality github file.
Also Look At OperatorsAndEquality.md
Draft - OperatorsAndEquality.md (O&E.md)
For a visual explanation, check out this GitHub Repository.
This document explains how JavaScript comparison operators and logical operators work. It covers strict equality, loose equality, strict inequality, logical AND, logical OR, and logical NOT. Code examples with expected outputs are provided for clarity.
Comparison operators return boolean values (true or false) after evaluating the comparison between two operands. They include equality, inequality, greater-than, and less-than checks.
The loose equality operator (==) checks if two values are equal after type coercion (i.e., converting both values to a common type).
console.log(5 == "5"); // true (string "5" is coerced to number 5)
console.log(0 == false); // true (false is coerced to 0)
console.log(null == undefined); // true (null and undefined are considered equal)
Pitfall: Loose equality can lead to unexpected results due to type coercion. Always consider using strict equality (===) to avoid confusion.
Strict equality (===) checks for both value and type. No type coercion occurs.
console.log(5 === "5"); // false (different types: number vs string)
console.log(5 === 5); // true (both value and type match)
Use Case: Strict equality is preferred in most situations where exact comparison is needed without automatic type conversion.
The loose inequality operator (!=) checks if two values are not equal, applying type coercion if necessary.
console.log(5 != "5"); // false (type coercion makes both 5)
console.log(0 != false); // false (false is coerced to 0)
Strict inequality (!==) compares both value and type. No type coercion occurs, and it returns true if either the value or type doesn’t match.
console.log(5 !== "5"); // true (different types)
console.log(5 !== 5); // false (both value and type match)
Tip: Use strict inequality (!==) to avoid unexpected results caused by type coercion in loose inequality.
>) and Less Than (<)These operators compare two values and return true or false based on their numeric relationships.
const a = 10;
const b = 20;
console.log(a > b); // false
console.log(a < b); // true
console.log(a >= b); // false
console.log(a <= b); // true
Logical operators combine multiple conditions and return a boolean result based on the evaluation of the conditions.
&&)The AND operator returns true if both conditions are true; otherwise, it returns false.
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
Use Case: Use logical AND to ensure that multiple conditions are met, like checking user input validation where all fields must be non-empty.
||)The OR operator returns true if at least one of the conditions is true.
console.log(true || false); // true
console.log(false || false); // false
console.log(false || true); // true
Use Case: Use logical OR when you need to check if at least one condition is met. For example, checking if a user is logged in or if the session is active.
!)The NOT operator returns true if the operand is false and vice versa.
console.log(!true); // false
console.log(!false); // true
Use Case: Logical NOT is helpful for toggling boolean values or validating that certain conditions are not met.
JavaScript’s loose equality (==) often leads to unexpected behavior due to type coercion.
console.log(false == "0"); // true (string "0" coerced to number 0)
console.log(0 == ""); // true (empty string coerced to 0)
console.log(null == 0); // false (null is only loosely equal to undefined)
To avoid confusion, prefer using strict equality (===) in most cases to prevent automatic type conversions.
Logical operators can be chained to form complex conditions. However, care should be taken with short-circuit evaluation:
const userLoggedIn = true;
const hasValidToken = false;
console.log(userLoggedIn && hasValidToken); // false (short-circuits on the second condition)
Here, hasValidToken is evaluated only if userLoggedIn is true. If userLoggedIn were false, the second condition wouldn’t even be checked, making logical AND a powerful tool for optimizing condition checks.
Use === and !== over == and !=:
=== unless you specifically require loose equality.Include Comments for Expected Output:
Logical Operators:
&&, ||, and ! for compound conditions.Real-world scenarios and potential pitfalls are highlighted to help developers understand the importance of avoiding loose equality in critical comparisons.
Happy coding!
Back to Modern JavaScript Fundamentals