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를 반환한다.