1. 프롤로그: true/false만 반환한다고 생각했다면?
많은 분들이 &&(AND)와 ||(OR)를 단순히 조건문(if) 안에서 참과 거짓을 판별하는 용도로만 사용합니다. 하지만 자바스크립트의 이 연산자들은 단순히 boolean 값을 뱉는 게 아니라, '논리를 결정한 그 값 자체'를 반환한다는 사실, 알고 계셨나요?
이 특성인 '단축 평가(Short-circuit evaluation)'를 제대로 이해하면, 코드가 획기적으로 줄어듭니다.
2. 기본기 다지기: Truthy와 Falsy
자바스크립트는 true, false가 아니더라도 문맥에 따라 참/거짓으로 평가합니다.
- Falsy (거짓 같은 값):
false,null,undefined,0,-0,NaN,""(빈 문자열) - Truthy (참 같은 값): Falsy를 제외한 모든 값 (
"0",[],{}포함)
3. 논리연산자의 진짜 반환값 (퀴즈 포함)
단축 평가의 핵심은 "결과가 확실해지는 순간, 그 값을 바로 반환하고 멈춘다"는 것입니다.
3-1. && (AND): 끝까지 확인해야 하는 신중함
왼쪽이 참이면 오른쪽을 확인하고, 왼쪽이 거짓이면 바로 탈락시킵니다.
// 예시 1: 일반적인 경우
const result = "Cat" && "Dog";
// 결과: "Dog" ("Cat"이 Truthy니 뒤에 있는 "Dog"까지 확인하고 반환)
// 예시 2: 퀴즈 (많이 틀리는 부분!)
const weird = NaN && { name: "객체" };
// 결과: NaN
해설:
NaN은 Falsy 값입니다. AND 연산자는 거짓을 만나면 그 즉시 평가를 멈추고 그 범인(거짓인 값)을 반환합니다. 뒤에 있는 객체는 쳐다보지도 않습니다.
3-2. || (OR): 하나만 걸려라
왼쪽이 참이면 바로 선택하고, 왼쪽이 거짓이면 오른쪽으로 기회를 넘깁니다.
const port = process.env.PORT || 3000;
// 환경변수 PORT가 설정되어 있으면 그걸 쓰고, 없으면(undefined) 3000을 씁니다.
4. [현업 패턴] 시니어처럼 코드 짜기 (실무 예제)
이론은 알았으니 실무에서 자주 쓰는 고급 패턴을 알아봅시다.
패턴 A: 조건부 객체 속성 추가 (Conditional Object Property) 🔥
API 요청을 보낼 때, 특정 조건일 때만 필드를 보내야 하는 경우가 많습니다. 이때 if문을 쓰지 않고 Spread Operator(...)와 &&를 조합하면 우아하게 해결됩니다.
const isAdmin = true;
const keyword = "자바스크립트";
const searchParams = {
page: 1,
limit: 10,
// keyword가 있을 때만 q 속성을 추가
...(keyword && { q: keyword }),
// isAdmin이 true일 때만 adminMode 속성을 추가
...(isAdmin && { adminMode: true })
};
/*
[작동 원리 설명]
1. (isAdmin && { ... }) 부분:
- 참이면 { adminMode: true } 객체가 반환됨.
- 거짓이면 false가 반환됨.
2. Spread 연산자 (...) 부분:
- 객체를 펼침: { ...{key:value} } -> key: value
- false를 펼침: { ...false } -> 아무 일도 안 일어남 (무시됨)
결국 조건이 맞을 때만 해당 키-값이 객체에 쏙 들어갑니다!
*/
패턴 B: React에서의 조건부 렌더링
리액트 개발자라면 숨 쉬듯이 사용하는 패턴입니다.
// 나쁜 예 (0이 화면에 출력될 수 있음)
{ items.length && <List items={items} /> }
// items.length가 0이면 Falsy라서 0이 그대로 화면에 찍힘!
// 좋은 예 (확실하게 boolean으로 만들어주기)
{ items.length > 0 && <List items={items} /> }
// 또는
{ !!items.length && <List items={items} /> }
5. 마무리
||는 기본값(Default) 설정에 유리하다.&&는 조건부 실행(Guard)에 유리하다....와 조합하면 조건부 객체를 마법처럼 만들 수 있다.
단, 0이나 NaN 같은 Falsy 값들이 의도치 않게 로직을 방해하지 않도록 주의하세요. 특히 숫자 0을 유효한 값으로 써야 한다면 || 대신 ?? (Nullish coalescing) 연산자를 사용하는 것이 좋습니다.
