2nd/10_Wiki/Topic_JavaScript/JavaScript_Comparisons.md

---
id: javascript-comparisons
title: "JavaScript Comparisons"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["JS comparison operators", "comparison operators", "equality operators", "strict equality", "string comparison", "type coercion comparison"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["javascript", "js", "web", "frontend", "w3schools", "comparisons", "operators"]
raw_sources: ["https://www.w3schools.com/js/js_comparisons.asp"]
applied_in: []
github_commit: ""
---

# [[JavaScript Comparisons]]

## 🎯 한 줄 통찰 (One-line insight)
Comparison operators compare two values and always return `true` or `false`; they work on strings (compared alphabetically) and coerce a string to a number when comparing a string with a number. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Comparison operators compare two values** — they always return `true` or `false`. [S1]
- **Loose vs strict equality** — `==` checks equal value; `===` checks equal value *and* equal type (and `!=` vs `!==` likewise). [S1]
- **String comparison is alphabetical** — all comparison operators can be used on strings, and strings are compared alphabetically. [S1]
- **Type coercion on mixed compare** — when comparing a string with a number, JavaScript converts the string to a number; an empty string converts to `0`, and a non-numeric string converts to `NaN`, which is always `false`. [S1]
- **String-vs-string is lexical** — when comparing two strings, `"2"` is greater than `"12"` because, alphabetically, `1` is less than `2`. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Prefer `===` for safety** — use strict equality to avoid surprising coercions, since `x == "5"` is `true` but `x === "5"` is `false` when `x` is the number 5. [S1]
- **Guard numeric input** — `Number(age)` then `isNaN(...)` before comparing handles non-numeric input. [S1]
- **Beware lexical string compare** — comparing numeric-looking strings compares them character by character, not numerically. [S1]

## 📖 세부 내용 (Details)
**Comparison Operators** [S1]
Comparison operators are used to compare two values. Comparison operators always return `true` or `false`. Assuming `x = 5`:

| Operator | Description | Comparing | Returns |
|----------|-------------|-----------|---------|
| == | equal to | x == 8 | false |
| == | equal to | x == 5 | true |
| == | equal to | x == "5" | true |
| === | equal value and equal type | x === 5 | true |
| === | equal value and equal type | x === "5" | false |
| != | not equal | x != 8 | true |
| !== | not equal value or not equal type | x !== 5 | false |
| !== | not equal value or not equal type | x !== "5" | true |
| !== | not equal value or not equal type | x !== 8 | true |
| > | greater than | x > 8 | false |
| < | less than | x < 8 | true |
| >= | greater than or equal to | x >= 8 | false |
| <= | less than or equal to | x <= 8 | true |

**JavaScript String Comparison** [S1]
All the comparison operators above can also be used on strings. Strings are compared alphabetically:
```javascript
let text1 = "A";
let text2 = "B";
let result = text1 < text2;
```
Note that, when comparing two strings, the comparison is lexical, not numeric:
```javascript
let text1 = "20";
let text2 = "5";
let result = text1 < text2;
```

**Comparing Different Types** [S1]
When comparing a string with a number, JavaScript will convert the string to a number when doing the comparison. An empty string converts to `0`. A non-numeric string converts to `NaN`, which is always `false`. When comparing two strings, `"2"` will be greater than `"12"`, because (alphabetically) `1` is less than `2`.

| Case | Value |
|------|-------|
| 2 < 12 | true |
| 2 < "12" | true |
| 2 < "John" | false |
| 2 > "John" | false |
| 2 == "John" | false |
| "2" < "12" | false |
| "2" > "12" | true |
| "2" == "12" | false |

**Conditional (Ternary) Operator** [S1]
The page demonstrates guarding numeric input and then using a ternary expression for the decision:
```javascript
age = Number(age);
if (isNaN(age)) {
  voteable = "Input is not a number";
} else {
  voteable = (age < 18) ? "Too young" : "Old enough";
}
```

## 🛠️ 적용 사례 (Applied in summary)
The page's own snippets are the canonical applied examples — comparing strings alphabetically, comparing numeric strings lexically, and guarding input with `Number(...)` + `isNaN(...)` before a ternary decision. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Alphabetical string comparison:
```javascript
let text1 = "A";
let text2 = "B";
let result = text1 < text2;
```
Validate then decide:
```javascript
age = Number(age);
if (isNaN(age)) {
  voteable = "Input is not a number";
} else {
  voteable = (age < 18) ? "Too young" : "Old enough";
}
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`==` (loose) vs `===` (strict)** — `==` compares value after type coercion, so `5 == "5"` is `true`; `===` requires equal value *and* type, so `5 === "5"` is `false`. Prefer `===`/`!==` when you want to avoid implicit coercion surprises. [S1]
- **Number vs string comparison** — with `<`/`>`, a string operand is coerced to a number (empty string → `0`, non-numeric → `NaN` → `false`); but when *both* operands are strings, the comparison is alphabetical (lexical), so `"2" > "12"` is `true`. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. The apparent paradox that `2 < "12"` is `true` while `"2" < "12"` is `false` is explained by coercion-vs-lexical comparison, not an inconsistency.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[JavaScript Tutorial]]
- **관련 개념:** [[JavaScript Operators]], [[JavaScript Conditional Operators]], [[JavaScript If]], [[JavaScript Types]]
- **참조 맥락:** Referenced whenever evaluating a condition for branching, loops, or validation.

## 📚 출처 (Sources)
- [S1] W3Schools — JavaScript Comparisons — https://www.w3schools.com/js/js_comparisons.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Comparisons" page (Astra wiki-curation, P-Reinforce v3.1 format).