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

<span style="font-family: inherit;">현재 backbone, requirejs 를 사용하여 프로젝트를 진행 중이다. 클라이언트 사이드의 MVC 구현이다 보니 거의 대부분의 코드가 javascript 다.</span><br /> <span style="font-family: inherit;"><br /></span> <span style="font-family: inherit;">스크립트 코드를 작성하면서 이전부터 궁금했던 것들을 하나씩 정리해 보도록 한다.</span><br /> <span style="font-family: inherit;"><br /></span> <span style="font-family: inherit;">우선 첫번째로 == (Equality) 와 === (Identity) 의 차이를 이해해 보도록 한다.</span><br /> <span style="font-family: inherit;"><br /></span> <span style="font-family: inherit;">== 연산자는 left/right 가 다른 형식이면 형식을 강제로 변환하여 값이 같은지를 비교 한다. 그리고 값을 변환하여 비교하는 규칙은 복잡하고 외우기도 쉽지 않다. 반면에 === 연산자는 변환이 없이 있는 그대로를 비교하게 된다.</span><br /> <span style="font-family: inherit;"><br /></span> <span style="font-family: inherit;">따라서 변환이라는 부하(?)를 주지 않기 위해서 단순한 비교라면 === 를 사용하는 것이 효과적이다. 다만 무분별하게 변수등을 선언해 놓고 비교한다면 오히려 헷갈릴수도 있으므로 조심해야 할 듯.</span><br /> <span style="font-family: inherit;"><br /></span> <span style="font-family: inherit;">간략한 예제를 통해서 내용을 이해해 보도록 하자.</span><br /> <br /> <pre style="background-color: #eeeeee; border: 1px solid rgb(153, 153, 153); font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 653px;"><div style="color: #666666; font-family: dotum; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important; white-space: normal;"> var i = 0;</div> <div style="color: #666666; font-family: dotum; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important; white-space: normal;"> console.log(i == '0');     >> true</div> <div style="color: #666666; font-family: dotum; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important; white-space: normal;"> console.log(i === '0')    >> false</div> </pre> <div style="background-color: white; color: #666666; font-family: dotum; font-size: 12px; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important;"> <span style="color: black; font-family: 나눔바른고딕; font-size: small; line-height: normal;"><br /></span></div> <div style="background-color: white; color: #666666; font-family: dotum; font-size: 12px; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important;"> <span style="color: black; font-family: 나눔바른고딕; font-size: small; line-height: normal;">위의 코드를 보면 서로 다른 결과를 보여준다. 왜 이런 결과가 나오는지를 이해하면 된다.</span></div> <div style="background-color: white; color: #666666; font-family: dotum; font-size: 12px; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important;"> <span style="color: black; font-family: 나눔바른고딕; font-size: small; line-height: normal;">변수 i 를 선언하고 0 을 배정했기 때문에 형식은 number 가 된다. </span><span style="color: black; font-family: 나눔바른고딕; font-size: small; line-height: normal;">그런데 비교는 '0' 인 string 과 하고 있다.</span></div> <div style="background-color: white; color: #666666; font-family: dotum; font-size: 12px; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important;"> <span style="color: black; font-family: 나눔바른고딕; font-size: small; line-height: normal;">따라서 == 연산에서는 string을 number로 변환한 후에 비교를 하게 된다. 그러니 값은 서로 같으므로 true 가 된다. 그러나 ===  연산은 값 뿐만 아니라 형식도 모두 비교하는 것이 때문에 (변환 과정이 없다) 값을 비교하기 이전에 형식이 다르므로 false 가 된다.</span></div> <div style="background-color: white; color: #666666; font-family: dotum; font-size: 12px; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important;"> <br /></div> <pre style="background-color: #eeeeee; border: 1px solid rgb(153, 153, 153); font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 653px;"><div style="color: #666666; font-family: dotum; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important; white-space: normal;"> '' == '0'</div> <div style="color: #666666; font-family: dotum; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important; white-space: normal;"> 0 == ''</div> <div style="color: #666666; font-family: dotum; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important; white-space: normal;"> 0 == '0'</div> <div style="color: #666666; font-family: dotum; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important; white-space: normal;"> false == 'false'</div> <div style="color: #666666; font-family: dotum; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important; white-space: normal;"> false == '0'</div> <div style="color: #666666; font-family: dotum; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important; white-space: normal;"> false == undefined</div> <div style="color: #666666; font-family: dotum; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important; white-space: normal;"> false == null</div> <div style="color: #666666; font-family: dotum; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important; white-space: normal;"> null == undefined</div> <div style="color: #666666; font-family: dotum; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important; white-space: normal;"> '\t\t\n' == 0</div> </pre> <div style="background-color: white; color: #666666; font-family: dotum; font-size: 12px; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important;"> <span style="color: black; font-family: 나눔바른고딕; font-size: small; line-height: normal;"><br /></span></div> <div style="background-color: white; color: #666666; font-family: dotum; font-size: 12px; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important;"> <span style="color: black; font-family: 나눔바른고딕; font-size: small; line-height: normal;">위의 예제를 돌려보면 결과를 확인하면 놀라울 것이다. 예상과는 전혀 다른 결과를 보여주는 것들이 존재하기 때문이다. (이 결과를 이해하기 위해서는 변환 과정과 규칙을 이해해야 한다) 물론 같은 예제를 === 로 처리하면 모두 false 가 나온다.</span></div> <div style="background-color: white; color: #666666; font-family: dotum; font-size: 12px; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important;"> <span style="color: black; font-family: 나눔바른고딕; font-size: small; line-height: normal;"><br /></span></div> <div style="background-color: white; color: #666666; font-family: dotum; font-size: 12px; line-height: 18px; padding-bottom: 0px !important; padding-top: 0px !important;"> <span style="color: black; font-family: 나눔바른고딕; font-size: small; line-height: normal;">이와 관련된 것들은 아래의 글들에서 좀 더 구체적으로 이해하도록 한다.</span></div> <div style="background-color: white; padding-bottom: 0px !important; padding-top: 0px !important;"> </div> <ul> <li><span style="color: #666666; font-family: dotum;"><span style="font-size: 12px; line-height: 18px;"><a href="http://www.w3schools.com/JS/js_comparisons.asp" target="_blank">javascript comparison and logical operations</a></span></span></li> <li><span style="color: #666666; font-family: dotum;"><span style="font-size: 12px; line-height: 18px;"><a href="http://stackoverflow.com/questions/359494/javascript-vs-does-it-matter-which-equal-operator-i-use" target="_blank">javascript === vs == : does it matter which 'equal' operator I use?</a></span></span></li> <li><span style="color: #666666; font-family: dotum;"><span style="font-size: 12px; line-height: 18px;"><a href="http://blog.agilejedi.com/2008/09/javascript-equality-versus-identity.html" target="_blank">javascript: equality versus identity</a></span></span></li> <li><span style="color: #666666; font-family: dotum;"><span style="font-size: 12px; line-height: 18px;"><a href="http://www.c-point.com/javascript_tutorial/jsgrpComparison.htm" target="_blank">javascript tutorial: comparison operators</a></span></span></li> </ul>