!= 과 !== 연산자의 차이점 이해

자바스크립트의 비교 연산자중 양쪽 값이 같지 않은지(부등)를 비교해 true/false를 결과값으로 반환하는 연산자는 2개가 있습니다.

두 부등 비교 연산자 != 과 !== 는 어떤 경우에는 같은 불리언(Boolean) 결과를 어떤 경우에는 다른 불리언(Boolean) 결과를 리턴합니다.

두 연산자는 다음과 같은 차이가 있습니다.

!= 연산자

부등 비교 연산자이며 동등 연산자( == ) 의 논리적인 반대값이 됩니다. 동등 연산자로 비교시 true일 경우, 부등 연산자는 그 반대인 false를 반환 합니다. 즉, 동등 연산자의 반대값이 됩니다.

비교할 때 양쪽 값의 타입이 다를 경우 같은 데이터 타입으로 변경(캐스팅) 한 후 비교합니다.

예를 들어 1 != '1' 은 false를 반환합니다. 양쪽 비교 데이터의 타입이 숫자와 문자열로 다르기 때문에 오른쪽 문자열은 숫자로 캐스팅 되고 양쪽 값은 같은 값이 됩니다. 따라서 이 비교식은 1 != 1 과 동일한 비교가 됩니다.

!== 연산자 

엄격한 부등 비교 연산자이며 엄격한 등등 비교 연산자(===)의 논리적인 반대가 됩니다. 즉, 엄격하게 동등 연산자로 비교한 값의 반대값을 반환합니다.

엄격한 부등 비교 연산자는 양쪽 비교값의 타입이 다른 경우 타입 변환을 하지 않습니다. 이말은 양쪽 비교값의 타입도 비교 대상이 되며, 타입이 다를 경우 값이 다른 것으로 간주합니다.

예를들어 1 !== '1' 은 true를 반환합니다. 양쪽 값의 타입이 숫자와 문자로 다르므로 같지 않은지를 비교하는 엄격한 부등 비교 연산자의 결과값은 true가 됩니다.

동등 비교 연산자인 == 과 === 에도 동일한 원리가 적용됩니다.

간단한 자바스크립트 비교 함수 예를 만들어 화면에 결과값을 찍어보도록 합니다.

<script>     // != 비교 함수    function NotEqual(val) {         if (val != 1) {             return "true 같지않음.";         } else {             return "false 같음.";         }     }     // !== 비교 함수    function StrictlyNotEqual(val) {         if (val !== 1) {             return "true 같지않음.";         } else {             return "false 같음.";         }     }   //비교 출력
//숫자 1과 비교document.write("  1 != 1 => " + NotEqual(1) + '<br/>'); document.write("  1 !== 1 => " + StrictlyNotEqual(1) + '<br/>'); //문자열 '1' 과 비교document.write(" '1' != 1 => " + NotEqual('1') + '<br/>'); document.write(" '1' !== 1 => " + StrictlyNotEqual('1') + '<br/>'); //숫자 0 과 비교document.write("  0 != 1 => " + NotEqual(0) + '<br/>'); document.write("  0 !== 1 => " + StrictlyNotEqual(0) + '<br/>');
</script>