Short-circuit — &&와 ||의 숨겨진 동작

이 토픽을 마치면

&&와 ||가 true/false가 아닌 값을 반환하는 원리를 이해하고, 실무에서 조건부 렌더링과 기본값 패턴에 활용할 수 있게 됩니다.

&&와 ||는 boolean을 반환하지 않습니다

console.log("hello" && "world"); // "world"
console.log(0 || 42);            // 42

다른 언어에서는 &&와 ||가 항상 true/false를 반환합니다. JavaScript는 다릅니다. 피연산자 중 하나를 그대로 반환합니다. 이걸 **단축 평가(Short-circuit evaluation)**라고 합니다.

&& 의 동작

&&는 왼쪽이 falsy이면 왼쪽을 반환하고, truthy이면 오른쪽을 반환합니다.

false && "hello"   // false — 왼쪽이 falsy, 왼쪽 반환
"hi" && "hello"    // "hello" — 왼쪽이 truthy, 오른쪽 반환
0 && "hello"       // 0 — 왼쪽이 falsy
"hi" && 0          // 0 — 왼쪽이 truthy, 오른쪽 반환

왼쪽이 falsy이면 오른쪽은 아예 실행하지 않습니다. "단축"이라는 이름은 여기서 나옵니다.

const user = null;
user && console.log(user.name); // user가 null이라 뒤는 실행 안 됨

|| 의 동작

||는 왼쪽이 truthy이면 왼쪽을 반환하고, falsy이면 오른쪽을 반환합니다.

"hello" || "world"  // "hello" — 왼쪽이 truthy, 왼쪽 반환
0 || 42             // 42 — 왼쪽이 falsy, 오른쪽 반환
"" || "default"     // "default" — 왼쪽이 falsy
null || "fallback"  // "fallback"

"첫 번째 truthy 값을 반환한다"고 생각하면 됩니다.

React의 조건부 렌더링

React에서 &&를 가장 많이 쓰는 곳은 조건부 렌더링입니다:

function Dashboard({ user }) {
  return (
    <div>
      {user && <UserProfile user={user} />}
      {user?.isAdmin && <AdminPanel />}
    </div>
  );
}

user가 존재하면 <UserProfile />을 렌더링하고, 없으면 아무것도 렌더링하지 않습니다. if문 없이 한 줄로 조건부 렌더링이 됩니다.

다만 주의할 점이 있습니다:

{count && <Badge count={count} />}

count가 0이면? &&는 0을 반환합니다. React는 0을 렌더링합니다. 화면에 "0"이 표시됩니다. 의도한 게 아닐 겁니다.

{count > 0 && <Badge count={count} />}

이렇게 boolean 표현식을 쓰면 안전합니다.

|| 로 기본값 설정

const name = user.name || "Anonymous";
const theme = config.theme || "light";

||로 기본값을 설정하는 흔한 패턴입니다. 하지만 0이나 ""를 유효한 값으로 다뤄야 할 때는 ??를 쓰세요.

핵심

&&는 왼쪽이 falsy이면 왼쪽, truthy이면 오른쪽을 반환합니다. ||는 왼쪽이 truthy이면 왼쪽, falsy이면 오른쪽을 반환합니다. React에서 &&로 조건부 렌더링할 때, 숫자 0 주의를 잊지 마세요.