| sitelink1 | http://unikys.tistory.com/260 |
|---|---|
| sitelink2 | |
| sitelink3 | |
| sitelink4 | |
| extra_vars4 | |
| extra_vars5 | |
| extra_vars6 |
* typeof와 instanceof는 어떠한 변수가 문자열인지아닌지, 특정한 객체인지 아닌지 판단할때 사용하는 '연산자'들이다. 이들 둘이 어떻게 다른지 살펴보고 사용하면서 있을 수 있는 약점들도 같이 살펴보자.
* typeof
: typeof는 unary 오퍼레이터이다. unary 오퍼레이터로는 ! 라던가 - 등과 같이 인자를 하나만 받을 수 있는 연산자를 뜻한다. 즉, 함수가 아니고 연산자이기 때문에 괄호를 사용하면 안된다.
typeof yourVariable;
위와 같이 실행하고 나면 리턴 값으로는 해당하는 변수의 primitive 타입을 스트링으로 준다. 돌려주는 primitive 타입의 종류는 아래와 같다.
- 'undefined'
- 'boolean'
- 'number'
- 'string'
- 'object'
- 'function'
위의 기본 형식 중 하나를 스트링 형태로 리턴하기 때문에 어떠한 형인지 스트링으로 구분을 하면 된다. 즉, typeof를 사용해서 object인지 아닌지를 판별하는 경우 아래와 같이 하면 된다.
if(typeof yourVariable === 'object') { /* 오브젝트 처리 */}
하지만 위와 같이 하게 되면 만약 yourVariable이 null이라면 결과가 true로 나타난다. 따라서 null인 경우 false의 결과를 나타내고 싶다면,
if(yourVariable != null && typeof yourVariable === 'object') {/*오브젝트 처리*/}if(!!yourVariable && typeof yourVariable === 'object') {/*오브젝트 처리*/}
위의 방법둘 중 하나를 하면 된다. 변수가 string인 경우를 판별하고 싶다면 위의 'object'를 'string'으로 바꿔주면 된다. 간단한 예들을 들어보면,
typeof 3; // === 'number'typeof 'str'; // === 'string'typeof {}; // === 'object'typeof []; // === 'object'typeof function () {}; // === 'function'typeof null; // === 'object'
위의 테스트를 구글 크롬에서 개발자 도구의 콘솔을 열어서 실행해보면 쉽게 직접 결과를 확인할 수 있을 것이다.
: 그럼 instanceof는 어떻게 다른지 살펴보자.
* instanceof
: instanceof 는 비교 연산자로 >,<,== 와 같이 두개의 인자를 받는 연산자로 앞의 비교 연산자들을 이용하는 기분으로 사용하면 된다. 하지만 결과로 리턴하는 것은 typeof와는 성질이 조금 다르다. instanceof는 해당하는 변수가 사용하고 있는 prototype의 chain을 2번째 인자와 쭉 비교해서 true/false 값을 리턴한다.
쉬운말로 하자면, 해당하는 변수의 클래스와 비교해서 리턴해주는, java에서 많이 쓰던것과 비슷하다고 볼 수 있다.
var Person = function(){this.name = "unikys";};var inst = new Person();inst instanceof Person; // === trueinst instanceof Object; // === truetypeof inst; // === 'object'
instanceof는 클래스의 타입을 감지하는 역할을 하고, 위의 예를 통해 모든 클래스는 기본 클래스인 Object를 확장한다는 것을 알 수 있다.
: 하지만 자바스크립트라는 언어의 특징 때문에 그 동작하는 것은 부분부분 매우 다르기도 하다. instanceof가 동작을 다르게 한다기 보다는 자바스크립트라는 언어 자체가 다르게 동작을 하는 것으로 보면 된다. 가장 대표적인 예로 {}는 new Object()와 같은 의미를 하며, []는 new Array()와 같은 의미를 가지므로 위에 대해서 instanceof를 사용해보면 true가 나올 것이다. 하지만 다른 primitive type들에 대해서는 클래스로 instanceof를 할 수가 없다.
"foo" instanceof String; // === false"foo" instanceof Object; // === falsetrue instanceof Boolean; // === falsetrue instanceof Object; // === false[0,1] instanceof Array; // === true{0:1} instanceof Object; // === truevar color1 = new String("red");var color2 = "red";color1 == color2; // === truecolor1 instanceof String; // === truecolor2 instanceof String; // === 무엇일까요?
위의 맨 아래 구분은 true/false 무엇일까? 왜 물어보는지 예상하셨다면 답은 false다. 다음과 같은 경우 자바스크립트를 처음 접해봤다면 이해를 할 수 없을 것이다. color1의 경우는 String이 맞지만 color2는 primitive type string으로 다르다. 하지만 비교 연산자 ==는 true가 나온다. 어떻게 보면 편하면서도 잘못사용하면 원인도 모르고 삽질을 할지도 모른다. 위에서 object literal인 []와 {}에 대해서 typeof는 둘다 object를 리턴했지만, instanceof는 각각 Array와 Object를 리턴한 것도 관심을 가져야할 결과이다. 아래는 그래서 조금 다른 예이다.
"foo".constructor instanceof String; // === false"foo".constructor === String; // === true?!
이건 또 어떻게 된 영문인가? "foo".constructor는 String하고 같지만 String의 instance는 아니다?! 여기서 크롬의 개발자 콘솔에 String을 쳐보면 왜 그런지 알 수 있을 것이다.
Stringfunction String() { [native code] }
크롬에서 String을 실행하면 위와같이 나온다. "foo".constructor 는 Function의 instance인 것이다. instance의 개념에 대해서 다시한번 돌이켜보면 어쩌면 당연한 결과이기도 하다. 즉, String 자체는 Function의 instance인 것이다.
* 이렇게 살펴보면 결국 두가지의 연산자는 각각 다른 용도로 활용하면 될 것이다. primitive type을 구분할 때에는 typeof를 사용하고 클래스의 타입을 구분할 때에는 instanceof를 사용하면 된다.
끝.
