How to Use the typeof Operator in JavaScript: Full Guide
Master the JavaScript typeof operator to check data types at runtime. Learn its return values, quirks with null and arrays, and practical type-checking patterns for production code.
The typeof operator is JavaScript's built-in tool for checking the data type of any value at runtime. Whether you need to verify that a function argument is actually a string before processing it or confirm that a configuration value exists before using it, typeof is the operator you reach for.
Think of typeof like a label reader at a warehouse. Every box (value) that comes through has a type label on it, and typeof reads that label and tells you what category the box belongs to: "string", "number", "boolean", "object", and so on. The catch is that some labels are misleading (looking at you, typeof null), and knowing these quirks is essential for writing reliable type checks.
This guide covers every return value of typeof, its well-known quirks, and the practical patterns you should use for type checking in real JavaScript projects.
What Does typeof Return?
The typeof operator returns a string indicating the type of the operand. It works with two syntax forms:
javascript// As an operator (most common)
typeof 42 // "number"
typeof "hello" // "string"
// With parentheses (also valid, but parentheses group the operand, not call typeof)
typeof(42) // "number"
typeof("hello") // "string"typeof is an Operator, Not a Function
Despite the parenthesized syntax looking like a function call, typeof is a unary operator with precedence level 15. The parentheses in typeof(x) are grouping parentheses around the operand, not function-call parentheses. This distinction matters when combining typeof with other operators in the same expression. See the operator precedence guide for details.
All typeof Return Values
The typeof operator can return exactly eight different string values. Here is the complete list with examples:
| typeof Expression | Return Value | Description |
|---|---|---|
typeof undefined | "undefined" | The undefined primitive |
typeof true | "boolean" | Boolean values (true/false) |
typeof 42 | "number" | All numbers, including NaN and Infinity |
typeof 9007199254740991n | "bigint" | BigInt values |
typeof "hello" | "string" | String values |
typeof Symbol() | "symbol" | Symbol values |
typeof null | "object" | null (this is a known bug) |
typeof {} | "object" | Objects, arrays, null, Date, RegExp, etc. |
typeof function(){} | "function" | Functions and classes |
javascript// Primitives
console.log(typeof undefined); // "undefined"
console.log(typeof true); // "boolean"
console.log(typeof 42); // "number"
console.log(typeof 3.14); // "number"
console.log(typeof NaN); // "number" (yes, really)
console.log(typeof Infinity); // "number"
console.log(typeof 10n); // "bigint"
console.log(typeof "RuneHub"); // "string"
console.log(typeof Symbol("id")); // "symbol"
// Objects and functions
console.log(typeof null); // "object" (historical bug)
console.log(typeof {}); // "object"
console.log(typeof []); // "object" (arrays are objects)
console.log(typeof new Date()); // "object"
console.log(typeof /regex/); // "object"
console.log(typeof function(){}); // "function"
console.log(typeof class {}); // "function" (classes are syntactic sugar)The typeof null Bug
The most famous quirk of typeof is that typeof null returns "object" instead of "null". This is a bug from the first version of JavaScript in 1995 that was never fixed because changing it would break existing code across the web.
javascriptconst value = null;
console.log(typeof value); // "object"
// This means you CANNOT use typeof alone to check for null
if (typeof value === "object") {
// This runs for null, {}, [], new Date(), etc.
// Not useful for distinguishing between them
}How to Properly Check for null
Since typeof fails for null, use strict equality instead:
javascriptconst value = null;
// Direct null check (preferred)
if (value === null) {
console.log("Value is null");
}
// Check for object but exclude null
if (typeof value === "object" && value !== null) {
console.log("Value is a real object, not null");
}typeof with Numbers and NaN
The typeof operator returns "number" for all numeric values, including some surprising ones:
javascriptconsole.log(typeof 42); // "number"
console.log(typeof 3.14); // "number"
console.log(typeof -0); // "number"
console.log(typeof Infinity); // "number"
console.log(typeof -Infinity); // "number"
console.log(typeof NaN); // "number"NaN (Not a Number) returning "number" is one of the most confusing aspects of JavaScript for beginners. The name says "not a number," but typeof insists it is one. This happens because NaN is technically an IEEE 754 floating-point value that represents the result of an undefined mathematical operation.
javascript// NaN is typeof "number" but fails number checks
const result = parseInt("hello");
console.log(result); // NaN
console.log(typeof result); // "number"
console.log(result === NaN); // false (NaN !== NaN)
// Use Number.isNaN() for reliable NaN detection
console.log(Number.isNaN(result)); // truetypeof with Strings
String type checking is one of the most straightforward uses of typeof:
javascriptconsole.log(typeof "hello"); // "string"
console.log(typeof ''); // "string" (empty string)
console.log(typeof `template literal`); // "string"
console.log(typeof String(42)); // "string" (String() converts to string)
// But watch out for String objects (rare in modern code)
console.log(typeof new String("hello")); // "object" (not "string"!)Avoid new String()
Never use new String() to create strings. It creates a String wrapper object instead of a primitive string, which breaks typeof checks. Use string literals ("hello") or the String() function without new for type conversion.
typeof with Undefined and Undeclared Variables
One unique property of typeof is that it does not throw a ReferenceError when used on undeclared variables. This makes it safe for checking whether a variable exists:
javascript// This throws ReferenceError
// console.log(unknownVariable); // ReferenceError: unknownVariable is not defined
// But typeof is safe
console.log(typeof unknownVariable); // "undefined" (no error)// Practical use: checking for global features
if (typeof window !== "undefined") {
// Running in a browser environment
console.log("Browser detected");
}
if (typeof process !== "undefined") {
// Running in Node.js
console.log("Node.js detected");
}
// Checking if an optional library is loaded
if (typeof jQuery !== "undefined") {
// jQuery is available
jQuery(".selector").hide();
}typeof undefined vs. Undeclared
There is a subtle difference between a variable that is undefined and one that was never declared, but typeof returns the same result for both:
javascriptlet declaredButUndefined;
// neverDeclared is not declared anywhere
console.log(typeof declaredButUndefined); // "undefined"
console.log(typeof neverDeclared); // "undefined" (same result!)typeof with Functions
Functions are the only non-primitive type that gets their own typeof return value:
javascript// Regular function
function greet() { return "hello"; }
console.log(typeof greet); // "function"
// Arrow function
const add = (a, b) => a + b;
console.log(typeof add); // "function"
// Class (classes are functions under the hood)
class User {}
console.log(typeof User); // "function"
// Built-in functions
console.log(typeof console.log); // "function"
console.log(typeof Array.isArray); // "function"
console.log(typeof parseInt); // "function"typeof with Arrays
Arrays do not have their own typeof return value. Since arrays are objects in JavaScript, typeof returns "object" for any array:
javascriptconst fruits = ["apple", "banana", "cherry"];
console.log(typeof fruits); // "object"
const empty = [];
console.log(typeof empty); // "object"How to Check for Arrays
Use Array.isArray() instead of typeof for array detection:
javascriptconst fruits = ["apple", "banana", "cherry"];
const config = { theme: "dark" };
console.log(Array.isArray(fruits)); // true
console.log(Array.isArray(config)); // false
console.log(Array.isArray(null)); // false
console.log(Array.isArray("hello")); // falsePractical Type-Checking Patterns
Here are production-ready patterns for type checking that handle the quirks of typeof:
javascript// Comprehensive type checker for function arguments
function getType(value) {
if (value === null) return "null";
if (Array.isArray(value)) return "array";
return typeof value;
}
console.log(getType(42)); // "number"
console.log(getType("hello")); // "string"
console.log(getType(null)); // "null"
console.log(getType([1, 2, 3])); // "array"
console.log(getType({})); // "object"
console.log(getType(undefined)); // "undefined"// Safe property access with typeof guard
function processConfig(config) {
if (typeof config !== "object" || config === null) {
throw new TypeError("Config must be a non-null object");
}
const port = typeof config.port === "number" ? config.port : 3000;
const host = typeof config.host === "string" ? config.host : "localhost";
const debug = typeof config.debug === "boolean" ? config.debug : false;
return { port, host, debug };
}
console.log(processConfig({ port: 8080 }));
// { port: 8080, host: "localhost", debug: false }
console.log(processConfig({}));
// { port: 3000, host: "localhost", debug: false }// Environment detection utility
function detectEnvironment() {
if (typeof window !== "undefined" && typeof document !== "undefined") {
return "browser";
}
if (typeof process !== "undefined" && typeof process.versions?.node !== "undefined") {
return "node";
}
if (typeof self !== "undefined" && typeof importScripts === "function") {
return "web-worker";
}
return "unknown";
}typeof vs. Alternative Type-Checking Methods
| Method | Best For | Fails On | Example |
|---|---|---|---|
typeof x | Primitives, undefined checks | null, arrays, Date, RegExp | typeof 42 === "number" |
x === null | Null check | Nothing (reliable) | value === null |
Array.isArray(x) | Array check | Nothing (reliable) | Array.isArray([1,2]) |
x instanceof Class | Class instances | Cross-frame objects | date instanceof Date |
Object.prototype.toString.call(x) | Precise type of any value | Nothing (most reliable) | Object.prototype.toString.call([]) returns "[object Array]" |
javascript// Object.prototype.toString gives the most precise type
const toString = Object.prototype.toString;
console.log(toString.call(42)); // "[object Number]"
console.log(toString.call("hello")); // "[object String]"
console.log(toString.call(null)); // "[object Null]"
console.log(toString.call(undefined)); // "[object Undefined]"
console.log(toString.call([])); // "[object Array]"
console.log(toString.call({})); // "[object Object]"
console.log(toString.call(new Date())); // "[object Date]"
console.log(toString.call(/regex/)); // "[object RegExp]"Best Practices
Production Type-Checking Patterns
these practices will help you use typeof effectively while avoiding its well-known pitfalls.
Always use strict equality with typeof results. Write typeof x === "string" not typeof x == "string". While both work for typeof (which always returns a string), using strict equality consistently prevents other comparison bugs in your codebase.
Never rely on typeof alone for object type checking. Since typeof returns "object" for null, arrays, dates, regular expressions, and plain objects alike, always add a secondary check. Use Array.isArray() for arrays, === null for null, and instanceof for specific object types.
Prefer typeof for environment feature detection. Checking typeof window !== "undefined" is the safest way to detect browser vs. Node.js environments because typeof does not throw for undeclared variables. Do not use if (window) directly because it throws a ReferenceError in Node.js.
Use typeof for optional function parameters. When a function accepts optional arguments, typeof param === "undefined" is a clear way to check if the argument was provided. In modern code, default parameters (function(x = 10)) are usually the better approach.
Do not use typeof for boolean coercion checks. Checking typeof x === "boolean" only matches actual boolean values. If you want to check truthiness/falsiness, use the value directly in a condition or double-negate it (!!value).
Common Mistakes and How to Avoid Them
Watch Out for These Pitfalls
These typeof mistakes appear in production codebases far more often than you might expect, especially in input validation and API response handling.
Using typeof to check for null. This is the most common typeof mistake. Since typeof null === "object", any code that uses typeof value === "object" to detect objects will also match null. Always add an explicit value !== null check.
Forgetting that typeof NaN is "number". Developers often write typeof value === "number" to validate numeric input, not realizing that NaN passes this check. Add !Number.isNaN(value) or use Number.isFinite(value) for robust number validation:
javascriptfunction isValidNumber(value) {
return typeof value === "number" && Number.isFinite(value);
}
console.log(isValidNumber(42)); // true
console.log(isValidNumber(NaN)); // false
console.log(isValidNumber(Infinity)); // falseExpecting typeof to distinguish array from object. Both return "object". If your code branches on whether data is an array or a plain object, use Array.isArray():
javascriptfunction processData(data) {
if (Array.isArray(data)) {
return data.map(item => item.toUpperCase());
}
if (typeof data === "object" && data !== null) {
return Object.keys(data);
}
return String(data);
}Comparing typeof result to the wrong string. A common typo is writing typeof x === "String" (uppercase S) or typeof x === "Number". The typeof operator always returns lowercase strings. This mistake silently evaluates to false and can be very hard to spot.
Using typeof on new String() or new Number() wrapper objects. Wrapper objects created with new return "object" instead of their primitive type. Avoid wrapper objects entirely in modern JavaScript.
Next Steps
Practice typeof with every data type
Open your browser console and run typeof on every value type from the table above. Pay special attention to null, NaN, arrays, and class constructors.
Build a type validation utility
Create a utility function that returns precise types for all JavaScript values, handling null, arrays, dates, and regex correctly. This is a useful addition to any project's utility library.
Explore undefined and null differences
Understanding when JavaScript produces undefined vs. when to use null is directly related to how typeof interacts with these values in real applications.
Learn about JavaScript [data types](/tutorials/programming-languages/javascript/javascript-data-types-a-complete-beginner-guide) in depth
The typeof operator is just the entry point to JavaScript's type system. Study how primitives and reference types behave differently in memory, assignment, and comparison.
Rune AI
Key Insights
- Eight return values: typeof returns one of "undefined", "boolean", "number", "bigint", "string", "symbol", "object", or "function"
- null bug:
typeof nullreturns "object" due to a 1995 JavaScript bug that was never fixed - NaN quirk:
typeof NaNreturns "number" because NaN is an IEEE 754 floating-point value - Array detection: use
Array.isArray()instead of typeof, which returns "object" for all arrays - Safe for undeclared variables: typeof does not throw ReferenceError on undeclared variables, making it ideal for environment and feature detection
Frequently Asked Questions
What does typeof return for null in JavaScript?
How do I check if a variable is undefined using typeof?
Why does typeof NaN return "number"?
Can typeof check if a value is an array?
What is the difference between typeof and instanceof?
Conclusion
The typeof operator is an essential tool for runtime type checking in JavaScript, but its quirks with null, NaN, and arrays mean you should never use it as your only type-checking method. Combining typeof with Array.isArray(), strict null checks, and Number.isNaN() gives you a comprehensive toolkit for validating data types in any JavaScript application. Learn the eight possible return values, remember the three major gotchas (null returns "object", NaN returns "number", arrays return "object"), and you will write more defensive, reliable code.
Tags
More in this topic
OffscreenCanvas API in JS for UI Performance
Master the OffscreenCanvas API to offload rendering from the main thread. Covers worker-based 2D and WebGL rendering, animation loops inside workers, bitmap transfer, double buffering, chart rendering pipelines, image processing, and performance measurement strategies.
Advanced Web Workers for High Performance JS
Master Web Workers for truly parallel JavaScript execution. Covers dedicated and shared workers, structured cloning, transferable objects, SharedArrayBuffer with Atomics, worker pools, task scheduling, Comlink RPC patterns, module workers, and performance profiling strategies.
JavaScript Macros and Abstract Code Generation
Master JavaScript code generation techniques for compile-time and runtime metaprogramming. Covers AST manipulation, Babel plugin authorship, tagged template literals as macros, code generation pipelines, source-to-source transformation, compile-time evaluation, and safe eval alternatives.