[간단정리js] 자바스크립트 타입검사 시 == 연산자 대신 === 사용하기

 

 

 

 

타입 캐스팅

자바스크립트는 동적 언어라서 엄격한 타입 지정을 요구하지 않는다.  따라서 타입을 따로 지정하지 않고 변수 선언과 동시에 값을 할당하게 되면, 그 값의 타입을 알아서 지정해주는 타입 캐스팅(형 변환)이 발생한다.

 

자바스크립트의 형변환과 === 을 사용해야 하는 이유

자바스크립트에서 형변환은 두 가지로 구분 된다. 하나는 암묵적 형변환 이고, 다른 하나는 명시적 형변환이다.

 

그 중 서로 다른 타입의 값을 비교할 때 발생하는 형변환을 암묵적 형변환이라 부른다.  예를 들어, 1 과 '1' 은 서로 다른 타입을 나타내지만, 자바스크립트는 문자열 숫자와 숫자형 숫자가 서로 만나면  숫자형 숫자가 문자열로  타입 변환이 생기는 것이 있다. 즉 1 + '1' = '11' 이 되는 신기한 결과가 발생하는 것이다.

 

이러한 암묵적 형변환은  == 연산자를 사용할 때도 확인할 수 있는데, 앞서 + 연산자를 이용한 것과는 반대로

아래와 같이 == 연산자로 비교하게 되면 "1" 이 자동으로 형 변환이 되어 숫자형이 되고, 아래 식은 결국 숫자형과 숫자형을 비교하므로 true가 반환 된다.

console.log(1 == "1") // true

 

 

또 다른 예로 1 과 true 의 관계가 있다. 여기서 true는 1 이 될 수 있다. 반대로 false는 0이 될 수 있다. 이러한 특성에 의해 == 연산자를 사용하여 서로 비교하게 되면, 다음과 같은 결과가 나타난다.

console.log( 1 == true) // true
console.log( 0 == false) // true

 

이러한 형변환의 문제는 개발자가 의도한 결과와는 다른 예상치 못한 결과를 만들어낼 수 있다. 즉, 개발자는 숫자형 1과 문자형 1은 서로 다르다는 것을 불린형으로 증명하길 기대했지만, 실제로는 암묵적 형변환에 의해 1과 '1'은 서로 같다는 결과를 만들어 내는 것이다. 이로 인해 이 비교가 거짓일 때 발생해야 하는 로직이 의도와는 다르게 동작하는 문제가 발생하는 것이다. 

 

따라서 == 연산자와 같이 자동적으로 형 변환이 발생하는 것이 아닌, 해당 값의 타입 까지도 엄격하게 비교해주는 === 연산자를 사용하는 것이 좋다. 

 

그럼에도 굳이 == 을 사용해야 한다면?

굳이 == 연산자를 꼭 사용해야 하는 상황이라면 위와 같은 비교가 다닌 Number(), toString() 과 같은 해당인자의 값을 해당타입으로 명시적으로 형변환(명시적 형변환) 시켜주는 메서드를 사용하여 자체적으로 올바른 타입 검사가 되도록 정석적인 방식을 사용하는 것이 좋아 보인다. 

 

console.log(1 == Number("1")) // true