자바스크립트 란 언어가 다른 프로그래밍 언어와 다른 이유는 여러가지가 있지만.

기존의 초급자들한테 가장 다가오는것중에 하나는 == 과 === 의 존재이다.

일반적으로 비교연산자 == 은 다른 프로그래밍 언어에서도 자주 쓰이는데. 자바스크립트는 유독 === 이 존재하며

JSHINT, JSLINT, ESLINT 등의 정적 검사도구에서 조차 === 을 권장하고 또는 == 을 안티패턴으로 정의하기도 한다.

== 과 === 의 차이는 그럼 무엇일까?

가장 쉬운 답변은 “===” 은 타입까지 검사한다 ( 스펙 문서에 보면 identically eqaulity 라고 되어있다. ) 라고 할수 있다. 그럼 == 의 로직은 어떻게 동작하는 것일까?

다시 말하면

5 == “5” 가 어떻게 true 가 되는지에 대한 정리를 하고자 한다.

우선  2 개의 값이 서로 다른 타입일 경우에는 타입을 강제로 변환하며,
같은 타입일 경우에는 데이터 타입을 변환 하지 않는다.

즉 숫자와 문자열을 비교할 경우에는 문자열이 숫자로 변환되고 비교 연산이 수행된다.

아래의 예제를 보면 그 사실을 확인 할 수있다.

"0x15" == 21 // true

16진수가 10진수로 변환되며 비교연산이 수행 되는것이다. 즉 문자열->Number()를 사용한것과 같이 수행 됨

Boolean 타입의 경우에는 먼저 숫자로 변환된다음 변환된다.

true 는 1 false 는 0 으로 변환된다.

false == "" //true

위의 예제를 보면 조금더 이해가 쉽다.

그다음  마지막으로 객체의 경우는 다음과 같은 연산을 수행한다.

1. 해당 객체에 valueOf 메소드가 있다면 valueOf() 호출 비교 연산 수행
   1. valueOf 는 특정 객체의 primitive Value를 리턴하는 함수
2. valueOf() 메소드가 없다면 toString()을 호출 한후 비교연산 수행

이 연산이 끝난다음  같다면 true로 리턴되는 것이다.

재밌는(?) 예제가 있는데 아래 코드를 보자

var a = {};
a.toString = function(){ 
    return "hello" 
};
var b = "hello";
 
a == b // true;

즉 toString() 메소드가 == 연산에서 호출 되는것을 확인할 수 있다.

이 연산은 + 로 두가지의 값이 더해질테도 이용되는데 + 연산일경우 한쪽이 string이면 다른 한쪽은 강제로 toString()연산후에 값이 만들어진다.

var c = "hello";
var d = {};
d.toString = function(){ 
    return "kazikai"; 
};
c + d // "hellokazikai";

위 코드를 보면 조금 더 이해가 쉽다.

즉 다시 정리하자면

== 는 모든 값을 Number 화 시킨다음 비교

다만  객체의 경우에는 valueOf 메소드를 호출해서 얻은 데이터로 비교 만약에 valueOf 가 없다면 toString()을 호출 하고 비교함