JavaScript 함수의 존재여부 확인, 자료형확인 typeof 연산자

JavaScript typeof 연산자에 대해 살펴보겠습니다.

기본적으로 typeof 연산자는 피연산자의 자료형을 문자열로 반환합니다.

console.log(typeof 'hello');
// "string"

console.log(typeof 110);
// "number"

console.log(typeof false);
// "boolean"

function func() {
    return 1;
}

console.log(typeof func);
// "function"

 

 

위 예시를 보시면 typeof연산자는 피연산자의 자료형을 출력하고 있는데

선언되지 않은 변수 또는 함수, 값이 할당되지 않은 변수를

피연산자로 할 경우 undefined가 출력됩니다.

console.log(typeof unDeclaredVariable);
// "undefined"

console.log(typeof unDeclaredFunction);
// "undefined"

var tempVar;

console.log(typeof tempVar);
// "undefined"

tempVar = 110;

console.log(typeof tempVar);
// "number"

 

우리는 이 특징을 이용해 선언되지 않은 함수나, 변수의 존재 여부를 확인할 수 있습니다.

function func() {
    return 1
}

if(typeof func === 'function') {
    func();
}

func라는 함수가 선언되어있다면 실행하는 코드입니다.

사실 우리가 만든 함수를 가지고 선언되어있다면 실행하라 이런 코드를 짜는 경우는 거의 없습니다.

 

기본 브라우저에서 제공하는 함수들이 있습니다.

그중에 History.pushState()로 예를 들겠습니다. 이 함수는 브라우저가 HTML5를 지원해야 쓸 수 있습니다.

즉 HTML5를 지원하지 않는 브라우저에서는 없는 함수입니다.

이런 함수를 쓸 때 우리는 사용자가 어떤 브라우저를 사용해 접속할지 까지는 알 수 없습니다.

그럴 때 함수가 선언되어있는지, 즉 지원하는지 확인 후 사용하고 없다면 예외처리를 해주도록 합니다.

if(typeof history.pushstate === 'function') {
   history.pushState(state, title, url);
} else {
    // 예외처리
}

위처럼 지원하지 않는 함수를 사용해야 할 경우 유용하게 사용할 수 있습니다.

기본기능인 자료형을 알고 싶을 때는 당연하겠죠??