본문 바로가기
🍀오늘도 삽질 중🍀/Javascript

3항연산자로 if문 간단하게 만들기

by 매진2 2023. 6. 22.
728x90

첫 과제에서 3항연산자를 쓰라고 했는데 조건이 3개인 if문인줄 알고 썼던 초기 코드이다.

그리고 리뷰를 하면서 알게된 3항연산자를 쓰니까 이렇게 길던 코드가 단 3줄로 바뀌었다.

function handleBtn(btnValue) {
if (btnValue) {
loginBtn.disabled = false;
loginBtn.style.opacity=1;
loginBtn.style.cursor = "pointer";
} else {
loginBtn.disabled = true;
loginBtn.style.opacity = 0.5;
loginBtn.style.cursor = "default";
}

3항연산자의 기본 구조는 아래와 같다.

이때 true와 false 자리에는 truthy와 falsy의 값으로 대체 될 수 있다.

조건문 ? 참일 경우 실행 할 표현식 : 거짓일 경우 실행 할 표현식

삼항연산자를 적용해본 나의 코드는 아래와 같다.

loginBtn.disabled = btnValue ? false : true; 
loginBtn.style.opacity = btnValue ? 1 : 0.5;
loginBtn.style.cursor = btnValue ? "pointer" : "default";

 이때 disabled는 단순히 true, false 의 값이어서 더 간단하게 나타낼 수 있다.

논리 부정 연산자는 피연산자의 의미를 반전하기 때문에 !btnValue로 나타낼 수 있다.

loginBtn.disabled = !btnValue;
728x90