예시 코드를 보며 두 비교연산자의 작동방식의 차이점을 살펴봅시다.

// 숫자형과 문자형을 == 비교시에 문자형은 숫자형으로 강제 형변환이 발생한다.
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
피연산자 AUndefinedNullNumberStringBooleanObject
Undefinedtruetruefalsefalsefalsefalse
Nulltruetruefalsefalsefalsefalse
NumberfalsefalseA===BA===ToNumber(B)A===ToNumber(B)A==ToPrimitive(B)
StringfalsefalseToNumber(A)===BA===BToNumber(A)===ToNumber(B)A==ToPrimitive(B)
BooleanfalsefalseToNumber(A)===BToNumber(A)===ToNumber(B)A===BToNumber(A)==ToPrimitive(B)
ObjectfalsefalseToPrimitive(A)==BToPrimitive(A)==BToPrimitive(A)==ToNumber(B)A===B

출처https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness