Mingyu Kim

Equality Comparisons

자바스크립트에서 두 값이 같은지 비교하는 방법은 세 가지가 있으며, 각각 타입 변환(Type Coercion) 처리 방식과 엣지 케이스 처리에서 차이를 보인다.

1. 느슨한 동등 비교 (==)

개념: 비교하려는 두 피연산자의 타입이 다를 경우 자바스크립트 엔진이 암시적으로 타입 변환(Type Coercion)을 시도하여 타입을 일치시킨 후 값을 비교한다.

특징	설명
타입 변환	O (암시적 변환 발생)
정확도	낮음 (예상치 못한 결과 발생 가능)
권장 여부	비권장 (혼란을 야기하므로 사용하지 않는 것이 좋음)

예시

코드	암시적 변환	결과
1 == "1"	"1" $\rightarrow$ 1	true
0 == false	false $\rightarrow$ 0	true
null == undefined	특수 규칙에 따라	true

2. 엄격한 동등 비교 (===)

개념: 비교하려는 두 피연산자의 타입과 값이 모두 일치하는지 확인합니다. 타입이 다르면 변환 없이 바로 false를 반환합니다.

특징	설명
타입 변환	X (변환 없이 비교)
정확도	높음 (가장 일반적으로 사용되는 비교 방식)
권장 여부	권장

예시

코드	결과 이유	결과
1 === "1"	타입(Number vs String) 불일치	false
0 === false	타입(Number vs Boolean) 불일치	false
null === undefined	타입 불일치	false

⚠️ ===의 엣지 케이스 (Object.is와 차이가 나는 부분)

===는 대부분 엄격하지만, 두 가지 케이스에서 일반적인 값 비교와 다르게 작동한다.

1. NaN 비교: NaN은 자기 자신과 같지 않다고 판단
   • NaN === NaN $\rightarrow$ false
2. 부호 있는 0 비교: +0과 0을 같은 값으로 간주
   • 0 === -0 $\rightarrow$ true

3. Same-value Equality (Object.is())

개념: ES6에서 도입되었으며, ===와 거의 동일하게 작동하지만, 위에서 언급한 두 가지 엣지 케이스를 수정하여 수학적 동등성을 더 정확하게 구현합니다.

특징	설명
타입 변환	X (변환 없이 비교)
정확도	가장 높음 (엣지 케이스를 정확하게 처리)
권장 여부	엣지 케이스 처리가 필요할 때 사용

🎯 Object.is()의 특별한 처리 (Object.is vs ===)

상황	=== 결과	Object.is() 결과	설명
NaN	false	true	Object.is()는 NaN이 자기 자신과 같다고 판단
+0 vs -0	true	false	Object.is()는 +0과 -0을 다른 값으로 구별
나머지 경우	X === Y	Object.is(X, Y)	두 연산자는 동일하게 작동

예시

코드	=== 결과	Object.is() 결과
NaN === NaN	false	Object.is(NaN, NaN) $\rightarrow$ true
-0 === 0	true	Object.is(-0, 0) $\rightarrow$ false
5 === "5"	false	Object.is(5, "5") $\rightarrow$ false

최종 요약 및 권장 사항

연산자	타입 일치 요구	NaN 처리	+0/-0 처리	사용 권장
==	X (변환)	false	true	비권장
===	O	false	true	일반적으로 권장
Object.is()	O	true	false	특수 엣지 케이스 처리 시

대부분의 경우 버그를 피하고 일관성을 유지하기 위해 ===를 사용할 것! Object.is()는 NaN을 정확하게 비교하거나 +0과 -0을 구별해야 하는 경우에만 사용하는 것이 좋다.