[JS] == 와 === 의 차이점

Kim yeonhee·2025년 1월 1일
0

JavaScript

목록 보기
3/13

대부분의 언어들이 == 연산자를 사용하는 것과 달리
자바스크립트는 ==연산자와 === 연산자 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로써, 엄격하게 같음을 비교할 때 사용하는 연산자이다.
일반적으로는 ===를 사용하는 것을 권장한다.

===는 명확하고 예측 가능한 결과를 제공하고, 의도하지 않은 타입 변환으로 인한 버그를 방지할 수 있다.

0개의 댓글