jQuery 입문 | 유틸리티 메소드 | 타입 검사 메소드 $.type() $.isArray() $.isNumeric()

Tags:

유틸리티 메소드

jQuery는 프로그래밍을 하는 데 도움이 되는 다수의 유틸리티 메소드를 제공한다.

타입 검사 메소드

jQuery는 인수로 전달받은 값의 타입을 손쉽게 확인해 주는 다음과 같은 메소드를 제공한다.

메소드 설명
$.type() 전달받은 값을 자바스크립트의 내부 클래스와 비교하여, 더욱 정확한 타입 검사를 제공함.
$.isArray() 전달받은 값이 배열인지 아닌지를 검사함.
$.isFunction() 전달받은 값이 자바스크립트 함수 객체인지 아닌지를 검사함.
$.isNumeric() 전달받은 값이 자바스크립트 Number 객체인지 아닌지를 검사함.
$.isEmptyObject() 전달받은 값이 비어있는 객체(열거할 수 있는 프로퍼티를 가지고 있지 않은 객체)인지 아닌지를 검사함.
$.isPlainObject() 전달받은 값이 기본 객체(plain object)인지 아닌지를 검사함.
$.isWindow() 전달받은 값이 자바스크립트 Window 객체인지 아닌지를 검사함.
$.isXMLDoc() 전달받은 DOM 노드가 XML 문서에 포함되어 있거나, XML 문서인지 아닌지를 검사함.

$.type() 메소드

자바스크립트의 typeof 연산자는 값에 따라 부정확하거나 모순된 타입 검사 결과를 반환한다.
하지만 jQuery는 전달받은 값을 자바스크립트의 내부 클래스와 비교하여, 더욱 정확한 타입 검사를 제공하는 $.type() 메소드를 제공한다.

예제

$("#text")
    .append($.type(undefined) +"<br>")          // undefined
    .append($.type() +"<br>")                   // undefined
    .append($.type(window.notDefined) +"<br>")  // undefined
    .append($.type(null) +"<br>")               // null       
    .append($.type(true) +"<br>")               // boolean
    .append($.type(new Boolean()) +"<br>")      // boolean
    .append($.type(3) +"<br>")                  // number
    .append($.type(new Number(3)) +"<br>")      // number
    .append($.type("test") +"<br>")             // string
    .append($.type(new String("test")) +"<br>") // string
    .append($.type(function(){}) +"<br>")       // function
    .append($.type([]) +"<br>")                 // array
    .append($.type(new Array()) +"<br>")        // array
    .append($.type(new Date()) +"<br>")         // date
    .append($.type(new Error()) +"<br>")        // error - as of jQuery 1.9
    .append($.type(Symbol()) +"<br>")           // symbol - as of jQuery 1.9
    .append($.type(Object(Symbol())) +"<br>")   // symbol - as of jQuery 1.12
    .append($.type(/test/) +"<br>");            // regexp

코드 실행

특정 타입 검사 메소드

jQuery는 $.type() 메소드뿐만 아니라 전달된 값이 특정 타입의 값인지 아닌지를 검사해 주는 다양한 메소드를 제공한다.

예제

$("#text")
    .append($.isArray([]) + "<br>")                      // true
    .append($.isArray(10) + "<br>")                      // false
    .append($.isFunction(new Function()) + "<br>")       // true
    .append($.isFunction("문자열") + "<br>")               // false
    .append($.isNumeric(10) + "<br>")                     // true
    .append($.isNumeric([10]) + "<br>")                   // false
    .append($.isEmptyObject({}) + "<br>")                 // true
    .append($.isEmptyObject({name: "text"}) + "<br>")     // false
    .append($.isPlainObject(new Object()) + "<br>")       // true
    .append($.isPlainObject(new Object("text")) + "<br>") // false
    .append($.isWindow(window) + "<br>")                  // true
    .append($.isXMLDoc(document) + "<br>");               // false

코드 실행

<!DOCTYPE html>
<html lang="ko">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    $("#text")
      .append($.isArray([]) + "<br>")                       // true
      .append($.isArray(10) + "<br>")                       // false
      .append($.isFunction(new Function()) + "<br>")        // true
      .append($.isFunction("문자열") + "<br>")                // false
      .append($.isNumeric(10) + "<br>")                     // true
      .append($.isNumeric([10]) + "<br>")                   // false
      .append($.isEmptyObject({}) + "<br>")                 // true
      .append($.isEmptyObject({name: "text"}) + "<br>")     // false
      .append($.isPlainObject(new Object()) + "<br>")       // true
      .append($.isPlainObject(new Object("text")) + "<br>") // false
      .append($.isWindow(window) + "<br>")                  // true
      .append($.isXMLDoc(document) + "<br>");               // false
  });
  </script>
</head>
<body>
  <h1>jQuery type check method</h1>
  <p id="text"></p>
</body>
</html>

참조




최종 수정 : 2021-08-27