Type Checking Utilities
In this page:
What is Type Checking?
jQuery provides small utility functions like $.isArray() and $.isFunction() to reliably check a value's underlying JavaScript type, working around some of the quirks of the built-in typeof operator. This matters because typeof reports object for both plain objects and arrays, which isn't precise enough when your code needs to treat them differently.
Example: What is Type Checking?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
console.log($.isArray([1, 2, 3]), $.isFunction(function(){}));
</script>
</body>
</html>Check Arrays
Arrays store multiple values in order, and you'll often receive data — from a form, an AJAX response, or user input — where you can't be sure in advance whether it's a single value or a list of them. Checking with $.isArray() before looping over a value avoids errors from calling array methods on something that isn't actually an array.
Example: Check Arrays
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const data = [1, 2, 3];
console.log($.isArray(data));
</script>
</body>
</html>Check Functions
Functions contain reusable code, and you'll sometimes receive a value as an argument that's supposed to be callable, like an optional callback parameter. Checking its type with $.isFunction() before calling it prevents a runtime error if the caller passed something else, like undefined or a string, by mistake.
Example: Check Functions
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
function maybeCallback() { console.log("called"); }
if ($.isFunction(maybeCallback)) {
maybeCallback();
}
</script>
</body>
</html>Check Objects
Objects store related properties together, such as a user's name and email in one value. Type checking helps you confirm you're working with a genuine object — rather than null, an array, or a primitive — before you try to read properties off it.
Example: Check Objects
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const value = {name: "Alice"};
console.log($.type(value) === "object");
</script>
</body>
</html>Practical Type Checking
Type checks become especially useful when the same variable could legitimately arrive in different shapes, such as an API that sometimes returns a single item and sometimes returns an array of items. Checking the type first lets your code branch and handle each shape correctly instead of assuming one form and breaking on the other.
Example: Practical Type Checking
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
function handle(data) {
if ($.isArray(data)) {
console.log("Got a list of", data.length);
} else {
console.log("Got a single item");
}
}
handle([1, 2, 3]);
</script>
</body>
</html>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: