true == 'true'는 false인 이유가 뭘까요? 자바스크립트 동등 연산자(==)의 작동 방식을 제대로 알아봤습니다.

true == 'true'는 false입니다.

딱 직관적으로 생각했을 때는 좌변은 true니까 참이고, 우변은... 비어있지 않은 String이니까 참이...고... 그러면 true? 라는 생각이 들 수밖에 없습니다.

근데 이 기가막힌 JS는 저희가 행복해지는걸 두고보지 않죠.

대체 왜 이런걸까요??

MDN 문서를 살펴보자

MDN 문서

(한국어 문서는 최신 내용이 아님에 유의해주세요.)

==는 느슨한(Loose) 의미의 같음을 비교하는 연산자입니다. 자바스크립트 엔진은 == 연산자를 만나면 내부적으로 일종의 '형 변환' 과정을 거친 후 비교합니다.

자세히는 이 순서대로 동작합니다 (동등 연산자 연산이 완료될때까지 계속 반복됩니다.):

1. 양 변이 같은 타입이라면 ===(일치 연산자)처럼 동작합니다.
   • 객체라면 같은 객체여야만 true
   • String이라면 같은 순서대로 문자들이 놓여있을때만 true
   • Number라면 같은 값일때만 true, 둘 중 하나라도 NaN이라면 false
     • 참고로 +0과 -0은 같은 값으로 취급됩니다.
   • Boolean, BigInt이라면 같은 값일때만 true
   • Symbol이라면 같은 symbol을 reference하고 있을때만 true
2. 둘 중 하나가 null 혹은 undefined라면:
   • 나머지 하나도 null 혹은 undefined: true
   • 그 이외의 경우: false
3. 둘 중 하나가 객체이고, 다른 하나가 원시형이라면 toPrimitive(), valueOf(), toString() 등의 메서드들을 사용해 객체를 원시형 값으로 바꿉니다.
   • 객체를 원시형으로 바꾸는 과정은 조금 복잡할 수 있습니다. 자세한 과정은 여기를 참고해주세요!
4. 위 단계를 거쳤다면 이제 양 변이 모두 원시형 데이터인 상태일겁니다. 이 다음부터는 케바케로 동작합니다.
   • 양 변이 같은 타입이면 1번 방법을 따릅니다.
   • 둘 중 하나만 Symbol이라면 false
   • 둘 중 하나만 Boolean이라면 Boolean 데이터를 Number로 바꿉니다.
   • Number vs String 꼴이라면 String을 Number로 바꿉니다.
   • Number vs Bigint 꼴이라면 numberic 값을 비교합니다.
     • Number가 Infinity 혹은 NaN이라면 false
   • String vs BigInt 꼴이라면 BigInt() 생성자로 String을 BigInt로 바꿉니다.
     • 형변환에 실패한다면 false

예시에 적용해보자

true == "true"

1. 좌변이 Boolean이므로 Number로 바꿉니다.

   1 == "true"

   1 == "true"

2. Number vs String 꼴이므로 String을 Number로 바꿉니다.

   1 == NaN

   1 == NaN

3. 우변이 NaN이므로 false입니다.

2 == "2"

1. Number vs String 꼴이므로 String을 Number로 바꿉니다.

   2 == 2

   2 == 2

2. 양 변이 같은 타입이므로 값을 비교하면 true입니다.