자바스크립트 개발자라면 알아야 할 33가지 개념 #5 == vs === 3분만에 배우기 (번역)

Jake Seo·2019년 4월 3일

33concepts-of-javascript

목록 보기

5/27

들어가기 전에

이 포스팅은 https://github.com/leonardomso/33-js-concepts 에 있는 포스팅들을 번역한 것입니다. 오역이나 의역이 있을 수 있습니다. 지적해주시면 확인 후 바로 정정하겠습니다.
original source of this posting is from https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a If the original author requests deletion, it will be deleted immediately.

Translated by Jake Seo (서진규)

	- https://velog.io/@jakeseo_me
	- https://github.com/n00nietzsche

문제

자바스크립트에는 눈으로 보기엔 비슷하지만 사실 매우 다른 동등 비교연산자 두개가 있습니다.
자바스크립트 사용자라면 누구나 ==과 ===을 이용하여 어떤 값이 동일한지 비교할 수 있습니다.
이제부터 차이점을 설명하겠습니다.

`===` = 표시 3개의 동등 비교연산자

자바스크립트에서 === 연산을 사용할 때, 우리는 엄격한 동등성을 비교합니다.
엄격한 동등성의 의미는 타입과 값이 둘 다 같아야 한다는 이야기입니다.

엄격한 동등성에 대한 몇가지 코드 예제를 봅시다.

이 첫번째 예제에서, 우리는 숫자 5 두개를 비교할 것입니다. 물론 예상한대로 true가 반환됩니다
둘 다 숫자(numbers) 타입이며 5라는 같은 값을 갖고 있습니다.

5 === 5
// true

앞에서 했던 이야기들을 잊어버리지 말고 다음 두 개의 예제를 더 봅시다. 둘 다 true를 반환하는 예제입니다.

'hello world' === 'hello world'
// true (둘 다 스트링이고 같은 값을 가짐)

true === true
// true (둘 다 불리언이고 같은 값을 가짐)

훌륭합니다. 그렇다면 이젠 false를 반환하는 몇가지 예제를 봅시다.

이번 예제에서, 우리는 숫자 77과 77이라는 값을 가진 문자열을 비교할 것입니다.
두 개의 피연산자는 같은 값을 가지지만 다른 타입을 갖고 있습니다.
이제 다음 예제는 false를 반환할 것입니다.

77 === '77'
// false (숫자 타입 vs 문자열 타입)

여기 두개의 추가 예제가 있습니다.

'cat' === 'dog'
// false (둘 다 문자열 타입 하지만 다른 값을 가짐)

false === 0
// false (다른 타입, 다른 값)

훌륭합니다! 요점은 ===은 타입과 값이 모두 같아야만 true를 반환한다는 것입니다.

`==` =표시 2개의 동등 비교연산자

우리가 자바스크립트에서 ==연산자를 쓰는 목적은 느슨한 동등 비교를 위함입니다.
==연산자도 강제 형변환(type coercion) 을 수행합니다.

강제 형변환(type coercion) 이란 동등 연산자로 비교하기 전에 피연산자들을 공통 타입(common type)으로 만드는 행위를 말합니다.

강제 형변환에 대해 자세히 알고 싶은 분은 번역 #4에 강제 형변환에 대한 내용이 있으니 참고하세요.

다음 예제가 이러한 현상을 설명할 것입니다. 우리가 위에서 엄격한 동등성을 비교했을 때를 다시 떠올리며 다음 코드를 봅시다.

77 === '77'
// false (Number vs String)

77 은 '77'과 엄격하게 보면 같지 않습니다. 왜냐하면 둘은 값은 같아도 다른 타입을 가졌기 때문이죠. 하지만, 우리가 느슨한 동등비교로 테스트하게 된다면 어떻게 될까요? 다음 예제를 봅시다.

77 == '77'
// true

우리가 true값을 얻은게 보일겁니다. 이러한 현상이 일어난 이유는 강제 형변환 때문입니다. 자바스크립트가 우리의 값을 동등한 타입으로 변환 후에 값을 비교하기 때문입니다. 이 경우에는, 성공했습니다. 문자열 값 77은 숫자 77로 아주 쉽게 변화될 수 있습니다. 왜냐하면 77과 77은 같기 때문이죠. 우리는 true라는 값을 얻게 됩니다.

예제를 하나 더 봅시다.

우리가 false와 0를 ===연산자로 비교했던 것을 다시 상기시켜볼까요?

false === 0
// false (다른 타입, 다른 값)

이건 누가 봐도 결과가 false일 것입니다. 하지만, 우리가 느슨한 동등연산자에서 다시 비교해본다면?

false == 0
// true

우리가 true를 얻었네요? 왜일까요? 이러한 현상은 자바스크립트의 falsy 값들과 관련이 있습니다.

Falsy 값과 True 값의 형변환 대한 간략한 설명은 번역 #4 Falsy와 Trusy 파트에 있습니다.

Falsy 값

그래서 왜 자바스크립트에서는 false == 0이 성립하는 걸까요? 그 이유는 자바스크립트에서 0이란 값이 falsy 값이기 때문입니다.

자바스크립트는 우리의 숫자 0를 강제로 false로 변환시켜버립니다. 그리고 false로 변환된 0는 결국 false와 같죠.

아래와 같은 6가지 값은 자바스크립트에서 falsy 값으로 통용됩니다.

false
0
""
null
undefined
NaN

Falsy 값의 비교

이제 뒤의 예제들을 통해 falsy 값의 간단한 규칙을 알아볼 수 있을 것입니다. 자바스크립트로 자주 작업을 한다면 다음과 같은 내용들은 항상 기억하고 계시는 것이 좋습니다.

false, 0 그리고 ""

아래의 3가지 falsy 값을 느슨한 동등 연산자로 비교할 때, falsy 값은 항상 동일하다는 결과를 나타냈습니다. 그게 가능했던 이유는 앞의 3가지 falsy 값은 false 형태로 강제 형변환이 됐기 때문이죠.

false == 0
// true

0 == ""
// true

"" == false
// true

null 그리고 undefined

null과 undefined를 비교할 때, 그들은 서로 같으며 자기 자신과도 같습니다.

null == null
// true

undefined == undefined
// true

null == undefined
// true

만일 null을 다른 값과 비교하고 싶다면, 아마 false가 나올 확률이 높습니다.

NaN

마지막으로, NaN은 어떠한 값과도 동일하지 않다는 것을 알아야 합니다.
심지어 자기 자신과도 동일하지 않습니다.

NaN == null
// false

NaN == undefined
// false

NaN == NaN
// false

우리가 알아야 할 것

우리가 본대로, 자바스크립트에서 강제 형변환(type coercion)은 어디로 튈지 모릅니다. 당신이 자바스크립트와 매우 친숙하지 않다면, 느슨한 동등 연산자(==)는 하나의 가치있는 선택이라기 보단 당신에게 엄청난 두통을 선사하는 녀석으로 변할 것입니다. 6가지 falsy 값을 암기해두세요 그리고 그들에 관련된 다양한 규칙들을 기억하세요. 암기한다면 느슨한 동등 연산자를 이해하는데 아주 큰 도움이 될 것입니다.
===연산자는 ==연산자보다 좋습니다. 동등함을 비교해야 할 때는 === 연산자를 쓰는 편이 훨씬 좋을 것입니다. 타입과 값을 비교함으로써 우리는 우리가 피연산자들이 진정으로 동등한지를 비교한다고 확신할 수 있습니다.