자바스크립트 개발자가 알아야할 33가지 개념(#05. == vs === and Typeof)

 

자바스크립트는 눈으로 보기엔 비슷하지만 사실 매우 다른 동등 비교연산자 두개가 있다.

자바스크립트 사용자라면 누구나 == 과 ===을 이용하여 어떤 값이 동일한지 비교할 수 있다.

 

이제부터 차이점을 알아보자

 

=== 동등 연산자

자바스크립트에서 === 연산을 사용할 때, 엄격한 동등성을 비교한다.

엄격한 동등성의 의미는 타입과 값이 모두 같이야 한다는 뜻이다.

 

예제를 살펴보면,

1. 둘 다 숫자라는 타입이 같고 값도 같다.

2. 둘 다 문자열이라는 타입이 같고 값도 같다

3. 둘 다 문자열이라는 타입은 같지만 값은 다르다.

4. 둘 다 불리언(Boolean)이라는 타입이 같고 값도 같다.

 

==동등 연산자

자바스크립트에서 == 연산자를 쓰는 목적은 느슨한 동등 비교를 위함이다.

== 연산자도 강제 형변환(type coercion) 을 수행한다.

 

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

 

예제를 살펴보면,

1. ===은 타입과 값이 같아야하는데 숫자 타입과 문자열 타입은 같지 않다.

2. ==은 우리가 값을 동등한 타입으로 변환 후에 값을 비교한다.

3. 타입과 값이 같지 않다.

4. 타입과 값 둘 다 같지 않지만 false와 0 은 자바스크립트의 falsy한 값들이다.

5. 타입과 값 둘 다 같지 않지만 false와 "" 은 자바스크립트의 falsy한 값들이다.

 

Falsy 값

자바스크립트는 falsy한 값이 존재한다.

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

6가지를 제외한 다른 값들은 truthy가 된다.

 

Falsy 값의 비교

자바스크립트에서 falsy한 값들을 비교해보자.

 

1. false , 0 그리고 ""

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

 

2. null 그리고 undefined 

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

 

3. NaN

NaN은 어떠한 값과도 동일하지 않다는 것을 알아야 한다.

심지어 자기 자신과도 동일하지 않다.

 

 

---

자바스크립트에서 강제 형변환(type coercion)이 존재하기 때문에 ==연산자 보다는 ===연산자 사용이 좋은 선택일 것이다.

6가지 falsy값은 기억해두자.

 

 

Typeof 연산자

typeof 연산자는 자신의 뒤에 위차한 피연산자의 데이터 타입을 문자열로 반환한다. typeof 연산자가 반환하는 7개의 데이터 타입과 일치하지 않는다. typeof 연산자는 7가지 문자열 "string", "number", "boolean", "undefined", "symbol", "object", "function"중 하나를 반환한다. "null"을 반환하는 경우는 없으며 함수의 경우 "function"을 반환한다.

 

 

주의해야 할 것은 typeof 연산자로 null값을 연산해 보면 null이 아닌 "object"를 반환한다. 이것은 자바스크립트의 첫 번째 버전에서 이렇게 설계된 것을 현재의 버전에 반영하지 못하고 있기 때문이다.

 

따라서 null 타입을 확인할 때는 typeof 연산자를 사용하지 말고 === 연산자를 사용하도록 한다.

 

또한, 선언하지 않은 식별자를 typeof연산자로 연산해 보면 ReferenceError가 발생하지 않고 "undefined"를 반환한다.

 

 

 

---

참고 및 출처

• https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-5-vs-3%EB%B6%84%EB%A7%8C%EC%97%90-%EB%B0%B0%EC%9A%B0%EA%B8%B0-%EB%B2%88%EC%97%ADhttps://poiemaweb.com/js-operator
• https://poiemaweb.com/js-operator