자바스크립트 OR연산자는 boolean을 반환하지 않는다.

1. 자바스크립트의 OR 연산자는 boolean을 반환하지 않습니다

먼저 가장 큰 오해부터 풀어야 합니다. 자바스크립트의 || 연산자는 다른 언어와 다르게 동작합니다. C나 자바 같은 언어에서는 ||가 항상 true나 false를 돌려줍니다. 그래서 값 || 대체값이라고 쓰면 결과가 boolean이 나올 거라고 기대하기 쉽습니다.

그런데 자바스크립트의 ||는 boolean을 만들어내는 연산자가 아닙니다. 두 피연산자 중 하나를 골라서 그대로 돌려주는 연산자입니다. 정확히 말하면, 왼쪽 값을 boolean으로 변환했을 때 true가 되면 왼쪽 값을 그대로 반환하고, false가 되면 오른쪽 값을 그대로 반환합니다.

2. 동작 규칙을 코드로 확인

복사
console.log(5 || 10);           // 5
console.log(0 || 10);           // 10
console.log("hello" || "기본"); // hello
console.log("" || "기본");      // 기본
console.log(null || "기본");    // 기본
console.log(undefined || 100);  // 100
console.log(true || false);     // true

• 5는 boolean으로 바꾸면 true이기 때문에 왼쪽 값 5가 그대로 결과가 됩니다.
• 0은 boolean으로 바꾸면 false이기 때문에 오른쪽 값 10이 결과가 됩니다.
• "hello"는 빈 문자열이 아니라 true로 평가되어 왼쪽 값이 그대로 나옵니다.
• ""(빈 문자열), null, undefined는 모두 false로 평가되어 오른쪽 값이 사용됩니다.

여기서 핵심은 결과가 true나 false가 아니라는 점입니다. 5 || 10의 결과는 true가 아니라 숫자 5 자체입니다.

3. falsy 값을 알아두면 이해가 쉬워집니다

자바스크립트에서 boolean으로 바꾸면 false가 되는 값을 falsy 값이라고 부릅니다. 종류는 정해져 있습니다.

복사
false       // 그 자체로 false
0           // 숫자 0
-0          // 음수 0
0n          // BigInt 0
""          // 빈 문자열
null        // 값이 없음
undefined   // 정의되지 않음
NaN         // Not a Number

이 값들을 제외한 모든 값은 truthy입니다. 빈 배열 []이나 빈 객체 {}도 truthy라는 점이 의외일 수 있습니다.

|| 연산자는 왼쪽 값이 falsy면 오른쪽 값으로 넘어가고, truthy면 왼쪽 값을 그대로 씁니다. 그래서 "값이 없으면 뒤의 값을 사용한다"는 설명이 가능해지는 겁니다. 정확히는 "값이 falsy면 뒤의 값을 사용한다"가 맞는 표현입니다.

4. 왜 boolean이 아니라 값 자체를 반환할까

이런 동작을 단축 평가(short-circuit evaluation)라고 합니다. ||는 두 값을 모두 검사하지 않고, 왼쪽부터 평가하다가 결과가 정해지는 순간 멈춥니다.

왼쪽이 truthy라면 오른쪽이 무엇이든 전체 결과는 truthy입니다. 굳이 오른쪽을 볼 필요가 없으니 왼쪽 값을 그대로 돌려주고 끝냅니다. 왼쪽이 falsy라면 결과는 오른쪽에 달려 있으니 오른쪽 값을 평가해서 그 값을 그대로 돌려줍니다.

자바스크립트 설계자는 어차피 왼쪽이나 오른쪽 중 하나의 값으로 결정될 거라면, 그걸 boolean으로 변환해서 버리지 말고 그대로 활용할 수 있게 해두자고 결정한 셈입니다. 덕분에 우리는 다음과 같은 코드를 쓸 수 있습니다.

복사
function greet(name) {
  const userName = name || "손님";
  console.log(`안녕하세요, ${userName}님!`);
}

greet("민수");      // 안녕하세요, 민수님!
greet("");          // 안녕하세요, 손님님!
greet(undefined);   // 안녕하세요, 손님님!

• name이 truthy면 그대로 userName에 들어가고, falsy면 "손님"이 들어갑니다.
• if문 없이 한 줄로 기본값 처리가 끝납니다.

5. 다른 언어와 비교해서 정리

C나 자바에서 5 || 10을 쓰면 결과는 true입니다. 두 값 모두 0이 아니니까 OR 연산 결과가 true가 됩니다. 그런데 그 true를 변수에 담아서 쓸 일이 거의 없습니다. boolean끼리 OR하는 용도로만 쓰입니다.

자바스크립트는 다릅니다. 5 || 10의 결과는 5입니다. 이 결과를 변수에 그대로 담아서 쓸 수 있습니다. 그래서 OR 연산자가 boolean 계산뿐 아니라 기본값 지정 도구로도 쓰입니다. 같은 기호지만 역할이 두 가지인 셈입니다.

6. 한 가지 주의할 점

||로 기본값을 지정할 때 함정이 있습니다. 0이나 빈 문자열도 falsy이기 때문에 의도치 않게 대체값이 들어갈 수 있습니다.

복사
function setVolume(level) {
  const volume = level || 50;
  console.log(`볼륨: ${volume}`);
}

setVolume(70);   // 볼륨: 70
setVolume(0);    // 볼륨: 50  (사용자는 0을 원했는데!)

• 사용자가 볼륨을 0으로 설정하고 싶어도 0이 falsy라서 50으로 바뀌어버립니다.

이런 상황을 막으려면 ??(널 병합 연산자)를 쓰면 됩니다. ??는 왼쪽이 null이거나 undefined일 때만 오른쪽 값을 사용하고, 0이나 빈 문자열은 그대로 둡니다.

복사
function setVolume(level) {
  const volume = level ?? 50;
  console.log(`볼륨: ${volume}`);
}

setVolume(0);          // 볼륨: 0   (의도대로 0이 유지됨)
setVolume(undefined);  // 볼륨: 50

• ??는 "값이 정말 없을 때만"을 정확히 표현하는 연산자입니다.
• 숫자 0이나 빈 문자열을 유효한 값으로 처리하고 싶을 때 || 대신 ??를 쓰는 편이 안전합니다.

정리하면 자바스크립트의 ||는 boolean 결과를 만드는 OR가 아니라, 두 값 중 하나를 골라 돌려주는 연산자입니다. 왼쪽이 truthy면 왼쪽, falsy면 오른쪽을 그대로 반환합니다. 이 동작 덕분에 기본값 지정 문법으로 자연스럽게 쓰입니다.