[JS] 이중삼항연산자를 사용해보자. ( feat : Vue.js )

보통 참이다 거짓이다에 따라 결과를 뽑아내고자 할때 if문을 자주 사용한다.

예를 들면 

if문을 활용한 참/거짓 판별

위와 같이 true/false를 비교하는데, else if를 활용하지 않고 참/거짓만 판단 할 경우에는 "삼항연산자"라는 녀석을

이용하는 게 코드가 더 깔끔하다고 한다. 삼항연산자는 다음과 같이 사용한다.

 

삼항연산자를 이용한 참/거짓 판별

 

대충 보면

참/거짓 ? 참일시 반환 : 거짓일시 반환과 같이

 

판별 할 변수 ? true일시 반환 : false일시 반환과 같은 형태를 이루고 있다.

 

여기서는 참/거짓 딱 2개만 판별이 가능하다. 그런데 만약 if문의 else if와 같이 여러 조건들을 두고 싶다면?

 

그럴 때 사용할 수 있는 게 바로 "이중삼항연산자"이다.

 

이중삼항연산자 활용

 

위와 같이 str이 CB001일때는 'CB001입니다.' 라는 로그가 찍히고, CB003일때는 'CB003입니다.'라는 로그가 찍히는 것을 볼 수 있다. 즉

 

판별 할 변수 ? true일시 반환 : 판별 할 변수 ? true일시 반환 : false일시 반환과 같은 형태를 이루고 있다.

이것을 프로젝트에서 게시판을 만들 떄 활용하였었다.

코드에 따라 요청중, 승인, 반려 와 같이 표출되도록 하는 코드였는데, 오히려 이중삼항연산자 이상이 되면 가독성이 떨어진다는 말에 결국 코드테이블을 만들어 관리하기로 하였다....

 

 Vue + 삼항연산자를 활용한 모습 (지금은 사라진 코드...)