JS : 느슨한 동등 비교 연산자(==) vs 엄격한 동등 비교 연산자(===)

Erica Gong·2022년 7월 26일

JS

목록 보기

4/4

들어가며

암시적 형변환 밈

느슨한 동등비교 연산자(==)와 엄격한 동등 비교 연산자(===)에 대한 비교는 JavaScript 인터뷰 질문 리스트에 매번 등장하는 항목이다. 가볍게 정리해보자.

느슨한 동등 비교 연산자(==) vs 엄격한 동등 비교 연산자(===)

느슨한 동등 비교 연산자(==)와 엄격한 동등 비교 연산자(===)은 두 개의 피연산자에 대한 비교 연산을 수행한다.

===의 동등 비교에서는 비교하려는 두 피연산자의 자료형이 일치하지 않더라도 형변환(Type Coercion)이 수행되지 않는다. 엄격한 동등 비교 연산자(===)는 두 피연산자의 자료형과 값이 모두 일치할 때만 true를, 그렇지 않다면 false를 반환한다.

반면, 서로 다른 자료형을 가지는 두 피연산자를 느슨한 동등 비교 연산자(==)로 비교하면, JS 엔진은 양 측의 두 변수를 공통된 자료형으로 강제 형변환한다. 이후 엄격한 비교 연산자(===)를 수행하는 방식으로 ==는 동작한다.

느슨한 동등 비교 연산자(==) : 두 피연산자에 대해 암시적 형변환을 진행해 공통 자료형으로 바꾼 뒤, === 비교를 진행해 값을 반환

엄격한 동등 비교 연산자(===) : 두 피연산자의 자료형과 값이 모두 일치하는 경우만 true, 아니라면 false 반환

느슨한 동등 비교 연산자의 강제 형변환

느슨한 비교연산자로 서로 다른 자료형을 가지는 변수를 비교하는 경우 발생하는 암시적 형변환 규칙은 피연산자의 자료형에 따라 갈리며, 다른 우선순위 규칙에 비해 복잡한 편이다.

느슨한 비교 연산자(==)에 의한 암시적 형변환 : 피연산자의 자료형에 따라 형변환 수행
피연산자 중 String/Booelan 있는 경우 : String/Booelan -> Number 형변환
피연산자 중 Null/Undefined 있는 경우 : 양측이 모두 Null이나 Undefined인 경우에만 참
피연산자가 기본형와 객체(참조형)를 비교하는 경우 : 객체를 기본형으로 강제 형변환.

1 == 1            	// true
"1" == 1          	// true
1 == '1'          	// true
0 == false        	// true
0 == null         	// false
0 == undefined    	// false
null == undefined 	// true

위에 적어 둔 규칙 외에도 많은 사항이 있다. 예를 들어 두 피연산자 기본형과 객체(참조형)를 비교할 때 객체가 빈 배열이라면 숫자로 강제 변환한다든가, 피연산자 중 하나의 앞에 ! 연산자가 있는 경우 Boolean 형태로 강제 변환한다는 등의 내용이다. 이러한 내용을 모두 외울 필요는 당연히 없다!

개발자가 알지 못하게 암시적으로 형변환을 수행하는 느슨한 비교 연산자인 == 대신 엄격한 비교 연산자 ===을 사용하면 암시적 형변환 문제에서 벗어날 수 있기 때문이다. 만약 암시적 형변환에 대해 더 알고싶다면 JS 형변환 완벽정리를 참고하자.

== vs === 사례 비교

둘 다 기본형 데이터인 피연산자를 비교하는 경우, ==는 앞서 살펴본 규칙에 의거해 암시적 형변환을 수행한 후 비교를 진행한다. 반면, ===는 강제 형변환 없이 자료형과 값이 모두 일치할 경우에만 true를 반환한다.

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

' \t\r\n ' == 0     // true

단, 참조형 데이터는 객체(Array, Function, Map, ...)의 비교는 == 연산자와 === 연산자가 모두 동일하게 동작한다.

var a = {}
var b = {}

a == b // false
a === b // false

var c = [];
var d = [];

c == d // false
c === d // false

다만, 비교 대상인 피연산자가 문자열인 경우, JS에서는 String은 기본형이지만, 객체로도 변환이 가능하기 때문에 동등 비교가 색다른 방식으로 동작한다. 아래 예시를 참고하자.

var a = "string"
var b = new String("string")
a == b // true
a === b // false

엄격한 동등 비교 연산자(===) 사용의 장점

느슨한 동등 비교 연산자(==)와 엄격한 동등 비교 연산자(===)는 성능 측면에서 미미한 차이가 있긴 하나 유의미한 수준은 아니다. 따라서 비교시에는 엄격한 동등비교 연산자(===)를 사용하는 편이 좋다. 암시적 형변환을 일으키지 않기 때문에, 개발자가 의도한 방향에서 벗어나지 않기 때문이다.

Erica Gong