[TIL] 왜 !!를 사용하는가? (double negation operator, double bang)

느낌표 두개 !! 연산자는 자바스크립트에서 흔히 "double negation" 또는 "double bang"이라고 불린다. 이 연산자는 값의 truthiness를 명시적으로 boolean 타입으로 변환하는 데 사용된다.

사용 예

!! 연산자의 일반적인 사용 예는 다음과 같다:

const value = "some string";

// Double negation to convert to boolean
const isTruthy = !!value;

console.log(isTruthy); // true

동작 원리

1. 첫 번째 !는 값을 부정(negate)하여 논리적 반전을 수행한다. 이 단계에서 truthy 값은 false로, falsy 값은 true로 변환된다.
2. 두 번째 !는 다시 한 번 부정하여 원래 값의 truthiness에 따라 true 또는 false로 변환한다.

이를 통해 어떤 값이든 명확하게 true 또는 false로 변환할 수 있다. !! 연산자는 조건문에서 값의 존재 여부를 boolean 값으로 평가할 때 유용하다.

예제

const value1 = null;
const value2 = "hello";
const value3 = 0;

console.log(!!value1); // false (null is falsy)
console.log(!!value2); // true ("hello" is truthy)
console.log(!!value3); // false (0 is falsy)

!! 연산자는 자바스크립트에서 값의 truthiness를 명확하게 평가하고자 할 때 널리 사용되는 패턴이다.

왜 !!를 사용하는가?

• Truthy/Falsy 값 평가: 자바스크립트에서는 여러 값들이 truthy 또는 falsy로 평가된다. 예를 들어, 빈 문자열(""), 0, null, undefined 등은 falsy로 평가되고, 나머지 값들은 대부분 truthy로 평가된다.
• 명시적 boolean 변환: !! 연산자를 사용하면 어떠한 값이라도 명확히 boolean 타입으로 변환된다. 첫 번째 !는 값을 논리적으로 반전시키고, 두 번째 !는 다시 반전시켜 원래 값이 truthy인지 falsy인지에 따라 true 또는 false를 반환한다.

예제

1. 명시적 boolean 변환을 사용하지 않은 경우:

   {userResponse?.data.user ? (
   <span>User exists</span>
   ) : (
   <span>No user</span>
   )}

2. 명시적 boolean 변환을 사용한 경우:

   {!!userResponse?.data.user ? (
   <span>User exists</span>
   ) : (
   <span>No user</span>
   )}

설명

• userResponse?.data.user는 userResponse, userResponse.data, 그리고 userResponse.data.user가 모두 존재할 때만 true로 평가된다. 하지만 이 표현식 자체는 boolean이 아닐 수도 있다.
• !!userResponse?.data.user는 userResponse?.data.user가 존재하면 true, 존재하지 않으면 false로 명확하게 boolean 값을 반환한다.

결론

삼항 연산자에서 !!userResponse?.data.user를 사용하는 이유는 조건을 boolean 값으로 명확하게 평가하여 코드의 가독성과 예측 가능성을 높이기 위함이다. 이는 특히 조건문을 작성할 때 명확한 boolean 값을 요구하는 경우에 유용하다.

 

https://ko.javascript.info/logical-operators

논리 연산자