JavaScript: Not-Not(!!) 안티 패턴

Not-Not 패턴(!!) 또는 뱅뱅은 JavaScript에서 유형 변환을 수행하는 방법입니다.
!는 NOT을 의미합니다. 그래서 ...

!true는 false입니다.

!false는 true입니다.

!0는 true입니다.

!1는 false입니다.

따라서 값을 부울로 변환할 때 코드는 값을 반전시키고 다시 반전시킵니다.

예

          !!false === false
           !!true === true

              !!0 === false
!!parseInt("foo") === false // NaN is falsy
              !!1 === true
             !!-1 === true  // -1 is truthy
          !!(1/0) === true  // Infinity is truthy

             !!"" === false // empty string is falsy
          !!"foo" === true  // non-empty string is truthy
        !!"false" === true  // even if it contains a falsy value

     !!window.foo === false // undefined value is falsy
      !!undefined === false // undefined primitive is falsy
           !!null === false // null is falsy

             !!{} === true  // an (empty) object is truthy
             !![] === true  // an (empty) array is truthy

현실 세계에서

이러한 예가 이 패턴에 대해 다르게 생각하도록 하는 데 충분하지 않은 경우 이 패턴에 일부 중요하고 예상치 못한 부작용이 있을 수 있음을 알아야 합니다.

내가 작업하고 있던 코드베이스는 페이지의 이미지에 대한 정보를 로드했습니다. 이미지가 반환되면 실행해야 하는 프로세스가 있었습니다. 이 코드 뒤에 있는 생각은 오류가 있으면 실행되지 않아야 한다는 것입니다.

버그를 추적하는 데 6명의 개발자와 몇 달의 시간이 소요되었습니다. 이 버그는 이미지에 대한 정보가 로드된 3,000번마다 한 번씩 나타났습니다.

코드

인턴의 인내심과 끈기는 상당한 부작용을 드러냈다.

const image = { name: 'BOB.jpg' };

function checkImage(image) {
  if (!!image) {
    console.log('image exists');
  }
}
checkImage(image);

따라서 원래 코드는 위와 같이 생겼습니다. 이미지 개체가 전달되었으며 존재하는 경우 console.log가 실행됩니다.

예상치 못한 부작용

여기에서 부작용이 발생했습니다 ...

const image = "ERROR: Authentication Wrong";

function checkImage(image) {
  if (!!image) {
    console.log('image exists');
  }
}
checkImage(image);

위의 코드를 통해 인턴은 오류가 발생했을 때 Not-Not 패턴이 true에서 오류 메시지를 보고 마치 이미지가 있는 것처럼 처리하려고 했습니다.

솔루션

해결책은 어렵지 않았습니다.
image 개체를 확인하기 위한 더 나은 패턴이 필요했습니다. 이것은 하나의 솔루션입니다. 더 많을 수 있습니다.

const image = "ERROR: Authentication Wrong";

function isObject(val) {
  if (val === null) { return false;}
  return ( (typeof val === 'function') || (typeof val === 'object') );
}

function checkImage(image) {
  if (isObject(image) === true) {
    console.log('image exists');
  }
}
checkImage(image);

위의 코드에서는 console.log가 실행되지 않습니다.

요약

Not-Not 패턴(!!) 또는 뱅뱅은 JavaScript에서 유형 변환을 수행하는 방법입니다. 이 패턴은 일부 중요하고 예상치 못한 부작용이 있을 수 있습니다.

이러한 부작용 때문에 나는 대부분의 경우 패턴을 사용하는 것을 꺼려하고 더 길고 목적이 명확하며 잠재적인 부작용이 적은 코드를 작성합니다.