[JavaScript] 느낌표 두 개 (!!) 논리 부정 연산자

단일 느낌표(!) - Logical NOT

하나의 느낌표 연산자는 논리 부정(Not) 연산자라고 한다. 오른쪽에 붙은 피연산자의 값을 역전시켜 boolean 타입으로 반환한다. 실무에서는 조건문에서 많이 사용된다.

 

if (!Array.length) console.log("빈 배열");

if (!data) console.log("데이터 없음");

 

 

이중 느낌표(!!) - Double NOT

이중 느낌표는 단일 느낌표와 같이 피연산자를 boolean 타입으로 값을 반환한다. 오른쪽에 붙은 피연산자가 true/false로 확실하게 정해지지 않은 경우 확실한 true/false 값을 가지도록 하는 게 목적이다. true/false 성격만 가지고 있던 값을 명확하게 true/false로 반환해 준다. (truthy/falsy  -> true/false)

 

기본적으로 boolean 타입이 아닌 값들도 true/false 성격을 가지고 있다. if 조건문에서 확인해 볼 수 있다.

 

if (true) { /* 실행 */ }
if (false) { /* 실행되지 않음 */ }
if (1) { /* 실행 */ }
if (0) { /* 실행되지 않음 */ }
if (-1) { /* 실행 */ }
if ("true") { /* 실행 */ }
if ("false") { /* 실행 */ }
if ("1") { /* 실행 */ }
if ("0") { /* 실행 */ }
if ("-1") { /* 실행 */ }
if ("") { /* 실행되지 않음 */ }
if (null) { /* 실행되지 않음 */ }
if (undefined) { /* 실행되지 않음 */ }
if ([]) { /* 실행 */ }
if ({}) { /* 실행 */ }
if ([[]]) { /* 실행 */ }
if ([0]) { /* 실행 */ }
if ([1]) { /* 실행 */ }
if (NaN) { /* 실행되지 않음 */ }

 

이중 느낌표 연산자의 사용

아래 코드는 리액트에서 input을 사용할 때 삼항 연산자를 통해 disabled의 true와 false를 정하는 경우이다.

 

<input disabled={(email === '' || status === 'REMOVE') ? true : false} />

 

위 코드는 아래와 같이 변환할 수 있다.

 

<input disabled={!!(email === '' || status === 'REMOVE')} />

 

email이 빈 값이거나 status가 'REMOVE'일 때에는 무조건 true를 반환하게 된다.

 

 

 

---

참고

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT#double_not_!!

https://dorey.github.io/JavaScript-Equality-Table/