jQuery 타입 검사 및 유틸리티 메소드 정리
jQuery의 $.type(), $.isArray() 등 타입 검사 유틸리티 메소드를 활용하면 값의 정확한 타입을 확인하고 조건 분기를 더 안정적으로 처리할 수 있습니다.
1. 정확한 타입 확인: $.type()
자바스크립트의 typeof는 일부 타입에 대해 애매한 결과를 반환하지만, jQuery의 $.type()은 더 명확한 값을 제공합니다.
console.log($.type(true)); // "boolean"
console.log($.type([])); // "array"
console.log($.type(null)); // "null"
console.log($.type(/regex/)); // "regexp"
활용 상황
- 디버깅 시 콘솔에 타입 출력
- 조건 분기에서 정확한 비교 수행
- null, array, object 구분이 필요한 경우
2. 주요 타입 검사 유틸리티
2.1. $.isArray()
$.isArray([]); // true
$.isArray("string"); // false
배열인지 확인할 때 사용합니다.
2.2. $.isFunction()
$.isFunction(function() {}); // true
$.isFunction(123); // false
콜백 함수 유효성 검증 등에서 사용됩니다.
2.3. $.isNumeric()
$.isNumeric("123"); // true
$.isNumeric([7]); // false
문자열 숫자도 포함하여 숫자인지 확인합니다.
2.4. $.isEmptyObject()
$.isEmptyObject({}); // true
$.isEmptyObject({ a: 1 }); // false
프로퍼티가 없는 순수 객체 여부를 확인할 때 유용합니다.
2.5. $.isPlainObject()
$.isPlainObject({}); // true
$.isPlainObject(new Date()); // false
$.isPlainObject(new String("abc")); // false
단순 리터럴 객체만 참을 반환합니다.
2.6. $.isWindow()
$.isWindow(window); // true
$.isWindow({}); // false
현재 창 또는 iframe의 window 객체인지 검사합니다.
2.7. $.isXMLDoc()
$.isXMLDoc(document); // false
$.isXMLDoc(xmlDoc); // true (XMLDocument일 경우)
XML DOM 문서 여부 판단에 사용합니다.
3. 종합 예제
$("button").on("click", function () {
const results = `
Array: ${$.isArray([])}<br>
Function: ${$.isFunction(function () {})}<br>
Numeric (123): ${$.isNumeric(123)}<br>
Numeric ("123"): ${$.isNumeric("123")}<br>
Empty Object: ${$.isEmptyObject({})}<br>
Plain Object: ${$.isPlainObject({ a: 1 })}<br>
Window Object: ${$.isWindow(window)}<br>
Type of RegExp: ${$.type(/abc/)}<br>
`;
$("#text").html(results);
});
질문 정리
typeof와 $.type()은 어떻게 다른가요?
→ typeof null은 “object”를 반환하지만 $.type(null)은 “null”로 정확하게 판단합니다.
문자열 숫자는 $.isNumeric()에서 true가 나오나요?
→ 네, "123"처럼 숫자로 해석 가능한 문자열은 true로 반환됩니다.
빈 객체와 빈 배열은 구분할 수 있나요?
→ .isEmptyObject()는 {}만 true이며, 배열은 false입니다. 배열 길이는 arr.length === 0으로 따로 확인하세요.
폼 데이터 직렬화 후 객체 여부를 판단할 수 있나요?
→ serializeArray() 결과는 배열이므로 .isArray()로 판단 가능합니다.
마무리 요약
| 메소드 | 설명 |
|---|---|
$.type() |
값의 정확한 타입 문자열을 반환 |
$.isArray() |
배열인지 확인 |
$.isFunction() |
함수인지 확인 |
$.isNumeric() |
숫자 또는 숫자 문자열 여부 확인 |
$.isEmptyObject() |
빈 객체인지 확인 |
$.isPlainObject() |
순수 객체인지 확인 |
$.isWindow() |
window 객체인지 확인 |
$.isXMLDoc() |
XML 문서인지 확인 |
댓글남기기