[JavaScript] == (느슨한 비교) 와 === (엄격한 비교)

JavaScript에서는 두 가지 비교 방식이 있다.

== 는 느슨한 비교 (loose equality)라고 불리며, === 는 엄격한 비교 (strict equality)라고 한다.

 

1. == 느슨한 비교

• 타입 변환을 수행한 후 값이 같은지 비교한다
• JavaScript는 == 를 사용할 때, 비교 대상의 타입이 다르면 암묵적 형 변환을 통해 타입을 맞추려고 시도한다.
• 예상치 못한 결과를 초래할 수 있으므로 주의가 필요하다
• 예시:

5 == "5" // true - "5"가 숫자 5로 변환되어 비교
false == 0 // true - false가 0으로 변환되어 비교
null == undefined // true - 둘 다 비어 있는 값으로 간주
[] == false // true - 빈 배열이 falsy로 평가

 

2. === 엄격한 비교

• 타입과 값이 모두 같아야 true 를 반환한다
• 암묵적 형 변환을 하지 않으며, 타입이 다르면 무조건 false 를 반환하므로 예측 가능한 결과를 제공한다.
• 예시:

5 === "5" // false
false === 0 // false
null === undefined // false
[] === false // false

 

3. == 와 === 비교의 주의사항

• 예측 가능성: == 는 타입 변환이 개입되어 종종 예상치 못한 결과를 초래할 수 있다. 때문에, 대부분의 경우 === 가 더 안전하고 권장된다.
• 특정 상황에서 == 사용 가능: null 과 undefined 를 느슨하게 비교할 때, 두 값이 모두 "존재하지 않음"을 나타내므로 null == undefined 를 허용하는 경우 유용할 수 있다.

const value = null
value == undefined // true
value === undefined // false

 

---

빈 배열이 == 비교에서 false로 평가되는 이유

== (느슨한 비교) 에서는 JavaScript가 서로 다른 타입의 값을 비교할 때 양쪽 값을 같은 타입으로 변환하려고 시도한다. 빈 배열과 false를 비교할 때, JavaScript는 아래와 같은 변환 규칙을 따른다

 

1. 배열과 불리언의 비교

• == 을 사용할 때, 한쪽 값이 불리언(true 또는 false)이고 다른 쪽이 객체(여기서는 배열)일 경우,
  JavaScript는 객체를 먼저 원시 값으로 변환한다.

2. 배열의 원시 값 변환

• 배열을 원시 값으로 변환할 때 JavaScript는 배열을 문자열로 변환한다. 빈 배열 [] 은 문자열로 변환되면 "" (빈 문자열)가 된다

[] == "" // true - 빈 배열이 빈 문자열로 변환된다

 

3. 빈 문자열과 false 의 비교

• 이제 남은 비교는 "" == false 이다
• false 는 숫자 0 으로 변환되고, "" 는 숫자 0 으로 변환된다.
• 0 == 0 이 되어 true 를 반환한다

"" == false // true - 빈 문자열과 false가 0으로 변환되어 같음
[] == false // true - 결국 [] == "" == 0 == false

 

이와 같은 변환 과정을 거치면서 빈 배열은 false 로 평가된다

[] === false // false - 타입이 다르므로 비교하지 않는다

 

결론적으로, 빈 배열 자체는 Truthy이지만, == 를 사용한 비교 과정에서 암묵적 변환이 일어나면서 false 와 같아지는 것이다.