[JS] 단축평가 - boolean 값이 아닌 두 피연산자를 비교할 때

단축평가(short-circuit evaluation)

노마드 코더 영상으로 학습하던 중

{category !== "TO_DO" && (<button>To Do</button>)}

이런 코드를 보게 되었다.

먼저 논리연산자에 대해 설명하자면

논리연산자는 우항과 좌항의 피 연산자를 논리연산한다.

논리연산자	의미
||	논리합
&&	논리곱
!	부정

true || true; //true
false || false; //false
false || true; //true
false || false; // false

true && true; //true
true && false; //false
false && true; //false
false && false; //false

이 처럼 보통은 두 개의 boolean값을 비교한다.
하지만 피연산자가 반드시 boolean 값일 필요는 없는데 이게 바로 위의 코드에서 논리연산자를 사용한 방식이다.

'oatmeal' && 'energyBar'; // true

빈 값이 아닌 문자열은 모두 true로 치환되기 때문에 true && true 와 같은 결과 값이 나온다.

단축평가 표현식	평가 결과
true || anything	true
false || anything	anything
true && anything	anything
false && anything	false

따라서

{category !== "TO_DO" && (<button>To Do</button>)}

이 코드는

category 가 'TO_DO'일 경우	평가 결과
false && (<button>To Do</button>)	false

이기 때문에 버튼을 생성하지 않고

category 가 'TO_DO'가 아닐 경우	평가 결과
true && (<button>To Do</button>)	(<button>To Do</button>)

category가 TO_DO가 아닐경우 버튼을 생성한다.