[JavaScript] type,typeof

type *어떤 값을 다른 값과 분별할 수 있는, 고유한 내부 특성의 집합

 

우리가 보기에는 "1"과 1은 동일한 값으로 볼 수 있지만, ECMAScript에서의 해당 값들은 서로 타입이 다르다.(문자,숫자열)

해당 내용은 자바스크립트뿐 아닌 프로그래밍 언어를 접한 누구나 다 다르다고 알고 있지만, 오늘은 기본적인 타입에 대한 내용이 아닌 흔히 잘 사용하지 않는 부분에 대해 서술하고자 한다.

---

[내장 타입]

자바스크립트에는 아래와 같은 7가지의  내장 타입이 존재한다.

 

•                  null
•                  undefined
•                  boolean
•                  number
•                  string
•                  object
•                  symbol (ES6부터 추가)

 

이러한 내장 타입은 typeof 연산자를 통해 결과를 확인 할 수 있다.

typeof undefined === "undefined"; //true
typeof true === "boolean"; //true
typeof 11 === "number"; //true
typeof "11" === "string"; // true
typeof { sample : 11 } === "object"; //true
typeof null === "object"; //true

//ES6 이후
typeof Symbol() === "symbol"; //true

분명 자바스크립트 타입에는 null이 존재하지만 실제로 null을 typeof 연산자를 통하여 반환하면 null이 아닌 object가 반환된다. 

 

typeof연산자를 통해 null값을 체크하려면 강제 형변환을 이용하여 아래와 같이 선언되어야 한다.

typeof null //"object"
typeof !null //"boolean"

(!null && typeof null === "object"); //true

null의 타입은 object이지만, false의 성격을 띠고 있는 null을 !연산자를 통한 강제 형변환 시 boolean타입으로 변환된다.

 

function(함수)의 경우에는 typeof 호출 시 어떻게 나올까?

typeof function a(){} // "function"

앞서 얘기한 7가지의 타입이 아닌 function이라는 문자열이 나왔다. 완전 새로운 타입의 타입으로 이해할 수도 있겠으나, 사실 function은 object(객체)의 하위 타입이다. 즉 객체이다.

 

function은 객체이므로 아래와 같은 프로퍼티를 이용한 함수의 인자 개수도 구할 수 있다.

function a(b,c){
	/*...*/
}

a.length; //2 해당 function에서의 인자 개수

---

[undefined, undeclared]

 

undefined(값이 없는), undeclared(선언되지 않은)의 의미를 숙지 후 아래의 실행 결과를 보자.

var x;

typeof x; //"undefined"
//존재하지 않는 변수
typeof y; //"undefined"
y;        //"ReferenceError: y is not defined

변수는 선언되었으나 값이 존재하지 않는 x의 typeof 결과는 우리가 예상 하듯이 "undefined"이다.
하지만 선언되지 않은 변수y의 typeof 결과 또한 "undefined"로 나온다.

 

typeof는 선언되지 않은 변수인지, 변수에 값이 할당되지 않았는지 구분없이 결과는 모두 "undefined"이다.

 

선언되지 않은 변수의 결과를 "undeclared"라고 명명 했으면 헷갈릴 일도 없었겠지만, 아쉬운 부분이다.

typeof가 갖는 특이한 점은 또 있다. 변수y를 typeof 쓰지않고 호출 시 브라우저는 오류로 인식하지만,

typeof를 이용한 결과는 safety guard(안전가드)로 인해 오류로 처리되지 않고 "undefined"라는 결과를 호출하며,
오류없이 예외사항을 체크 할 수 있게 도와준다.

 

function setData(){
	var convertDt = (typeof castDate !== "undefined") ? 
    	castDate : 
        /*해당함수가 없으면 생성*/
        function(){
        	
        }
	var val = convertDt();
}

setData 함수는 castDate라는 함수가 존재하면 해당 함수를 사용, 없으면 해당 함수를 정의하는 예시 코드이다.

위와같이 typeof연산자를 이용하여 선언되지 않은 함수의 존재여부를 체크할 수 있다.