[JavaScript] 자바스크립트 ==과 ===의 차이에 대하여

자바스크립트에서는 변수들이 같은지 비교하는 연산자가 ==과 === 연산자 이렇게 두 가지가 존재합니다. 이 두 연산자는 차이점이 있어 각각 쓰임새가 다른데요. 이번 포스팅에서는 == 연산자와, === 연산자의 차이점과 사용 예시에 대해 알아보도록 하겠습니다.

 

"==" 동등 연산자

== 연산자는 동등 비교를 수행합니다. 먼저 비교하기 전에 양쪽 피연산자의 타입을 강제로 변환하여 비교하기 때문에 비교 대상의 타입을 고려하지 않습니다. 그래서 == 연산자를 "느슨한 비교(loose equality)"라고도 합니다. 때로는 이 강제 타입 변환이 예기치 않은 결과를 초래할 수 있습니다.

 

See the Pen == 연산자 by wjdxo513 (@wjdxo513) on CodePen.

 

위의 예시를 보시면 == 연산자의 특징을 알 수 있습니다. 먼저 첫 번째 예시인 숫자 100과, 문자열 "100"은 타입이 다르지만 비교하기 전에 타입을 변환하기 때문에 동일하게 취급하여 true를 반환합니다. 마찬가지로 숫자 0과 불리언 false, 그리고 null과 undefined도 각각 타입이 다르지만 == 연산자로 비교할 때는 동등하다고 판단하여 true를 반환합니다. 모두 타입 변환으로 인한 이슈입니다.

 

 

"===" 일치 연산자

=== 연산자는 일치 비교를 수행합니다. ===은 타입 변환 없이 타입과 값이 모두 동일할 때만 true를 반환합니다. 그래서 이를 "엄격한 비교(strict equality)"라고도 합니다. ===을 사용하면 == 에서 발생했었던 예기치 않은 문제들을 해결할 수 있습니다.

 

See the Pen ===연산자 by wjdxo513 (@wjdxo513) on CodePen.

 

위에서 설명했듯 ===연산자는 변환을 하지 않기에 첫번째 예시였던 숫자 100과, 문자열 "100" 비교에서 false를 반환했습니다. 마찬가지로 숫자 0과 불리언 false, 그리고 null과 undefined도 각각 타입이 다르기 때문에 모두 false를 반환합니다.

 

 

!=, !=== 연산자도 마찬가지입니다.

See the Pen !=, !==의 차이 by wjdxo513 (@wjdxo513) on CodePen.

 

==과 ===의 차이와 동일하게 부정 연산자인 !=, !===도 특성은 동일합니다.!=은 타입 변환을 먼저 진행한 후 비교를 진행하고!==은 비교 시 타입변환을 진행하지 않습니다. 위의 예제를 보시면 명확하게 이해하실 수 있으실 겁니다.

 

※ 결론적으로 비교 연산자의 경우 일반적으로 == 보다는, ===의 사용을 권장합니다. 타입 변환으로 인해 예기치 않은 결과를 방지하기 위해서입니다.