삼항 연산자

개념 이해하기

조건 ? 참일 때 값 : 거짓일 때 값 형태의 표현식입니다. 변수에 넣거나 템플릿 안에 사용할 수 있지만 중첩하면 읽기 어려워 if 문이 낫습니다.

isLoggedIn이 true이므로 물음표 뒤의 로그아웃이 선택되어 label에 들어가고, 화면에는 버튼 문구: 로그아웃이 나타납니다. 값이 false로 바뀌면 콜론 뒤의 로그인이 선택됩니다. label을 let이 아닌 const로 선언할 수 있는 것도 삼항 연산자가 값 하나를 돌려주는 표현식이기 때문입니다.

삼항 연산자는 우선순위가 낮아 + 같은 연산과 섞을 때 괄호가 필요합니다. 문구를 앞에 붙이려고 문자열 + isLoggedIn ? 로그아웃 : 로그인처럼 괄호 없이 쓰면 문자열과 isLoggedIn을 먼저 이은 값이 조건이 되는데, 이 값은 비어 있지 않은 문자열이라 isLoggedIn이 false여도 항상 로그아웃이 선택됩니다.