자바스크립트 단축 평가 정리

리액트를 공부하다가 클래스명이 &&로 나타내진것을 보고 단축 평가에 대해서 정리해보았다.

<FormControl className={`form-control ${!isValid ? 'invalid' : ''}`}>

<FormControl className={!isValid && 'invalid'}>

🔍 논리곱(&&) 연산자

'Cat' && 'Dog' // 'Dog'

위의 뜻은 무엇이며 왜 Dog 을 반환하는 걸까?

논리곱 연산자는 두 개의 피연산자가 모두 true 로 평가될때 두번째 피연산자 (오른쪽) 값을 반환한다.

하지만 둘 중에 하나가 false 라면 왼쪽 오른쪽 관계없이 false 를 반환한다.

'Cat' || 'Dog' // 'Cat'

논리합(||) 연산자는 두개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다.
그렇기때문에 || 일때 처음 식이 true 라면 처음식(왼쪽 값)을, false라면 마지막 식(오른쪽 값)을 반환한다.

true || anything // true
false || anything // anything
true && anything // anything
false && anything // false