JavaScript에서 ||는 논리 합(Logical OR) 연산자입니다. 이 연산자는 기본적으로 "둘 중 하나라도 true면 true"라는 역할을 하지만, 실제 코드 작성 시에는 기본값(Default Value) 설정을 위해 아주 빈번하게 사용됩니다.
주요 역할과 작동 원리를 정리해 드립니다.
1. 기본적인 논리 연산
두 개의 피연산자 중 하나만 true여도 결과는 true가 됩니다.
| 연산 | 결과 |
|---|---|
| `true | |
| `true | |
| `false | |
| `false |
2. 단축 평가 (Short-circuit Evaluation)
JavaScript의 ||는 왼쪽부터 오른쪽으로 값을 평가하며, 첫 번째로 만나는 truthy한 값(true로 간주되는 값)을 즉시 반환하고 연산을 멈춥니다. 만약 끝까지 truthy한 값이 없다면 마지막 값을 반환합니다.
"사과" || "포도" // "사과" (첫 번째 값이 truthy이므로 바로 반환)
false || "포도" // "포도" (첫 번째가 falsy이므로 다음 값인 "포도" 반환)3. 실무에서의 활용: 기본값 설정
변수에 값이 없을 때(null, undefined, 빈 문자열 등) 대체값을 넣고 싶을 때 가장 많이 쓰입니다.
let userName = ""; // 사용자가 이름을 입력하지 않은 상황 (falsy)
let displayName = userName || "익명사용자";
console.log(displayName); // "익명사용자"⚠️ 주의할 점 (falsy 값의 함정)
|| 연산자는 0, ""(빈 문자열), false, null, undefined를 모두 falsy로 취급합니다.
만약 "값이 0일 때는 0을 그대로 쓰고 싶고, 오직 null이나 undefined일 때만 기본값을 쓰고 싶다"면, 최근 자바스크립트(ES2020)에서는 || 대신 null 병합 연산자 ??를 사용하는 것이 더 안전합니다.
let count = 0;
// || 를 사용하면 0을 falsy로 봐서 10이 할당됨
let result1 = count || 10; // 10
// ?? 를 사용하면 null/undefined만 체크하므로 0이 그대로 유지됨
let result2 = count ?? 10; // 0요약하자면:||는 "이거 아니면 저거(기본값)"를 선택할 때 사용하는 연산자라고 이해하시면 됩니다.
혹시 블로그 포스팅 중인 if 문 condition 조건에 관하여 글에 이 내용을 추가할 계획이신가요? 이 연산자의 단축 평가 특징을 활용하면 복잡한 if문을 한 줄로 줄이는 로직을 설명하기 좋습니다.
728x90
반응형