JavaScript Comparison Operators

Equality and Strict Equality

Equality (==)

The == operator checks if two values are equal, but it performs type coercion, meaning it converts values to a common type before comparing.

Example:

console.log(5 == "5"); // true, because "5" is converted to a number
console.log(0 == false); // true, because false is converted to 0
console.log(null == undefined); // true

Key Point: == allows implicit type conversion, which can sometimes lead to unexpected results.

Strict Equality (===)

The === operator checks if two values are equal without type coercion. It compares both value and type.

Example:

console.log(5 === "5"); // false, because the types are different
console.log(0 === false); // false, because 0 is a number and false is a boolean
console.log(null === undefined); // false

Key Point: === is generally preferred over == because it avoids unexpected type coercion.

Not Equal and Not Equal Value or Type

Not Equal (!=)

The != operator checks if two values are not equal, performing type coercion just like ==.

Example:

console.log(5 != "5"); // false, because "5" is converted to a number
console.log(0 != false); // false, because false is converted to 0
console.log(null != undefined); // false

Not Equal Value or Type (!==)

The !== operator checks if two values are not equal, without type coercion.

Example:

console.log(5 !== "5"); // true, because types are different
console.log(0 !== false); // true, because types are different
console.log(null !== undefined); // true

Key Point: !== is the strict version of !=, and it prevents type coercion, making it safer in most cases.

Greater Than and Greater Than or Equal To

Greater Than (>)

The > operator checks if the left operand is greater than the right operand.

Example:

console.log(10 > 5); // true
console.log(5 > 10); // false
console.log("b" > "a"); // true (compares Unicode values)

Greater Than or Equal To (>=)

The >= operator checks if the left operand is greater than or equal to the right operand.

Example:

console.log(10 >= 10); // true
console.log(5 >= 10); // false
console.log("b" >= "a"); // true

Key Point: These operators work for both numbers and strings (based on Unicode values).

Less Than and Less Than or Equal To

Less Than (<)

The < operator checks if the left operand is smaller than the right operand.

Example:

console.log(5 < 10); // true
console.log(10 < 5); // false
console.log("a" < "b"); // true (compares Unicode values)

Less Than or Equal To (<=)

The <= operator checks if the left operand is smaller than or equal to the right operand.

Example:

console.log(10 <= 10); // true
console.log(5 <= 10); // true
console.log("a" <= "b"); // true

Key Point: These operators also work with strings by comparing their Unicode values.

Logical Operators

AND (&&)

The && operator returns true if both operands are true.

Example:

console.log(true && true); // true
console.log(true && false); // false
console.log(5 > 2 && 10 < 20); // true

OR (||)

The || operator returns true if at least one operand is true.

Example:

console.log(true || false); // true
console.log(false || false); // false
console.log(5 > 10 || 10 < 20); // true

NOT (!)

The ! operator negates a boolean value.

Example:

console.log(!true); // false
console.log(!false); // true
console.log(!(5 > 2)); // false

JavaScript Ternary Operator (? :)

The ternary operator is a shorthand for an if-else statement. It takes three operands:

condition ? expression_if_true : expression_if_false;

Example:

let age = 20;
let status = (age >= 18) ? "Adult" : "Minor";
console.log(status); // "Adult"

Nested Ternary Operator:

let score = 85;
let grade = (score >= 90) ? "A" : (score >= 80) ? "B" : "C";
console.log(grade); // "B"

Key Point: Ternary operators make code concise but can reduce readability if overused.

Conclusion

JavaScript comparison and logical operators are essential for making logical decisions in your code.

• Use === and !== over == and != to avoid type coercion issues.
• Understand how greater/less than operators work with both numbers and strings.
• Logical operators (&&, ||, !) help construct complex conditions.
• The ternary operator is useful for short conditional expressions.

Mastering these operators will help you write more efficient and bug-free JavaScript code!