A comparison operator tests the relationship between two values and produces a condition that can guide layout, styling, validation, or animation logic. Common tests include greater than (>), less than (<), equality, inequality, and inclusive bounds (>=, <=). section 1.4.6
CSS usually expresses comparisons implicitly: min-width means greater than or equal to, while max-width means less than or equal to. JavaScript writes the operator explicitly. section 1.4.6 section 6.2.3
Use comparisons carefully when values come from different sources:
- Prefer strict equality (===) and strict inequality (!==); they require both the type and value to match. section 2.1.3
- Treat loose equality (==) and loose inequality (!=) cautiously because JavaScript may coerce one value to another type. section 2.1.3
- Convert numeric input before comparing dimensions, positions, or animation timings. section 2.1.3
Responsive breakpoint
A two-column layout can activate when the viewport reaches 768 pixels: CSS uses @media (min-width: 768px), while JavaScript can test window.innerWidth >= 768. Both express the same inclusive lower-bound comparison. section 1.4.6 section 6.2.3
Type-sensitive input comparison
With input = "100" and width = 100, input == width returns true because JavaScript coerces the string, but input === width returns false. Convert first with Number(input), then compare strict values. section 2.1.3
Table 2.3 JavaScript comparison operators
| Operator |
Name |
Example |
Result |
|
|
Equal (loose) |
|
|
|
|
Equal (strict) |
|
|
|
|
Not equal (loose) |
|
|
|
|
Not equal (strict) |
|
|
|
|
Less than |
|
|
|
|
Greater than |
|
|
|
|
Less than or equal |
|
|
|
|
Greater than or equal |
|
|
Use the operator table to compare loose and strict equality with ordering operators and their results. section 2.1.3
