예시 코드를 보며 두 비교연산자의 작동방식의 차이점을 살펴봅시다.
// 숫자형과 문자형을 == 비교시에 문자형은 숫자형으로 강제 형변환이 발생한다.
10 == '10'; // true
10 === '10'; // false
// 숫자와 boolean형을 ==, >, < 비교시에 boolean형은 숫자로 형변환이 일어난다. ( => Number(true) )
1 == true; // true
1 > false; // true
0 === false; // false
// 문자형과 boolean형을 = 비교시에 문자형과 boolean형 모두 숫자로 변환하여 비교한다.
// 'true' => Number('true') = NaN, true => Number(true) = 1 로 변환되어 비교된다.
'true' == true; // false
'true' === true; // false
두 비교 연산자의 차이점은 == 는 자료형 일치시켜 값을 비교하고 === 는 값과 자료형을 모두 비교한다이다.
이외에 자료형이 다른 피연산자(A==B)를 비교하는 경우 형변환이 일어나는 표를 참고하세요.
피연산자 B | |||||||
피연산자 A | Undefined | Null | Number | String | Boolean | Object | |
Undefined | true | true | false | false | false | false | |
Null | true | true | false | false | false | false | |
Number | false | false | A===B | A===ToNumber(B) | A===ToNumber(B) | A==ToPrimitive(B) | |
String | false | false | ToNumber(A)===B | A===B | ToNumber(A)===ToNumber(B) | A==ToPrimitive(B) | |
Boolean | false | false | ToNumber(A)===B | ToNumber(A)===ToNumber(B) | A===B | ToNumber(A)==ToPrimitive(B) | |
Object | false | false | ToPrimitive(A)==B | ToPrimitive(A)==B | ToPrimitive(A)==ToNumber(B) | A===B |
출처: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness