docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,141 @@
|
||||
---
|
||||
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).
|
||||
Reference in New Issue
Block a user