조건문 체크하기_삼항연산자 , 논리연산자(??, !, !!, &&)

이전에 개발을 하면서 조건문을 사용해야할 때 내가 선호하는 방식은 삼항연산자 활용 방식이였다.
내가 어떤 조건을 거는지 한 눈에 파악하기 쉽다는 이유가 가장 컸다

하지만 그렇게 작성한 코드가 프로젝트에 배포 후 문제가 생길 수 있다는 것을 알았다.
삼항연산자의 장점이라고 생각했던 '조건을 코드로 명확히 볼 수 있다'는 장점이 적어두지 않은 조건에 대해서 예외처리를 해줘야 한다는 단점이 되어 배포 후 문제가 발생했기 때문...

예를 들면 

{data?.content?.length !== 0 ? <div>{data}</div> : <div>결과가 없습니다</div>

위 코드의 경우 data의 길이가 0일 때만 확인 할 수 있고 나머지의 예외상황에 대해서는 걸러내지 못한다는 것이다.
data가 null이라면? undefined라면..? 저 코드에서 data를 찾을 수 없기 때문에 content를 찾을 수 없고 오류가 생길 수도 있는 것이다.

물론 js는 이해심이 깊어서 개떡같이라도 주면 찰떡같이 알아듣지만
null과 undefined로 인한 런타임 에러가 발생하기 전에 미리 방지하고자 .. 해결책을 찾아봤다.

해결방안으로 알게된 논리 연산자

&&(AND 연산자)

1=0 && <div>참이에요</div>

and 연산자는 위와 같이 사용한다. 조건들이 참일 때 다음 함수를 실행한다.

??(nullish coalescing 연산자)

물음표 두개는 0, null, undefined를 구분해내기 위해 사용된다.
예시는 아래를 참고하면 쉽다

!!(NOT 두번 연산자)

let data = 'data'

!!data && <div>{data}</data>

not 두번 연산자는 불리언 값이 아닌 것을 불리언 값으로 판별하기 위해 많이 쓰인다
위 코드에서는 data에 값이 존재하면 true, 존재하지 않으면 false를 반환한다

위처럼 !! 연산자를 사용하면 빈 값, null, undefind, 0을 구분 할 수 있다

빈 값이라고 해서 {}, [] 도 false 겠다고 생각할 수 있지만 두 경우는 true 값이 나온다
(배열 안에는 값이 없지만 배열은 존재하기 때문..)

---

검색하다보니 개발자들의 취향도 있는 것 같고 상황에 맞는 코드를 적는 것이 정답이겠지만 이번 기회를 통해서 삼항연산자만 무턱대고 사용했을 때의 단점을 알게 되었다

전에는 눈에 보이는게 좋아서 일일히 다 써줬던 삼항연산자 조건항을 간소화 하는 것도 도움이 된다는 것도 알게 되었다.

data !==0 ? a:b (0일 때만 커버)
를 하느니
data ? a:b ( 0, null, undefiend 커버)
로 쓰는게 더 나을 때도 있다는 것을..

null check의 중요성도...!

지금은 익숙하지 않아서 코드를 처음 봤을 때 조금 버퍼링이 걸려서 그렇지 적응 하면 오히려 논리연산자가 더 확실하고 가독성도 좋을 때도 있을 것 같다.