[Javascript] 헷갈리는 === 과 ==
Javascript 에는 '일치 연산자' 인 === 과 '동등 연산자' 인 == 이 존재한다.
JAVA나 C 언어에는 존재하지 않는 === 가 왜 존재할까?
그 이유는 Javascript 에서는 변수를 선언할 때, 변수의 Type을 명시적으로 선언해주지 않고, 입력되는 값에 의해 Type이 주어지기 때문에 난감한 상황...? 을 발생할 수 있기 때문이다.
Javascript Type 이란?
<script>
var numType = 10;
var strType = 'String';
var booleanType = true;
var objType = null;
var undefinedType;
console.log(typeof numType, typeof strType, typeof booleanType, typeof objType, typeof undefinedType);
</script>
위 코드를 보자.
위와 같이 'typeof 변수' 를 하게 되면 해당 변수의 type이 무엇인지 알 수 있다.
결과는 아래와 같다.
Javascript는 int, String, boolean 등과 같이 직접 Type을 선언해주지 않지만, 변수에 입력되는 값에 따라 Type이 결정된다.
다음 코드를 보도록 하자.
<script>
function printStr(num){
if(num == 3.141592) {
console.log(num.toFixed(2));
}
}
var tempStr = '3.141592';
printStr(tempStr);
</script>
printStr 함수는 매개변수로 Number 타입을 받고, 만약에 3.141592일 경우 3.14로 바꿔주는 함수라고 하자. 그러나 printStr을 호출하면서 개발자의 실수로 String 값을 보냈다고 했을 때 어떤 상황이 발생할 수 있을까.
위 코드대로 실행하면 결국 에러가 난다. Javascript에서의 String Type 에는 toFixed() 메서드가 존재하지 않기 때문이다.
위와 같이 Type이 다를 경우 제공하는 메서드도 다르고, 그 결과 에러를 만들어 낼 수 있다.
=== 와 == 사용
위에서 '3.141592' == 3.141592 는 true를 반환하였다.
그 이유는 == 는 비교하는 두 값이 Type이 다를 경우 다른 한쪽 Type에 맞춰준 후 값을 비교한다. 그렇기 때문에 true를 반환하게 되어 에러가 발생한것이다.
그러나 === 를 사용하게 되면, Type을 비교하고 그 후 값을 비교했을 때 모두 같을 경우에만 true를 반환하므로, 좀 더 엄격하게 두 값을 비교할 수 있다.
Javascript Type 에 대한 === 와 == 비교
아래 코드를 보고 Javascript의 Type의 종류가 어떤것이 있는지 다시 한번 생각해보고 일치 연산자와 동등 연산자의 차이를 확실하게 구분하도록 하자.
<script>
var numType = 10;
var strType1 = '10';
var booleanType = true;
var strType2 = 'true';
var objType = null;
var undefinedType;
console.log('numType == strType1 : ' + (numType == strType1));
console.log('numType === strType1 : ' + (numType === strType1));
console.log('booleanType == strType2 : ' + (booleanType == strType2));
console.log('booleanType === strType2 : ' + (booleanType === strType2));
console.log('objType == null : ' + (objType == null));
console.log('objType === null : ' + (objType === null));
console.log('undefinedType == null : ' + (undefinedType == null));
console.log('undefinedType === null : ' + (undefinedType === null));
</script>
정답을 보도록 하자.
예상한 결과와 맞는가?
아마 true == 'true' 에 대한 결과도 틀리고, undefinedType === null 도 틀렸을 것이라 생각한다.
이에 대해 설명을 하자면 Javascript 엔진은 true == 'true' 에 대한 비교를 할 때, 숫자로 바꿔서 비교한다고 한다. true 는 1로 바뀌게 되고, 'true' 는 문자열이기 때문에 NaN 로 바뀌게 된다. 그렇기 때문에 false가 반환된다.
그에 반해 if('true') 는 true가 반환된다는 점 기억하자.
또한 undefinedType === null 다른 이유는 Javascript는 null 과 undefined가 존재하는데,
null은 값은 null이며, Type은 Object이다.
그러나 undefined의 경우 값은 null이며, Type은 undefined 이다.
그렇기 때문에 undefinedType === null 은 서로 Type이 달라 false를 반환한다.
'Javascript' 카테고리의 다른 글
[Javascript] call 과 apply를 이용한 바인딩 (0) | 2019.07.12 |
---|---|
[Javascript] || 와 && 를 이용한 라인 줄이기 (0) | 2019.07.09 |
Javascript에서의 this part 2 (0) | 2019.07.01 |
Javascript에서의 this (0) | 2019.04.20 |
Javascript arguments 객체란? (0) | 2019.04.20 |