JavaScript Comparison Operators: How == and === Work

You need to compare values in almost every JavaScript program. This is where comparison operators come in. They check if values match or if one is greater than another.

Understand the JavaScript Comparison Operators

Comparison operators check how two values relate. You can check if two values are equal or not equal, or find out which one is bigger. These operators return either true or false.

Each decision in your code—like an if statement, a while loop, or any condition—relies on a comparison. Your code cannot decide what to do without them. They make your logic clear and your code dynamic.

Here are types:

• Equal (==)
• Strict Equal (===)
• Not Equal (!=)
• Strict Not Equal (!==)
• Greater Than (>)
• Less Than (<)
• Greater Than or Equal To (>=)
• Less Than or Equal To (<=)

You will see each one below with examples.

Loose vs. Strict Comparison in JavaScript

JavaScript has two types of comparison: loose (==, !=) and strict (===, !==).
Loose comparison converts types before checking values. Strict comparison checks both value and type without conversion.

For example:

'5' == 5   // true
'5' === 5  // false

You may not notice the mistake unless you know how each operator behaves.

Here is another example:

true == 1     // true
true === 1    // false

So, why you should avoid loose equality in JavaScript?

Loose equality can hide bugs. You may compare numbers with strings or booleans. This can make your logic wrong. Stick to === unless you understand the difference.

Loose comparison can convert strings, numbers, booleans, even null or undefined. This can confuse your code.

false == 0     // true
'' == 0        // true
null == false  // false

Type coercion is automatic in loose checks. Use strict checks to avoid errors.

Here is a table that shows you the comparison:

Greater, Less, and Equal Checks

JavaScript gives you four size-based comparison operators: >, <, >=, and <=. These help you test if a value is bigger or smaller. Or even equal in size.

• > returns true if the left value is more than the right.
• < returns true if the left value is less than the right.
• >= returns true if the left value is more than or equal to the right.
• <= returns true if the left value is less than or equal to the right.

Here is an example:

10 > 5       // true
'20' < 100   // true (converted to number)
'apple' < 'banana'  // true (alphabetical)

Comparisons work for numbers and strings. String checks follow dictionary order.

Here is another example:

7 >= 7        // true
4 <= 3        // false
'3' <= 3      // true (type conversion)

These checks follow the same coercion rules as > and <.

Edge Cases and Gotchas in JavaScript Comparison Operators

Some comparison results follow specific type conversion rules that can cause unexpected outcomes. You will see examples that do not behave as most people expect.

Why [] == false returns true:

An empty array seems like a value you might treat as false, but the logic behind it is more complex.

Here is what happens:

1. JavaScript tries to convert the array to a primitive.
2. [] becomes an empty string "".
3. "" becomes the number 0.
4. false also becomes 0 in loose comparison.

So this happens:

[] == false     // true

Now compare them with strict equality:

[] === false    // false

This is false because the types are different: [] is an object, and false is a boolean. Strict comparison checks both value and type, so it fails.

Why null == undefined returns true but null === undefined is false:

JavaScript treats null and undefined as loosely equal. This is a special case. No type conversion happens—they just return true if you use ==.

null == undefined

But in strict comparison, the types must match:

null === undefined    // false

They do not share the same type:

• null is an object.
• undefined is its own type.

So strict equality returns false.

Why NaN is not equal to itself:

NaN stands for “Not a Number.” It has a special rule in JavaScript: it never equals anything, not even another NaN.

NaN == NaN     // false
NaN === NaN    // false

This happens because JavaScript uses IEEE 754 rules for numbers. In that system, NaN always means “invalid number” and no invalid number should equal another.

To check if a value is NaN, use:

Number.isNaN(NaN)     // true

This works because Number.isNaN() checks the value without type conversion. Do not use == or === for this case.

Wrapping Up

In this article, you learned how JavaScript comparison operators work and why they matter. You saw the difference between loose and strict checks. You also saw how coercion can affect your logic. Here is a quick recap:

• Use === and !== instead of == and !=.
• Type coercion can change how values compare.
• Combine logical and comparison checks for better rules.
• Edge cases like [] == false or null == undefined can trick you.

FAQs

Similar Reads