[JavaScript] ==와 ===의 차이 | 느슨한 비교와 엄격한 비교

 

이중 등호는(==)는 두 대상을 비교할 때 유형 변환을 수행한 뒤 비교를 수행한다.

 

 

 == (느슨한 비교 / 동등 연산자)

console.log(0 == "0"); // true
console.log(5 == '5'); // true 

console.log(null == undefined); // true

 

==는 타입 변환을 자동으로 수행한다.

그래서 숫자 5와 문자 "5"를 자동으로 타입 변환하여 비교를 수행한다.

이 경우, 값이 같기 때문에 true를 반환한다.

 

null과 unddefined는 빈 값을 나타내므로 같다고 평가된다.

 

 

 

 

=== (엄격한 비교 / 일치 연산자)

console.log(0 == "0"); // false
console.log(5 == '5'); // false

console.log(null == undefined); // false

 

 

값뿐만 아니라 타입이 정확히 일치해야 true를 반환한다.

5와 "5"는 값은 같지만 타입이 다르므로 false를 반환한다.

그리고, null과 undefined는 타입이 다르므로 false를 반환한다.

 

 

null은 object 타입, undefined는 undefined 타입이다.

 

 

 

 

 

 

 

 

 ===를 사용하는 것이 더 안전하고 예측 가능한 코드를 작성하는 데 좋다! 

 

 

---

==(느슨한 비교)가 위험한 이유

==는 타입 변환(암묵적 형변환, Coercion) 을 하면서 비교하기 때문에, 예상치 못한 결과가 나올 수 있다.
즉, 개발자가 의도하지 않은 값이 true로 평가될 수도 있고, 버그로 이어질 가능성이 높다!

 

 

📌 몇 가지 위험한 사례

불리언 값 변환

console.log(false == 0); // true (false → 0 변환)
console.log("" == 0); // true ("" → 0 변환)

 

false와 빈 문자열 ""는 자동으로 0으로 변환되어 숫자 0가 비교되기 때문에 true가 반환된다. 

 

 

공백 문자와 숫자 비교

console.log(" \t\n" == 0); // true (공백 문자들도 0으로 변환됨)

 

공백 문자는 빈 문자열과 동일하게 취급되어 숫자 0으로 변환된다.

 

 

null과 undefined 비교

console.log(null == undefined); // true (둘 다 비어있다고 판단)

 

 

 

 

---

 ===(엄격한 비교)가 안전한 이유

console.log(false === 0); // false
console.log("" === 0); // false 
console.log(null === undefined); // false 
console.log(" \t\n" === 0); // false

 

===는 타입까지 검사하기 때문에, 예측 가능한 코드를 만들 수 있다.

형변환이 일어나지 않아서, 개발자가 의도한 대로 정확하게 비교할 수 있다.

 

---

 

 

 

물론, 빈 값을 구분하기 위해서 ==가 꼭 필요한 상황도 있지만(예: null == undefined 비교 시), 그게 아니라면 무조건 ===를 쓰는 게 더 안전하고 좋은 습관이다.

 

 

x	y	==	===	Object.is	SameValueZero
undefined	undefined	✅ true	✅ true	✅ true	✅ true
null	null	✅ true	✅ true	✅ true	✅ true
true	true	✅ true	✅ true	✅ true	✅ true
false	false	✅ true	✅ true	✅ true	✅ true
'foo'	'foo'	✅ true	✅ true	✅ true	✅ true
0	0	✅ true	✅ true	✅ true	✅ true
+0	-0	✅ true	✅ true	❌ false	✅ true
+0	0	✅ true	✅ true	✅ true	✅ true
-0	0	✅ true	✅ true	❌ false	✅ true
0n	-0n	✅ true	✅ true	✅ true	✅ true
0	false	✅ true	❌ false	❌ false	❌ false
""	false	✅ true	❌ false	❌ false	❌ false
""	0	✅ true	❌ false	❌ false	❌ false
'0'	0	✅ true	❌ false	❌ false	❌ false
'17'	17	✅ true	❌ false	❌ false	❌ false
[1, 2]	'1,2'	✅ true	❌ false	❌ false	❌ false
new String('foo')	'foo'	✅ true	❌ false	❌ false	❌ false
null	undefined	✅ true	❌ false	❌ false	❌ false
null	false	❌ false	❌ false	❌ false	❌ false
undefined	false	❌ false	❌ false	❌ false	❌ false
{ foo: 'bar' }	{ foo: 'bar' }	❌ false	❌ false	❌ false	❌ false
new String('foo')	new String('foo')	❌ false	❌ false	❌ false	❌ false
0	null	❌ false	❌ false	❌ false	❌ false
0	NaN	❌ false	❌ false	❌ false	❌ false
'foo'	NaN	❌ false	❌ false	❌ false	❌ false
NaN	NaN	❌ false	❌ false	✅ true	✅ true

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness

동등 비교 및 동일성 - JavaScript | MDN