WallyLog
javascript

JavaScript `&&` 와 `||` 연산자: 기본 논리와 단축 평가 그리고 React 활용법

프로그래밍을 하다 보면 자주 만나게 되는 논리 연산자 &&(AND)와 ||(OR). 이 연산자들은 단순히 두 조건을 비교하는 것 이상의 의미와 동작 방식을 가지고 있습니다. 특히 JavaScript에서 이들은 **단축 평가(Short-circuit evaluation)**라는 중요한 특성을 가지고 있어, 코드를 효율적으로 작성하는 데 큰 도움을 줍니다.

이번 글에서는 &&와 ||의 기본 논리 의미, 단축 평가가 어떻게 동작하는지, 그리고 React에서 어떻게 활용되는지 예제와 함께 상세히 알아보겠습니다.

짧게요약(07/17)
아래의 경우 각각 참과 거짓일 일경우 코드1을 실행하기 위해 사용

참 && 코드1
거짓 || 코드1

1. && (AND) 연산자

기본 논리 의미

&& 연산자는 두 조건이 모두 참일 때만 전체가 참이 됩니다. 즉,

| a | b | a && b | | - | - | ------ | | T | T | T | | T | F | F | | F | T | F | | F | F | F |

단축 평가 (Short-circuit evaluation)

  • 왼쪽 값이 거짓(falsy) 이면 오른쪽은 평가하지 않고 바로 왼쪽 값을 반환합니다.
  • 왼쪽 값이 참(truthy) 이면 오른쪽 값을 평가하여 결과를 결정합니다.

예제

function a() {
  console.log("a 실행");
  return true;
}

function b() {
  console.log("b 실행");
  return false;
}

const result = a() && b();
console.log("결과:", result);
  • 실행 결과는 다음과 같습니다:
a 실행
b 실행
결과: false

  • a()가 true를 반환했기 때문에 b()도 호출되어 평가되었고, 최종 결과는 false가 되었습니다.

  • 만약 a()가 false를 반환하면 b()는 호출되지 않습니다.

2. || (OR) 연산자

기본 논리 의미

|| 연산자는 두 조건 중 하나라도 참이면 전체가 참이 됩니다.

| a | b | a or b | |---|---|---------| | T | T | T | | T | F | T | | F | T | T | | F | F | F |

단축 평가

  • 왼쪽 값이 참(truthy) 이면 오른쪽은 평가하지 않고 바로 왼쪽 값을 반환합니다.
  • 왼쪽 값이 거짓(falsy) 이면 오른쪽 값을 평가하여 결과를 결정합니다.

예제

function a() {
  console.log("a 실행");
  return false;
}

function b() {
  console.log("b 실행");
  return true;
}

const result = a() || b();
console.log("결과:", result);
  • 실행 결과:
a 실행
b 실행
결과: true

  • a()가 false를 반환했기 때문에 b()가 호출되어 평가되었습니다.

  • 만약 a()가 true를 반환하면 b()는 호출되지 않습니다.

3. React에서의 단축 평가 활용

조건부 렌더링(&&)

React에서는 &&를 사용해 특정 조건일 때만 컴포넌트나 요소를 렌더링하는 패턴이 매우 일반적입니다.

function UserGreeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <p>환영합니다, 사용자님!</p>}
    </div>
  );
}
  • isLoggedIn이 true일 때만 <p> 태그가 렌더링됩니다.
  • false일 때는 오른쪽 JSX 평가를 건너뛰어 아무것도 렌더링하지 않습니다.

기본값 설정(||)

||를 사용하면 값이 없거나 falsy일 때 기본값을 쉽게 설정할 수 있습니다.

function UserName({ name }) {
  return <p>이름: {name || "이름 없음"}</p>;
}
  • name이 없으면 "이름 없음"을 보여주고, 있으면 name을 보여줍니다.

주의점

  • && 오른쪽에 falsy 값(예: 0, '', null)이 있으면 그 값 자체가 화면에 렌더링될 수 있으니 주의가 필요합니다.

마무리

&&와 || 연산자는 단순한 논리 연산을 넘어 단축 평가라는 특성으로 인해 JavaScript에서 매우 효율적이고 강력하게 쓰입니다. React에서는 이 특성을 활용해 조건부 렌더링과 기본값 설정에 자주 활용됩니다.

개인적인 메모

즉 &&와 ||의 논리연산자를 사용한 결과는 내가 알던대로 true or false가 반환되지만 해당 결과를 반환하기까의 과정을 내가 몰랐다 a() && b() 의 경우 a() 함수를 반드시 호출하고 해당 결과가 false일 경우 b()를 호출 하지 않는다는 사실을 몰랐다

모든 게시글 보기