Comparison operators in Javascript - Deep Dive

Overview - Comparison operators

What is it?

Comparison operators are symbols or words in JavaScript that let you compare two values. They check if one value is equal to, greater than, less than, or different from another. The result of a comparison is always true or false. This helps your program make decisions based on conditions.

Why it matters

Without comparison operators, programs couldn't decide between options or react to different situations. For example, a game wouldn't know if you won or lost, or a website wouldn't know if you entered the right password. They are the foundation of decision-making in code.

Where it fits

Before learning comparison operators, you should understand basic JavaScript values like numbers, strings, and booleans. After this, you will learn about conditional statements like if-else and loops, which use comparisons to control the flow of the program.

Mental Model

Core Idea

Comparison operators check two things and answer yes or no about how they relate.

Think of it like...

It's like asking a friend, 'Is your age greater than mine?' and getting a simple yes or no answer.

  Value A    Operator    Value B
    5       >          3
    ↓       ↓          ↓
  Compare two values, result is true or false

Build-Up - 7 Steps

1

Foundation

Basic equality and inequality

Concept: Learn how to check if two values are the same or different.

JavaScript uses == and === to check if values are equal. == checks if values are equal after converting types, while === checks if values and types are exactly the same. != and !== check if values are not equal, with similar type rules. Example: 5 == '5' // true because '5' converts to 5 5 === '5' // false because types differ 5 != 3 // true 5 !== '5' // true

Result

You can tell if two values are equal or not, with or without considering their types.

Understanding the difference between == and === prevents bugs caused by unexpected type conversions.

2

Foundation

Greater than and less than

Concept: Learn how to compare if one value is bigger or smaller than another.

JavaScript uses >, <, >=, and <= to compare numbers or strings. For numbers, it checks size. For strings, it compares alphabet order. Example: 7 > 3 // true 2 < 5 // true 5 >= 5 // true 'apple' < 'banana' // true because 'apple' comes before 'banana'

Result

You can check if a value is bigger, smaller, or equal to another.

Knowing how these operators work with strings helps avoid surprises when comparing text.

3

Intermediate

Type coercion in comparisons

🤔Before reading on: do you think '5' == 5 and '5' === 5 both return true or only one? Commit to your answer.

Concept: Understand how JavaScript changes types automatically during comparisons with == and !=.

When using == or !=, JavaScript tries to convert values to the same type before comparing. This is called type coercion. Example: '5' == 5 // true because '5' converts to number 5 false == 0 // true because false converts to 0 null == undefined // true But with === and !==, no conversion happens, so types must match exactly.

Result

You learn when comparisons might give unexpected true results due to type conversion.

Knowing type coercion helps you avoid bugs and choose the right operator for your needs.

4

Intermediate

Comparing different data types

🤔Before reading on: do you think '10' > 5 is true or false? Commit to your answer.

Concept: Learn how JavaScript compares values of different types using >, <, >=, <=.

When comparing different types with >, <, >=, <=, JavaScript converts both values to numbers if possible. Example: '10' > 5 // true because '10' converts to 10 'abc' > 5 // false because 'abc' converts to NaN (not a number) true < 2 // true because true converts to 1 If conversion fails, the comparison returns false.

Result

You understand how JavaScript handles mixed-type comparisons and when they fail.

Recognizing type conversion rules prevents unexpected false results in comparisons.

5

Intermediate

Strict vs loose comparison operators

🤔Before reading on: which is safer to use for checking equality, == or ===? Commit to your answer.

Concept: Distinguish between strict (===, !==) and loose (==, !=) comparisons and when to use each.

Strict operators (===, !==) check both value and type, making them safer and more predictable. Loose operators (==, !=) allow type conversion, which can cause unexpected results. Example: 0 == false // true (loose) 0 === false // false (strict) Best practice is to use strict operators to avoid bugs.

Result

You know which operators to use for reliable comparisons.

Choosing strict operators reduces bugs caused by unexpected type coercion.

6

Advanced

Comparing objects and references

🤔Before reading on: do two different empty objects equal each other with == or ===? Commit to your answer.

Concept: Understand how comparison operators work with objects and references in JavaScript.

Objects are compared by reference, not by their content. Example: const a = {}; const b = {}; a == b // false a === b // false const c = a; c === a // true Even if two objects look the same, they are different unless they point to the same place in memory.

Result

You learn why comparing objects with == or === usually returns false unless they are the same object.

Knowing object reference comparison prevents mistakes when checking object equality.

7

Expert

Surprising behaviors and edge cases

🤔Before reading on: does NaN equal NaN with == or ===? Commit to your answer.

Concept: Explore tricky cases like NaN, null, undefined, and how they behave with comparison operators.

NaN is special: it is not equal to anything, even itself. Example: NaN == NaN // false NaN === NaN // false null and undefined are equal with loose equality but not strict: null == undefined // true null === undefined // false Also, comparing objects with < or > calls their valueOf or toString methods, which can cause unexpected results.

Result

You understand rare cases that can cause bugs if not handled carefully.

Recognizing these edge cases helps write safer and more predictable code.

Under the Hood

JavaScript comparison operators work by evaluating two expressions and returning a boolean true or false. For loose equality (==, !=), JavaScript performs type coercion following a complex set of rules to convert values to a common type before comparing. For strict equality (===, !==), it compares both type and value directly. Relational operators (> , < , >= , <=) convert operands to primitives, usually numbers, and then compare them. Objects are compared by their memory reference, not their content. Special values like NaN have unique behaviors defined by the ECMAScript specification.

Why designed this way?

JavaScript was designed to be flexible and forgiving for beginners, so loose equality with type coercion was included to allow comparisons between different types without explicit conversion. However, this flexibility can cause confusion, so strict equality was added later to provide a safer alternative. The design balances ease of use with power, but requires developers to understand the differences to avoid bugs.

┌─────────────┐       ┌───────────────┐       ┌───────────────┐
│ Value A     │──────▶│ Type Coercion │──────▶│ Comparison    │
└─────────────┘       └───────────────┘       └───────────────┘
       │                      │                      │
       │                      │                      │
       ▼                      ▼                      ▼
  (Primitive or           (Convert to           (Return true or
   Object)                common type)          false result)

Strict operators skip Type Coercion step and compare directly.

Myth Busters - 4 Common Misconceptions

Quick: Does '0' == false return true or false? Commit to your answer.

Common Belief: People often believe '0' == false is false because they look different.

Reality: '0' == false is true because '0' converts to number 0, and false converts to 0, so they are equal.

Why it matters: This can cause unexpected bugs when checking user input or conditions, leading to wrong program behavior.

Quick: Do two empty objects {} == {} return true or false? Commit to your answer.

Common Belief: Many think two empty objects are equal because they look the same.

Reality: Two different objects are never equal with == or === because they are different references in memory.

Why it matters: This misunderstanding causes bugs when comparing objects for equality without proper methods.

Quick: Does NaN === NaN return true or false? Commit to your answer.

Common Belief: Some believe NaN equals itself because it represents 'not a number'.

Reality: NaN is not equal to anything, including itself, so NaN === NaN is false.

Why it matters: Failing to know this leads to incorrect checks for invalid numbers and bugs in calculations.

Quick: Is it safe to always use == for equality checks? Commit to your answer.

Common Belief: Some think == is simpler and safe to use everywhere.

Reality: Using == can cause unexpected true results due to type coercion; === is safer and recommended.

Why it matters: Using == carelessly can introduce subtle bugs that are hard to find.

Expert Zone

1

Loose equality (==) follows a complex algorithm that can convert objects to primitives, which may call user-defined methods like valueOf or toString, causing side effects.

2

Relational operators (<, >, <=, >=) convert operands to primitives and then to numbers, but if operands are strings, they compare lexicographically, which can be surprising.

3

Comparing null or undefined with relational operators always returns false, but with loose equality null == undefined is true, a special case in JavaScript.

When NOT to use

Avoid using loose equality (==, !=) in production code because it can cause unpredictable bugs. Instead, use strict equality (===, !==). For deep object comparison, use specialized libraries or write custom functions instead of relying on == or ===. When comparing floating-point numbers, consider precision issues and use tolerance checks rather than direct equality.

Production Patterns

In real-world JavaScript, strict equality (===) is the standard for comparisons to avoid bugs. Developers use utility functions or libraries like Lodash for deep equality checks of objects. TypeScript adds static typing to catch type mismatches before runtime. Defensive programming includes explicit type conversions before comparisons to ensure clarity and safety.

Connections

Conditional statements

Comparison operators provide the conditions that control if-else and switch statements.

Understanding comparisons is essential to control program flow and make decisions.

Database query filters

Comparison operators in JavaScript are similar to those used in database queries to filter data.

Knowing how comparisons work helps write better queries and understand data filtering logic.

Logic in everyday decision making

Comparison operators mimic how humans compare things to make choices.

Recognizing this connection helps grasp programming logic as a natural extension of daily reasoning.

Common Pitfalls

#1 Using loose equality (==) without understanding type coercion.

Wrong approach:

if (userInput == 0) {
// do something
}

Correct approach:

if (userInput === 0) {
// do something
}

Root cause:

Misunderstanding that == converts types, which can cause unexpected true results.

#2 Comparing objects directly to check if they have the same content.

Wrong approach:

const a = {x:1};
const b = {x:1};
if (a === b) {
// assume equal
}

Correct approach:

function isEqual(obj1, obj2) {
return JSON.stringify(obj1) === JSON.stringify(obj2);
}
if (isEqual(a, b)) {
// now equal
}

Root cause:

Not knowing that objects are compared by reference, not by content.

#3 Checking if a value is NaN using equality operators.

Wrong approach:

if (value === NaN) {
// handle NaN
}

Correct approach:

if (Number.isNaN(value)) {
// handle NaN
}

Root cause:

Not knowing that NaN is not equal to itself.

Key Takeaways

Comparison operators let you check relationships between values and return true or false.

Use strict equality (===, !==) to avoid bugs caused by automatic type conversion.

Objects are compared by reference, so two identical objects are not equal unless they are the same instance.

Special values like NaN and null have unique comparison behaviors that require careful handling.

Understanding how JavaScript converts types during comparisons helps write safer and more predictable code.