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