기본 콘텐츠로 건너뛰기

[ Javascript ] == 와 === 차이점.

현재 backbone, requirejs 를 사용하여 프로젝트를 진행 중이다. 클라이언트 사이드의 MVC 구현이다 보니 거의 대부분의 코드가 javascript 다.

스크립트 코드를 작성하면서 이전부터 궁금했던 것들을 하나씩 정리해 보도록 한다.

우선 첫번째로 == (Equality) 와 === (Identity) 의 차이를 이해해 보도록 한다.

== 연산자는 left/right 가 다른 형식이면 형식을 강제로 변환하여 값이 같은지를 비교 한다. 그리고 값을 변환하여 비교하는 규칙은 복잡하고 외우기도 쉽지 않다. 반면에 === 연산자는 변환이 없이 있는 그대로를 비교하게 된다.

따라서 변환이라는 부하(?)를 주지 않기 위해서 단순한 비교라면 === 를 사용하는 것이 효과적이다. 다만 무분별하게 변수등을 선언해 놓고 비교한다면 오히려 헷갈릴수도 있으므로 조심해야 할 듯.

간략한 예제를 통해서 내용을 이해해 보도록 하자.

var i = 0;
console.log(i == '0');     >> true
console.log(i === '0')    >> false

위의 코드를 보면 서로 다른 결과를 보여준다. 왜 이런 결과가 나오는지를 이해하면 된다.
변수 i 를 선언하고 0 을 배정했기 때문에 형식은 number 가 된다. 그런데 비교는 '0' 인 string 과 하고 있다.
따라서 == 연산에서는 string을 number로 변환한 후에 비교를 하게 된다. 그러니 값은 서로 같으므로 true 가 된다. 그러나 ===  연산은 값 뿐만 아니라 형식도 모두 비교하는 것이 때문에 (변환 과정이 없다) 값을 비교하기 이전에 형식이 다르므로 false 가 된다.

'' == '0'
0 == ''
0 == '0'
false == 'false'
false == '0'
false == undefined
false == null
null == undefined
'\t\t\n' == 0

위의 예제를 돌려보면 결과를 확인하면 놀라울 것이다. 예상과는 전혀 다른 결과를 보여주는 것들이 존재하기 때문이다. (이 결과를 이해하기 위해서는 변환 과정과 규칙을 이해해야 한다) 물론 같은 예제를 === 로 처리하면 모두 false 가 나온다.

이와 관련된 것들은 아래의 글들에서 좀 더 구체적으로 이해하도록 한다.

댓글