II (OR 연산자) vs ?? (Null 병합 연산자)

||는 논리 OR(또는) 연산자야.
다만 **자바스크립트에서는 “논리 연산자(또는) + 값 반환”**이라는 특이한 성질이 있어서 헷갈리는 거야.

 

차근차근 정리해줄게.

---

1️⃣ ||의 원래 의미 (논리 OR)

논리적으로는:

true  || false // true
false || true  // true
false || false // false

👉 여기까진 우리가 아는 “또는” 맞음.

---

2️⃣ JS에서 ||가 헷갈리는 이유

JS의 ||는 true / false를 돌려주는 게 아니라,
“값(value)”을 그대로 돌려준다는 점이 핵심이야.

규칙:

A || B

➡️ A가 truthy면 → A 반환
➡️ A가 falsy면 → B 반환

---

3️⃣ truthy / falsy가 뭐냐?

JS에서는 값들이 자동으로 true / false로 평가됨.

❌ falsy 값들 (외워두면 좋음)

• false
• 0
• '' (빈 문자열)
• null
• undefined
• NaN

⭕ 그 외 전부 truthy

---

4️⃣ 예제로 보면 바로 이해됨

예제 1

const x = 0 || 100;
console.log(x); // 100

➡️ 0은 falsy라서 100 반환

---

예제 2

const x = 'hello' || 'world';
console.log(x); // 'hello'

➡️ 'hello'는 truthy라서 그대로 반환

---

예제 3

const x = null || Date.now();

➡️ null → falsy → Date.now()

---

5️⃣ 그래서 ||가 “기본값 연산자”처럼 쓰였던 것

예전 JS 코드들:

const timeout = options.timeout || 3000;

문제:

• timeout = 0이어도
• 3000으로 덮어버림 😱

---

728x90

6️⃣ 이 한계를 해결한 게 ??

const timeout = options.timeout ?? 3000;

 

이건 options.timeout 이

• 0 이면 → 0 반환
• false 면 → false 반환 
• '' 면 → '' 반환
• null / undefined 면 → 3000

---

7️⃣ 논리 연산이 아니라 “값 선택”으로 이해해야 함

JS에서의 ||는 사실상:

“왼쪽이 쓸 만하면 왼쪽, 아니면 오른쪽”

---

8️⃣ 한 줄 요약

||는 논리 OR이 맞지만,
JS에서는 true/false가 아니라
“첫 번째 truthy 값”을 반환한다.

---

다음으로 이어서 이해하면 완벽해지는 것들:

• &&가 왜 “그리고”인데 값 반환을 하는지
• truthy / falsy 실수 사례 모음
• 옵셔널 체이닝 ?.와 같이 쓰는 패턴

어디까지 더 파볼까?