해당 시리즈는 Leonardomso의 33 Concepts Every JavaScript Developer Should Know 를 보고 공부, 정리한 시리즈이며, 자세한 내용은 링크를 확인하길 바란다.
이번 장에서는 자바스크립트에서 유의해야 하는 동등/일치 비교 연산자와 typeof 연산자에 대해서만 얘기해보자.
동등/일치 비교 연산자
먼저, 동등/일치 비교 연산자인
==와===에 대해서 얘기를 해보자.
자바스크립트는 다른 언어들과 다르게 두 피연산자의 값이 같은지 비교하는 연산자가 == 하나만 있는 것이 아니라 2개가 존재한자. (파이썬과 C++ 을 첫 언어로 개발에 입문했던 나에게는 자바스크립트를 처음 배웠을 때, 매우 새로웠던 개념이었다.)
== 는 동등 비교 연산자라 하며, === 는 일치 비교 연산자라 한다.
영어로는 주로 loose 한 연산자와 strict 한 연산자로 많이 구분한다.
두 연산자의 가장 큰 차이는 암묵적 형변환을 허용 여부이다.
동등 비교 연산자는 암묵적 형변환을 허용하는 반면에 일치 비교 연산자는 암묵적 형변환을 허용하지 않는다.
하나씩 정리해보자.
== 동등 일치 비교 연산자
암묵적 형변환을 통해 피연산자들의 데이터 타입을 일치시켜 비교 연산을 한다.
동등 일치 비교 연산자는 피연산자들을 암묵적 형변환을 통해 데이터 타입을 일치시킨 후에 같은 값인지 비교한다.
아래 코드를 보자.
3 == 3 // true
3 == '3' // true3 과 '3' 은 각각 숫자와 문자열로 서로 다른 타입이지만, 비교 결과는 true 를 반환한다.
암묵적 형변환을 통해 두 피연산자들의 타입을 일치시킨 후 비교했기 때문이다.
이처럼 암묵적 형변환에 대해서 어느정도 예상 가능 범위에서는 편리하게 사용할 수 있다.
다른 경우를 좀 더 살펴보자.
0 == '' // true
'0' == '' // false
false == 'false' // false
false == '0' // true
false == null // false
false == undefined // false위의 코드들을 순차적으로 이해해보자.
-
0과''빈 문자열은 앞 장에서 암묵적 형변환을 다룰 때 배웠던 것처럼 Falsy 한 값(거짓으로 판단되는 값)이다.이에 두 피연산자가 모두 false 를 가리키며 결과적으로 true 를 반환한다.
-
'0'과''모두 문자열 타입이다. 하지만 좌항은0이라는 값이 있는 반면, 우항은 값이 없기에 서로 일치하지 않아 false 를 반환한다. -
좌항은 불린 타입인
false이고, 우항은 문자열 타입인'false'일 때, 좌항을 문자열 타입으로 바꿔서 처리하면 같은'false'이기에 true 를 반환할 것 같지만 실제로는 그렇게 작동하지 않는다.정확한 작동원리는 모르겠지만, 유추컨대 우항인
'false'를 불린 타입으로 암묵적 형변환하게 되면 true 이기에false == true가 완성되며 이 결과는 false 이기에 이를 반환한 것으로 예상된다. -
3번의 알쏭달쏭한 상황에서 4번을 보면 더 의아할 것이다.
3번에서 예상했던 작동원리라면, 우항에 있는
'0'은 빈 문자열이 아니기에 불린 타입으로 암묵적 형변환하게 되면 true 로 변환되어 false 의 결과를 얻을 것 같다.하지만, 4번의 결과는 true 를 반환한다.
이번에도 감히 예상을 해보자면 두 피연산자를 모두 숫자 타입으로 암묵적 형변환을 진행하면 같은
0이라는 값으로 변환되기에 true 를 반환한 것으로 예상된다.이처럼 동등 비교 연산자는 예측하기 어려운 결과를 만들어낸다.
-
null은 불리언 타입으로 암묵적 형변환하게 되면 false 이지만, 비교 연산 결과 false를 반환한다. -
undefined은 불리언 타입으로 암묵적 형변환하게 되면 false 이지만, 비교 연산 결과 false를 반환한다.
위 코드들을 본 것처럼 동등 비교 연산자는 예측하기 어려운 결과를 많이 도출한다.
이에 되도록이면 동등 비교 연산자의 사용을 지양하고 일치 비교 연산자를 사용하자.
=== 일치 비교 연산자
암묵적 형변환 없이 피연산자들의 타입과 값의 일치 여부를 비교한다.
일치 비교 연산자는 동등 비교 연산자와 다르게 암묵적 형변환을 허용하지 않고, 피연산자들의 현재 데이터 타입과 값이 정확히 일치하는지 비교하여 결과를 도출한다.
이에, 일치 비교 연산자를 통한 결과는 훨씬 예측하기 쉽다.
아래 코드를 살펴보자.
3 === 3 // true
3 === '3' // false앞서 동등 비교 연산자에서는 3 과 '3' 를 비교할 때 true 를 반환했지만, 일치 비교 연산자의 경우, 두 피연산자들의 데이터 타입이 다르기에 false 를 반환한다.
0 === '' // false
'0' === '' // false
false === 'false' // false
false === '0' // false
false === null // false
false === undefined // false당연하게도 앞서 살펴본 예시들은 일치 비교 연산자를 사용했을 때 모두 false 를 반환한다.
+ NaN
다만, NaN 은 일치 비교 연산자를 통해 자신이 일치하지 않는다.
일치 비교 연산자를 통해서 자신이 일치하지 않는 유일한 값으로, NaN 일치 비교 연산을 하고 있으면 Number.isNaN() 빌트인 함수를 사용하면 된다.
Number.isNaN(3) // false
Number.isNaN(NaN) // truetypeof 연산자
데이터 타입을 파악하기 위한 연산자
typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환해준다.
이 때, 반환되는 타입은 총 7 개이다.
- string
- number
- boolean
- undefined
- symbol
- object
- function
typeof ''; // string
typeof 1; // number
typeof NaN; // number
typeof true; // boolean
typeof Symbol(); // symbol
typeof []; // object
typeof {}; // object
typeof new Date(); // object
typeof function () {}; // function
typeof undefined; // undefined
typeof null; // object
typeof undeclared; // undefined유의사항
typeof 에서 유념해야 될 것은 3가지이다.
-
typeof null 은 object이다!
-
선언되지 않는(undeclared) 변수나 식별자는 undefined 를 반환한다.
-
ReferenceError(존재하지 않는 변수를 참조했을 때 발생하는 에러)가 아닌 undefined 를 반환한다!
console.log(typeof aaa) // undefined
-
-
Array 도 object 로 반환된다.
-
typeof []와typeof {}모두 object 를 반환한다. -
배열이 객체는 맞으나, 만약 객체가 아닌 Array 인지 여부를 판단하고 싶다면,
instanceof를 사용하자.[] instanceof Array // true [] instanceof Object // false -
위 코드처럼
instanceof를 사용하면 Array 여부를 확실하게 판단할 수 있다. -
단,
instanceof는 원시타입에 적용되지 않는다!! 원시 타입은typeof를 사용하자!
-
정리
==동등 비교 연산자
- 암묵적 형변환을 허용한다.
- 암묵적 형변환을 통해 양쪽 피연산자들을 같은 데이터 타입으로 맞춘 후 값이 일치하는지 비교한다.
===일치 비교 연산자
- 암묵적 형변환을 허용하지 않는다.
- 피연산자들을 형변환시키지 않고 지금 상태에서 타입과 값이 모두 일치하는지 비교한다.
되도록
===일치 비교 연산자를 사용하자!!
typeof연산자
- 피연산자의 데이터 타입을 문자열로 반환해준다.
- 몇 가지 예외 케이스(
typeof null,typeof undeclared,typeof [])에 대해서 조심하자.
참고 자료
모던 자바스크립트 Deep Dive
