<TIL 20.11.12> &&, ||, !!

&&

아래와 같이 사용했을때 만약 paymentType === 'escrow'가 거짓(false)라면 아무것도 보여주지 않는다. (&& 다음 연산은 하지 않음) 

그러나 paymentType === 'escrow'가 참(true)라면, && 다음 코드들을 화면에 보여준다. 

 {paymentType === 'escrow' && (
        <OrderBodyPaymentParcel display="display: flex" onClick={() => onPolicy('parcel')}>
          <OrderBodyPaymentParcelTitle>
            택배나 등기 이외 방법으로 거래하시나요?
          </OrderBodyPaymentParcelTitle>
          <OrderBodyPaymentParcelArrow src={`${imageUrl}/webview/escrow/ico_arrow_5x9_500.png`} />
        </OrderBodyPaymentParcel>
      )}

 

||

이 연산자는 → 방향으로 연산을 진행하는데, 가장 먼저 참(true) 의 형태를 가진 value 가 나오는 경우 그 피연산자를 바로 반환해버리고 연산을 끝내버린다.

아래와 같이 사용했을때 latestAddress가 참이라면 adress에 latestAdress를 할당한다. 참이 아닐땐 다음 address을 확인해 할당할지 말지를 판단한다.

address: latestAddress || address

 

!!

예제로 보면 확실히 감이 잡힌다.

왼쪽이 코드이고 오른쪽이 결과코드이다. 느낌표 두개 연산자는 null이나 undefined 값을 false로 변환할 때 사용할 수가 있다.