JS) 논리적 AND OR

포스팅을 하게된 계기

import React, { useEffect, useState } from "react";

const Example = () => {
  const [data, setData] = useState(null);

  function getData() {
    return new Promise((reso) => {
      setTimeout(() => {
        const obj = {
          id: 1,
          name: "홍길동",
          firstName: "홍",
        };
        reso(obj);
      }, 2000);
    });
  }

  useEffect(() => {
    (async () => {
      const data = await getData();
      setData(data);
    })();
  }, []);
  return (
    <div>
      <div>오늘 일기 ....일기장</div>
      <div>
        내 이름은 {data && data.name === "돌쇠" ? data.name : data.firstName}
      </div>
    </div>
  );
};

export default Example;

 

간단한 리액트 구문이다. 데이터를 가져와 저장하고 데이터를 렌더링하는 코드이다.

그런데

에러를 만나버렸다.

 

에러가 나온 쪽을 자세히 보면 

내 이름은 {data && data.name === "돌쇠" ? data.name : data.firstName}

 

데이터가 있고, 데이터.name === "돌쇠"라면 data.name 아니라면 data.firstName을 렌더링한다. 

슬쩍 봐서는 문제가 없어보이나 한 번 더 봐야(난 세번이나 봤다.) 에러가 보인다.

 

자세히 보면 data값이 있는지 확인하는 &&가 있지만 data가 null일 경우에 data.firstName이라는 값을 참조하고 있다.

해결은

 {data && (data.name === "홍길동" ? data.name : data.firstName)}

무척 간단했고 퇴근을 해버렸지만

 

"" || false || 1 || true || 5

퇴근길에 위 코드는 어떻게 나올까 하는 생각이 들었다.

 

 

논리적 OR

MDN문서를 보면 "|| 연산자는 실제로 지정된 피연산자 중 하나의 값을 반환한다."라고 되어있지만 좀 더 읽어보면 다음과 같이 말하고있다.

 

"논리적 OR 표현식은 왼쪽에서 오른쪽으로 평가되며 다음 규칙을 사용하여 '단락' 평가가 가능한지 테스트합니다. .... 이는 첫 번째 피연산자를 평가한 후에 피연산자 값이 이미 결정되었기 때문에..."

 

즉, ||연산자는 연산을 하는 도중 true값을 만나면 그 값을 반환한다는 뜻이다.

그 예시로 MDN은 다음과 같은 예를 들었다.

function A() {
  console.log("called A");
  return false;
}
function B() {
  console.log("called B");
  return true;
}

console.log(B() || A());
// 함수 호출로 인해 "called B"를 콘솔에 출력합니다.
// 그런 다음 true(연산자의 결과 값)를 기록합니다.

 

실제 콘솔창 또한 A함수를 호출하지 않고 그대로 종료시켜버린다.

 

그렇다면 

"" || false || 1 || true || 5

 

위 계산의 답은 무엇일까.

값은 1이 나오게 된다.

MDN이 말한대로 따라가보면 ""은 false니 다음 평가로, false또한 false니 다음 평가로, 1은 true이니 그대로 코드를 종료시키며 1을 반환하게 된다.

 

논리적 AND

And 연산자 또한 마찬가지이다.

MDN은 다음과 같이 말하고있다.

 

"... 어떤 변환이 false로 판별되면 AND 연산자는 그 즉시 멈추고 거짓으로 판별된 피연산자의 원래의 값을 반환합니다. 나머지 피연산자는 평가하지 않습니다."

 

즉 ||연산과 마찬가지로 하나의 값이라도 false라면 그 즉시 반환한다는 말이다.

MDN의 말대로라면

1 && 2 && 3 && 0 && false

위 코드 또한 0이 나와야하고 그 답 역시 0으로 출력되고 있다.

 

 

정리

OR, AND 연산자는 왼쪽에서 오른쪽으로 "단락평가"를 진행하는데, 하나라도 true(||) 또는 false(&&)라면 그 즉시 값을 반환한다.

라는 뜻이 된다.

이해를 더 쉽게 하기 위해 유튜버 "제로초"님의 말씀을 빌리면,

 

||은 왼쪽에서부터 값이 false면 다음으로 넘어간다. &&는 값이 true면 다음으로 넘어간다.

이를 잘 유념하며 JSX등에 사용하면 실수를 많이 줄일 수 있을 것이다.

 

끝으로 두 연산자의 우선순위는 AND연산자가 높은 우선순위를 갖게된다.