velog 소스코드에서 시작한 논리연산자 삽질

chance·2020년 5월 29일

javascript

목록 보기

5/6

velog 분석과 삽질의 시작⏳

개인 프로젝트의 UI 구현을 해야했으나 리액트로 프로젝트를 진행한 경험이 없어 어떻게 컴포넌트를 쪼개고 css를 적용시킬지 막막한 상황이었다. 소스코드를 참고하기 github을 떠돌아다니다가 도착한 곳은 velog의 repository. 그러던 중에 나는 당황스러운 jsx expression을 발견하게 되었다.

{ postList && postList.length === 0 && (
            <div className="empty-list">아직 작성한 포스트가 없습니다.</div> }

C, C++, Java를 꽤나 오랜 시간 동안 사용했기에 logical expression의 결과가 모두 boolean일거라 생각했다. 하지만 분명 랜더링을 위한 코드인데, 반환값이 boolean이 return type으로 오는 것이 이해되지 않았다. 궁금증을 안으면 언제나 그랬듯이 결국 MDN으로 발걸음을 향했다. 그리고 MDN은 말한다.

mozilla의 설명이 mozilla...🚑

제일 첫 문단에서부터 심상치 않은 대목이 등장하였다.

그러나, &&와 || 연산자는 사실 피연산자의 값 중 하나를 반환합니다.

return type은 boolean이 아닌 operand였던 것이다.

다음 설명을 보자.

expr1 && expr2
expr1이 true로 변환될 수 있으면 expr2를 반환하고, 그렇지 않으면 expr1이 반환된다.

이 설명은 여러개의 &&가 사용되었기에 상당히 부족하다고 생각했다. 그래서 곧장 chrome으로 들어가 console에서 다음 코드를 입력해보고 결과를 확인하였다.

실험🧪

const a = 1 && undefined && false;

undefined

truthy value && falsy value && falsy value
: 두번째 피연산자(falsy value)를 반환

const b = 1 && 2 && undefined;

undefined

truthy value && truthy value && falsy value
: 세번째 피연산자(falsy value)를 반환

const c = '' && false && undefined;

''

falsy value && falsy value && falsy value
: 첫번째 피연산자(falsy value)를 반환

const d = 1 && 2 && 3;

truthy value && truthy value && truthy value
: 세번째 피연산자(truthy value를 반환)

여러개가 중첩될 때는 왼쪽에서 오른쪽으로 피연산자들을 boolean type으로 변환해보면서 제일 처음으로 나오는 falsy value를 반환하고 있었다.
그리고, 피연산자가 모두 truthy value일 때는 마지막 value를 반환하였다.

확인

javascript.info에서 확인한 결과 다음과 같이 설명하고 있었고 실험의 결과로부터 내린 가설은 맞았다!

순차적으로 검사하여 가장 먼저 나오는 falsy value 값을 return
모두 true로 변환되는 value라면 마지막 값을 return

추가적으로, || 연산자는 역으로 동작한다고 생각하면 편-안하다.
1. 순차적으로 검사하여 가장 먼저 나오는 true value 값을 return
2. 모두 false로 변환되는 value라면 마지막 값을 return

이제 본래 공부하고 있던 jsx expression으로 돌아와보자.

postList && postList.length === 0 && (
            <div className="empty-list">아직 작성한 포스트가 없습니다.</div>
          )

위에서 확인한 내용을 적용시킨다면 다음과 같이 동작함을 확인할 수 있다.
1. postList는 항상 배열 타입이므로 첫번째 피연산자는 항상 true.
2. postList가 빈 배열이 아니면 두번째 피연산자가 false가 된다. === 연산의 결과는 boolean type인 false로 반환된다.
3. postList가 빈 배열이면 모두 세 피연산자 모두 true가 되어 마지막 피연산자인 div element를 반환한다.