자바스크립트의 동등 연산자

자바스크립트에서 === 연산자가 따로 문서로 있길래, 궁금해서 읽어봤습니다.

맨 아래에 이런 그림이 있었는데, 0 == [], 0 == "0"까지는 이해가 됐습니다.
근데 맨 아래는 이해가 안돼서 작성해봅니다...

"0" == []은 왜 안돼?

많은 블로그 글에서 '비교하는 두 대상의 타입이 다르다면, 형변환이 일어난다'라고 언급은 합니다.
근데 정확하게 어떤 식으로 되는지 설명하는 부분은 없더라구요.
그러다가 정답을 찾았습니다. 정답을 통해 테스트 해본 코드를 공유합니다.

핵심은 객체의 원시타입 변환

상세문서를 보시면, 객체의 원시타입 변환은 [@@toPrimitive]() 메서드, valueOf() 메서드, toString() 메서드의 순서로 차례대로 이뤄진다고 적혀있습니다.

[@@toPrimitive]() 메서드가 최우선으로 실행되지만, []는 저 메서드가 없으므로, valueOf()로 넘어갑니다.

var c = [];

if (typeof c.toString() === 'object') {
	console.log(1); 
}
if (typeof c.valueOf() === 'object') {
	console.log(2); // [].valueOf()가 객체라면 호출
}

--output--
2

하지만 valueOf()는 객체를 반환하므로, 원시타입을 반환하지 않습니다.
따라서 toString()을 최종적으로 호출해 변환합니다.

var c = [];

console.log(c.toString());

---output---

""이 나옵니다. 즉, "0" == []은 "0" == ""이 됩니다.
같은 타입이고, 값이 다르다면? false겠죠?

마치며

최근에 자바스크립트 공부를 계속 하고있는데, 볼 때 마다 새롭습니다...
===없던 옛날엔 이런거 가지고 어떻게 코드 작성했는지 신기합니다.
자바 배우다가 자바스크립트 배우니까 마냥 간단한게 좋은건 아니라고 느낍니다.

우리 모두 === 쓰도록 해요. 감사합니다