[JS] "==" 와 "===" 연산자의 차이점

프로그래밍을 하면서 값들의 같음을 비교하려면 == 연산자를 이용해서 같음을 비교할 수 있습니다. 대부분의 언어에서 사용하는 것이기도 하구요.

 

그런데 JS는 다른 프로그래밍 언어들과 다르게 "==" 도 있고 "==="도 있습니다. == 은 알겠는데 ===은 뭘까요? 

인터넷에 관련글을 찾아보면 글이 빼곡히 쌓여있는데 그만큼 JS를 접한 개발자들을 당황시킨 내용이라고 할 수 있습니다 당연히 저도 당황을 해서 글을 쓰는것이구요 -.-

 

저는 난잡한 특성이 많은 JS를 싫어하는 편인데 웹 개발을 하면 현재로썬 대체제가 없어서 어쩔 수 없이 사용을 하고 있습니다. 잡담은 여기까지 하고 == 와 ===에 대해 알아봅시다.

 

용어 정리

이미지 출처 http://suanlab.com/assets/lectures/cp/05.pdf

연산자, 피연산자라는 용어를 잘 모르실 수 있으므로 미리 설명하고 넘어갑니다.

3 + 4 라는 수식이 있으면 연산을 수행하는 "+" 가 연산자, 연산을 당하는 놈들인 3 , 4 는 연산을 당한다고 해서 피연산자라고 부릅니다.

 

==, === 연산자

일반적으로 프로그래밍을 좀 심도 있게 배운 분들이라면 문자 "10" 과 숫자 10은 엄연히 다르다는걸 알고 있으실 겁니다. JS 처럼 같은 스크립트 계열 언어이자 타입을 명시하지 않는 파이썬 조차도 "10" == 10 의 결과값을 출력해보면 false(거짓) 이 나옵니다.

 

그러나 JS에서는 동작이 조금 다릅니다.

 

==, === 모두 같은지 비교하는데 사용한다는 연산자인 점에선 동일한데 그 같음을 정의하는 기준이 조금 다릅니다.

 

console.log(10 == "10");

>>> true

== (Equal Operator, 동등 연산자) 의 경우 두 피연산자의 타입이 서로 다르면 비교를 위해서 강제로 타입을 같게 변환합니다. 예를 들어서 문자 "10" 과 숫자 10을 비교하게 되면 ("10" == 10) 타입이 달라도 서로 타입을 일치시켜서 비교하므로 true가 나옵니다. 

 

값 자체는 10으로써 동일하니 강제 형변환에 의해  "10" == 10 : true 라는 결과값을 얻게 되는 것이죠.

즉 == 은 어떻게 보면 값 자체만 동일하면 되는 연산자라고 보시면 되겠습니다.

 

일반적으로 JS가 아닌 다른 언어에서 "10" 과 10이 같은지 비교하려면 문자열 "10" 을 숫자 10으로 타입 변환해주는 과정이 필요한데 JS에서 == 은 유연하게 동작하여 미리 타입 변환까지 수행해서 결과를 처리해주는 것입니다.

 

console.log(10 === "10");

>>> false

=== (Strict Equal Operator, 일치 연산자) 의 경우엔 == 와는 다르게 타입의 변환 없이 타입과 값이 모두 같을 경우에만 true를 반환하게 됩니다. 일반적으로 저희가 프로그래밍 언어에서 사용하고 원하던 그 연산자가 바로 이것이죠.

"10" === 10 의 결과값은 false 입니다.

이름에서 보다 싶이 타입까지 엄격하게(strict) 체크하는 연산자입니다.

 

추가적으로 같음을 비교하는게 == , === 두개니 같지 않음을 비교하는 것도 당연히 두개가 있습니다.

!= 와 !== 가 있는데 아까 맥락과 비슷하게 != 은 == 의 같지 않음과 대응되고 !== 은 === 의 같지 않음과 대응되게 됩니다.

 

console.log(10 != "10");  //false
console.log(10 !== "10"); //true

쉽게 이야기 해서 != 은 == 처럼 타입 변환후 같지 않음을 비교하게 되어 1 != '1' : false를 얻게 됩니다. 1과 '1' 에서 값 자체는 같다고 보게 되는 것이죠.

 

!== 은 === 처럼 자료형도 같은지 봐서 1 != '1' 은 true가 나오게 됩니다. 1 과 '1' 은 자료형이 다르니 다르게 보는 겁니다.

!== 는 '엄격하게 같지 않다' 입니다.

 

무엇을 사용해야 하는가?

JS의 유연성은 작은 프로젝트에선 편리할 수 있지만 큰 프로젝트에선 독으로 작용합니다.

(특히 안정성을 얻자고 JS에 타입까지 지정하는 TS까지 나왔죠..)

정확한 비교를 위해선 == 가 아니라 항상 === 를 씁시다.

!= 대신에 !== 을 사용해야 하는것도 비슷한 맥락이겠죠?

 

추가로 선택이긴 하지만 이 타입비교에서 조금 더 편의와 안정성을 얻고 싶으면 TS(타입 스크립트) 를 배워보시는것도 추천드려요!

 

추가 지식

1. NaN (Not a Number) 은 자기 자신을 포함하여 어떠한 값과도 일치하지 않습니다.

만약 === 연산자에 NaN 값이 존재하는 경우 항상 false 가 나오게 됩니다.

 

2. 정확한 문자열 비교를 위해선 localeCompare() 함수를 이용하는게 좋습니다. 문자열은 눈으로 보았을때 같아도 인코딩 방식이 다를 수 있기 때문입니다.

 

 

정리

1. '==' 연산자는 비교하는 두 개의 값 (피연산자) 이 서로 같으면 참(true) 을 반환한다.

이때 두 피연산자의 타입이 서로 다를 경우 비교를 위해 강제로 같은 형으로 변환하고 비교를 수행한다.

 

2. '===' 연산자는 타입을 변환시키지 않고 두 개의 값 (피연산자) 이 같고 타입도 같아야만 true를 반환한다.

 

3. != 은 == 에서 같지 않은 맥락에 대응되고, !== 은 === 에서 같지 않은 맥락에 대응 된다.

 

 

참고

https://hianna.tistory.com/375

[Javascript] '==' 연산자와 '===' 연산자의 차이점

http://www.tcpschool.com/javascript/js_operator_comparison

코딩교육 티씨피스쿨

https://steemit.com/kr-dev/@cheonmr/js-operator

[JS Operator] ==와 ===의 차이점 — Steemit

https://miiingo.tistory.com/337

[Node.js] javascript: 비교 연산자 ==, ===, !=, !==의 차이점

https://velog.io/@filoscoder/-%EC%99%80-%EC%9D%98-%EC%B0%A8%EC%9D%B4-oak1091tes

자바스크립트: '==' 와 '===' 는 다르다!