ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [ JavaScript ] 타입/클래스 비교 연산 Typeof/Instanceof
    백수의 개발/웹 2020. 3. 17. 21:30

    타입/클래스 비교 연산 Typeof/Instanceof

    Java와 같이 객체를 다루는 컴파일언어 조차도 타입 안정성에 있어서 완전히 자유롭지 않을 것이다.

    그러나 컴파일러 조차 없는 Javascript ES6에서 클래스가 도입되었고 타입에 관한 문제가 더 많이 생길 수 있을 것이다.

    이를 위해 TypeScript를 통해 조금은 더 타입 안정성을 가질 수 있더라도 여전히 이를 완전히 극복할 수는 없을 것이다.

     

    이를 위해 우리는 타입/클래스 비교 연산을 확실하게 알고, 적용할 수 있어야 할 것이다.

    오늘은 typeof와 instanceof를 통해 타입/클래스 비교를 어떻게 할 수 있을지 다루어 보겠다.

     

    Typeof

    typeof는 함수가 아닌 연산자이다. 즉, 괄호를 사용하지 않고 !value, ~value와 같이 사용할 수 있는 단항 연산자이다.

     var value = 5;
     console.log(typeof value); // 출력 : "number"

    위와 같이 typeof를 통해 변수의 타입을 문자열로 얻을 수 있다.

     

    typeof를 통해 알 수 있는 type들은 아래와 같다.

    • undefined
    • boolean
    • number
    • string
    • object
    • symbol
    • function

    typeof를 통해 위와 같은 결과를 문자열로 얻을 수 있기 때문에 아래와 같이 비교를 할 수 있다.

     var value = 5;
     if(typeof value === "number"){
     	...
     }

    다만, undefined는 별도의 타입이 있는 것을 확인할 수 있지만 null은 조금 다르다. null은 하나의 object로 인식하기 때문에 typeof를 통해 타입을 확인하면 object가 반환되는 것을 할 수 있다.

     

    즉, null은 아래와 같이 타입을 확인할 수 있다.

     var value = null;
     if(typeof value === "object"){
     	...
     }

    그러나 object로 분류가 되기 때문에 이는 내부 동작에 문제가 생길 수 있다. 따라서 이러한 문제에서 벗어나기 위해 아래와 같이 해줄 수 있을 것이다.

     var value = null;
     if(value !== null && typeof value === "object"){
     	...
     }

    쉽게 말해 단순히 object로 타입만 비교했을 경우 null로 인해 생길 수 있는 문제를 벗어날 수 있다는 것이다.

    Instanceof

    typeof를 통해서는 변수의 기본 타입만을 확인할 수 있다. 그러나 ES6에서 도입 된 클래스를 사용하게 된다면 typeof로 그 이상을 확인할 수 없다. 이를 해결하기 위해 우리는  instanceof를 사용할 수 있다.

     

    instanceof 또한 typeof처럼 함수가 아닌 연산자이다. 대신 a + b, a * b와 같은 다항연산자이다.

     

    아래 코드을 바탕으로 instanceof에 대해 알아보자.

    class A{ ... }
    class B{ ... }
    class C{ ... }
    
    var classA = new A();
    var classB = new B();
    var classC = new C();
    
    console.log(typeof classA); // 출력 : "object"
    console.log(typeof classB); // 출력 : "object"
    console.log(typeof classC); // 출력 : "object"
    
    console.log(classA instanceof A); // 출력 : true
    console.log(classA instanceof B); // 출력 : false
    console.log(classA instanceof C); // 출력 : false
    
    console.log(classB instanceof A); // 출력 : false
    console.log(classB instanceof B); // 출력 : true
    console.log(classB instanceof C); // 출력 : false
    
    console.log(classC instanceof A); // 출력 : false
    console.log(classC instanceof B); // 출력 : false
    console.log(classC instanceof C); // 출력 : true

     

    위에서 보는 것 처럼 클래스는 typeof를 통해서는 object로 나타나기 때문에 instanceof를 사용해서 클래스 비교를 할 수 있다는 것을 알 수 있다. 그러나 여기에도 하나 알아두어야 하는 것이 있다.

     

    아래 코드를 한번 보자.

    class A{ ... }
    class B{ ... }
    class C{ ... }
    
    var classA = new A();
    var classB = new B();
    var classC = new C();
    
    console.log(classA instanceof Object); // 출력 : true
    console.log(classB instanceof Object); // 출력 : true
    console.log(classC instanceof Object); // 출력 : true

    모든 클래스는 Object를 기본적으로 확장하기 때문에 Object 클래스에 대해서는 항상 true를 반환한다는 것이다.

    마무리

    특정 변수의 타입 비교는 typeof를 사용하고, 객체의 클래스 비교가 필요하다면 instanceof를 사용해야한다.

    이를 통해 타입에 대한 안정성과 클래스의 인자 혹은 메서드 호출에 대한 안정성을 보장할 수 있다.

    댓글

Designed by Tistory.