자바스크립트 비교 연산자란?

비교 연산자란 자바 스크립트 내의 피연산자 두 개의 값을 비교를 해주는 것을 말합니다. 우리가 무언가를 비교하기 위해서 필요한 것을 생각해보면 일단 두 가지의 비교 대상과 비교 연산자가 필요합니다.

일반적인 상식으로 비교 연산자를 생각해볼땐 '>', '<', '<=', '>=' 이런식으로 크고, 작고, 크거나 같고, 작거나 같은 것들과 함께 그저 '='를 사용해서 같다는 식으로 표현합니다.

하지만 우리의 자바스크립트는 '=' 텍스트를 같다 라고 생각하지 않습니다. 예를들어 A = B 라고 작성한다면, B라는 피연산자를 A라는 피연산자에 데이터를 처리한다 즉, 할당한다는 의미에서 '='는 할당 연산자입니다. B라는 데이터를 A라는 상자에 담는 것과 같죠. 그렇다면 우리가 비교하고 싶은 두 가지 피연산자가 값이 같은지를 확인하고 싶다면 어떻게 해야할까요?

자바스크립트 내부에서 피연산자들의 값이 같은지를 비교해주는 연산자는 '==''!=','===''!=='가 있습니다. "!가 붙은 것은 같지 않다" 로 해석할 수 있고, ==나 ===는 "피 연산자들의 값이 같다" 로 해석할 수 있습니다.

• "아니 두 개의 쓰임이 같다면 하나만 사용하면 되는 것이 아니냐?" 라고 생각할 수 있습니다. 그 의문을 해소하기 위해서 지금부터 == 와 ===의 차이점을 예시를 들어 명확히 구분해보겠습니다.

'hello World!' === 'hello World!' 
// true 두 값의 Value와 Type이 같음.

10 === 10
// true 두 값의 Value와 Type이 같음.

'5' === '5'
// true  두 값의 Value와 Type이 같음.

77 === '77'
// false Type이 number와 string으로 다르다.

지금 위의 세 가지 예시는 value와 Type이 모두 같습니다. 그렇지만 마지막 예시는 같은 77이지만 타입이 달라서 완전히 다른 결과가 나왔습니다.

이제 두 개의 연산자의 차이점의 윤곽이 보이는 것 같습니다! 우리가 사용했던 ===는 피연산자의 Value와 Type이 정확히 모두 같아야 true를 리턴합니다. 만약 둘 중에 하나라도 같지 않다면 false를 리턴하겠죠! 그러면 다음 예시를 통해서 ==로는 어떤게 가능한 지 보겠습니다!

10 == '10'
// true

false == 0
// true 다른 타입 다른 값

false == ""
// true

0 == ""
// true

이처럼 "=="는 다른 타입에 다른 값을 적용해도 똑같이 같다고 판단합니다. "==="는 엄격하게 같은 타입에 같은 값을 넣어야 같다고 인식하는 반면 "=="는 느슨하게 두 개의 피연산자를 같다고 인식합니다.

이 점은 서진규(jakeseo)님의 개발 블로그에서 말씀해주신 강제 형변환(type coercion)이 발생한 것입니다.

강제 형변환(type coercion)은 두 개의 피연산자를 동등 비교를 하기위해서 공통된 타입으로 만들어 주는 것을 말합니다.

0과 ""이나 false가 어째서 같은 값을 가지는 것 일까요?
이러한 것들은 falsy값을 가지기 때문입니다.

자바스크립트에서 falsy값은 6가지가 있습니다.

• false
• 0
• ""
• undefined
• null
• NaN

앞서 다뤄봤던 false와 0 그리고 ""는 동등 연산자로 비교해봤을 때 서로 같다고 판단이 되었죠?

 false == 0
 // true
 
 0 == ""
 // true
 
 false == ""
 // true
 

 null == undefined
 // true
 
 null == null
 // true
 
 undefined == undefined
 // true

그리고 바로 다음에 나오는 undefined와 null은 서로를 비교하고 자기 자신끼리 비교할 때만 true값이 나옵니다. 앞의 false ,0 ,""와 null, undefined를 동등 연산자로 비교하면 false가 나옵니다.

여기서 undefined와 null이 앞의 false, 0, ""와 비교했을 때 같은 falsy지만 결과는 false가 나오는 이유는 undefined와 null은 value를 가지지 않기 때문이고, false, 0, ""는 value를 가지고 있기 때문입니다. 이에 관련한 내용이 있는 스택 오버 플로우 링크를 걸어두겠습니다!
링크텍스트

마지막으로 NaN은 앞서 말했던 다섯 가지 falsy와 다르게 그 어떤 것을 넣어도 false가 나옵니다. 심지어! 자기 자신과 비교해도 false값이 나옵니다.

 NaN == 0
 // false
 
 NaN == undefined
 // false
 
 NaN == null
 // false
 
 NaN == false
 // false
 
 NaN == NaN
 // false
 

정리.

이 처럼 우리는 비교 연산자에 대해서 공부를 해보았는데요! 그 중에서도 "==", "==="를 자세히 공부 해보았습니다. 그러면서 또한 falsy값에 대해서도 알아보았습니다.

그 중에서 중요한 것은 "=="는 비교적 느슨하게 피연산자들을 비교했었습니다.

이렇게 확실하지 않은 점은 예상하지 못한 곳에서 실수가 나올 수도 있는 것입니다. 우리는 코드를 작성할 때 최대한 버그가 일어나지 않게하고 정확하게 비교로 안전한 코드를 작성해야 하기 때문에 "==="를 사용하시는 것이 더 좋습니다.

"==="는 엄격하게 타입과 값을 구분하기 때문에 믿고 사용해도 좋은 친구입니다. 위에서 했던 쓰임이 같다면 하나만 사용하면 되지 않느냐?는 결국 엄격하게 비교할수 있는 "===" 이 친구만 사용하셔도 될 것 같다는 결론을 냈습니다.

오늘 글을 작성할 때 서진규(jakeseo)님의 개발 블로그에서 많은 도움을 받았습니다. 저처럼 공부하시는 분들은 한 번쯤 찾아가서 지식을 쌓아보는 것도 좋을 것 같습니다!

혹시라도 내용이 잘못 되었다면 꼭 댓글을 남겨주세요 수정하겠습니다! 그렇다면 오늘도 즐거운 코딩 공부 되세요!