🚀 자바스크립트 핵심 연산자 4종 세트 (|, ||, ?, ??)

자바스크립트에서 이 연산자들은 비트 연산, 논리 연산, 그리고 조건부 처리를 담당합니다. 특히 ||와 ??의 차이를 아는 것이 중요합니다.

---

1. 비트 OR 연산자 (|)

이진수 단위로 비교하여 둘 중 하나라도 1이면 1을 반환합니다. 실무에서는 소수점을 제거하거나 플래그를 처리할 때 간혹 쓰이지만, 일반적인 논리 체크용으로는 잘 쓰이지 않습니다.

• 특징: 피연산자를 32비트 정수로 변환하여 연산합니다.
• 예시: 5 | 1 (이진수 101 | 001 → 101 → 결과: 5)

2. 논리 OR 연산자 (||)

왼쪽 값이 Falsy(false, 0, "", null, undefined, NaN)인 경우 오른쪽 값을 반환합니다.

• 용도: 기본값 설정 (Default value)
• 주의점: 숫자 0이나 빈 문자열 ""도 유효한 값으로 취급하고 싶을 때도 ||는 이를 "값이 없다"고 판단해 버립니다.

3. 삼항 연산자 (? :)

조건 ? 참일_때_값 : 거짓일_때_값 형태로 사용되는 유일한 삼항 연산자입니다.

• 용도: 간단한 if-else문을 한 줄로 줄이고 싶을 때 사용합니다.
• 예시: const status = age >= 20 ? "성인" : "미성년자";

4. 널 병합 연산자 (??)

ES2020에서 도입된 연산자로, 왼쪽 값이 **null 또는 undefined**인 경우에만 오른쪽 값을 반환합니다.

• 용도: ||의 단점을 보완하여, 0이나 "" 같은 유효한 데이터는 유지하면서 진짜 값이 없을 때만 기본값을 주고 싶을 때 사용합니다.

---

💡 한눈에 비교하는 요약표

연산자	이름	비교 기준 (왼쪽이 이럴 때 오른쪽 반환)	주요 용도
|	비트 OR 연산자		(이진수 연산)
||	논리 OR 연산자	Falsy(false, 0, "", null, undefined, NaN)	논리 OR
??	널 병합	Nullish (null, undefined만)	정밀한 기본값 설정 (0, "" 유지)
?	삼항 연산자	Condition (조건식이 참/거짓일 때)	조건에 따른 값 선택

---

💻 코드 예시로 차이점 확인하기

const input = 0;

// 1. 논리 OR (||)
console.log(input || 10); // 결과: 10 (0을 Falsy로 취급함)

// 2. 널 병합 (??)
console.log(input ?? 10); // 결과: 0 (0을 유효한 값으로 취급함)

// 3. 삼항 연산자 (?)
console.log(input === 0 ? "영입니다" : "영이 아닙니다"); // 결과: "영입니다"