대부분의 언어들이 ==
연산자를 사용하는 것과 달리
자바스크립트는 ==
연산자와 ===
연산자 2개가 존재한다.
JavsScript에서 ===
와 ==
는 비교 연산자로, 두 값이 같은지를 비교한다.
그러나 동작 방식에 중요한 차이가 있다.
첫번째 비교는 true
가 정수 타입의 1로 변환되어 비교 결과가 true
로 출력 했다.
두번째 비교에서는 타입변환이 이뤄지지 않아서 정수형과 논리형이 타입비교를 해 결과를 false
로 출력했다.
==
느슨한 동등비교(Loose Equality)
- 값만 비교하며, 필요하면 JavaScript가 타입변환을 수행한다.
- 타입이 다르면 내부적으로 값을 변환한 뒤 비교한다.
console.log(5 == '5'); // true (문자열 '5'가 숫자 5로 변환)
console.log(null == undefined); // true (특별 규칙으로 둘을 같다고 판단)
console.log(false == 0); // true (false가 0으로 변환)
console.log('' == false); // true (빈 문자열이 false로 변환)
==
연산자는 두 대상의 타입이 다를 경우 타입 변환 후 값의 비교를 수행한다.
광선맨이 뚱이한테 0 == []
를 들이밀었는데 뚱이는 true
를 반환한다.
이유는 ==
(느슨한 동등 비교)가 타입 변환을 수행했기 때문이다.
[].toString()
은 빈 문자열(""
)을 반환하고,
이 빈 문자열을 숫자로 변환하면 0
이 된다.
결과적으로 0 == 0
이 되므로 true
를 리턴했다.
그렇다면 광선맨은 0 == []
는 0 == "0"
이니 "0" == []
를 들이민다.
뚱이는 false
를 반환한다.
이는 왜 false
일까?
타입 변환을 수행할 때 두 값의 타입에 따라 다른 변환 과정을 거치기 때문이다.
1. 비교대상
"0"
은 문자열[]
는 객체2. 객체(
[]
)를 비교할 때의 규칙
==
에서 객체가 숫자나 문자열과 비교되면, 객체는 먼저 원시 값(primitive value)으로 변환된다.[].toString()
은 빈 문자열(""
)을 반환한다.3. 비교 결과
"0"
과[].toString()
은 →"0" == ""
으로 변환 된다.4. 문자열 비교
"0"
은 문자열"0"
,""
은 빈 문자열이므로 서로 다르기 때문에false
를 반환한다.
===
엄격한 동등비교(Strict Equality)엄격한 동등 비교는 타입을 변환하지 않는다.
- 타입과 값 모두 같아야
true
를 반환한다.- 타입변환(type coercion)을 하지 않는다.
console.log(5 === 5); // true (값과 타입이 같음)
console.log(5 === '5'); // false (값은 같지만, 타입이 다름)
console.log(null === null); // true (값과 타입이 같음)
console.log(null === undefined); // false(값의 타입이 다름)
console.log(Nan === Nan); // false (NaN은 자기 자신과 같지 않다는 특성이 있다.)
===
는 엄격한 Equal Operator로써, 엄격하게 같음을 비교할 때 사용하는 연산자이다.
일반적으로는 ===
를 사용하는 것을 권장한다.
===
는 명확하고 예측 가능한 결과를 제공하고, 의도하지 않은 타입 변환으로 인한 버그를 방지할 수 있다.