[JavaScript]==, === 차이

JavaScript에서 값을 비교하기 위해 == 연산자와 === 연산자를 사용합니다.

 

두 연산자는 값이 일치하면 true를 반환하며, 값이 일치하지 않으면 false를 반환합니다.

 

이번 포스팅에서는 == 연산자와 === 연산자에 대해 정리합니다.

 

목차

1. == 연산자
2. === 연산자

---

== 연산자

JavaScript는 타입 변환에 대해 유연하게 동작합니다.

 

== 연산자는 두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환 후 값을 비교합니다.

 

타입을 비교하지 않으므로 === 연산자에 비해 느슨하다고 할 수 있습니다.

10 == 10    // true
10 == '10'  // true
true == 1   // true
true == '1' // true
true == 'true' // false

null == undefined // true

10 == '10'

두 피연산에서 하나가 숫자형이고 다른 하나가 문자열이면, 문자열을 숫자로 변환 후 값을 비교합니다.

 

true == 1

두 피연산자에서 불리언 값이 존재하면, 불리언 값을 1로 변환 후 값을 비교합니다.

 

true == '1'

불리언 값을 1로 변환하면, 1 == '1'이 되는데, 문자열 '1'을 숫자로 변환 후 값을 비교합니다.

즉, 1 == 1로 비교되며, true를 반환합니다.

 

ture == 'true'

불리언 값을 1로 변환하면, 1 == 'true'가 되는데, 문자열 'true'는 숫자로 변환 불가능합니다.

즉, 1 == 'true'로 비교되며, false를 반환합니다.

 

null == undefined

null과 undefined는 엄연히 다르지만, == 연산자는 true를 반환합니다.

---

=== 연산자

== 연산자는 값을 비교하기 전에 타입이 다를 경우 타입을 변환 후 값을 비교하였습니다.

 

하지만, === 연산자는 타입을 변환하지 않으므로 == 연산자에 비해 비교하는 방식이 엄격합니다.

 

즉, === 연산자는 타입이 다르면, false를 반환합니다.

10 === 10   // true

10 === '10' // false

true === 1  // false

true === 'true' // false

null === undefined // false

NaN === NaN // false

=== 연산자의 특징

• NaN 값은 자기 자신을 포함하여 어떠한 값과도 일치하지 않습니다. 즉, === 연산자에 NaN 값이 존재하는 경우 항상 false입니다.
• 정확한 문자열을 비교하기 위해서는 localeCompare 메서드를 사용하는 것이 좋습니다. 문자열은 눈으로 보았을 때, 동일하더라도 인코딩 방식이 다르게 되어있을 수 있기 때문입니다.