Data Types Summary — typeof and a Quick-Reference Table

JavaScript values span strings, numbers, booleans, arrays, objects, null, undefined, Map, and Set. In real work, you check whether a value that arrived from a form or a server is the type you expected before you process it.

This article sorts all of that out from a single angle — type — summarizing what typeof returns and the correct way to check each type.

Types Split into 7 Primitives and Object

Knowing a value's type decides what you can do with it. A string gives you length and slice; a number lets you calculate; an array gives you push.

Get the type wrong while processing a value that arrived, on the other hand, and undefined or NaN can slip through all the way to the end without you noticing.

JavaScript's values split into primitives (7 kinds: number, string, boolean, null, undefined, symbol, and bigint — values that are neither objects nor arrays) and Object (a value that holds properties; arrays, Map, and Set all fall under this too).

This course has covered the first 5 primitives and Object.

Of the remaining 2, symbol (a value for creating a unique key that never duplicates) is used when you need a special kind of key, and bigint (a value dedicated to handling extremely large integers) is used for integers too large for Number to represent accurately. Neither comes up within this course's scope, so knowing just the name and where it fits is enough.

The operator that checks type is typeof. Write it before a value, and it returns the type's name as a string.

What it returns is fixed to 8 kinds: "string" "number" "boolean" "undefined" "symbol" "bigint" "object" "function". "function" only comes back when you pass a function — functions are covered in the next category.

console.log(typeof "ORD-6033");             // string
console.log(typeof 9800);                   // number
console.log(typeof true);                   // boolean
console.log(typeof undefined);              // undefined

console.log(typeof { orderId: "ORD-6033" });  // object
console.log(typeof [1, 2]);                   // object

// null is a primitive too, but typeof returns object
console.log(typeof null);                   // object

Run typeof on 4 values of mixed types, and check what string comes back. values is already declared.

① Display the type of each of the 4 values, 1 line at a time.

② Join the 4 types with ", " and display them on 1 line.

③ Remove duplicates from the types listed in ②, and display how many distinct types remain.

(If it runs correctly, an explanation will appear.)

The 3 Things typeof Returns object For — null, Arrays, and Objects

Whether a value that arrived from a server is a "shipping-address object," a "not-yet-selected null," or an "array of products" changes what you do with it next. But typeof returns the same "object" for all 3, so it can't be used for this check directly.

typeof null returning "object" has been JavaScript's behavior since its earliest days. It's a known specification error, but fixing it would break existing code, so it's stayed as-is.

Check for null directly with value === null.

Check for an array with Array.isArray(value). It returns true only when you pass it an array, so it distinguishes arrays from objects and null.

Rule out those 2 first, and whatever "object" remains is "an object that's neither an array nor null."

const shipping = null;
const cart = ["Mouse"];
const order = { orderId: "ORD-6033" };

// typeof returns the same result for all 3
console.log(typeof shipping);      // object
console.log(typeof cart);          // object

// Check null directly with ===
console.log(shipping === null);    // true

// Check an array with Array.isArray
console.log(Array.isArray(cart));  // true
console.log(Array.isArray(order)); // false

// Is it an object that's neither an array nor null?
console.log(typeof order === "object" && order !== null && !Array.isArray(order));  // true

Rule Out null Before Reading Its Contents

Make typeof value === "object" your only condition before reading a value's contents, and it stops with a TypeError the moment value is null. typeof lets null slip right through, so check value !== null first, or use optional chaining, as in value?.city.

Sort each field of a response object that arrived from an API by type. response is already declared.

① Display the type of each of the 4 fields, 1 line at a time, in the form "key: type".

② Display whether items and coupon are arrays, in the form "key: result".

③ Display whether shipping is null.

④ Display whether coupon is "an object that's neither an array nor null," as a single expression chaining 3 conditions.

Whether a String Can Be Treated as a Number — Number and Number.isNaN

A quantity or an amount arriving from a form looks like digits, but its type is a string. Use it in a calculation without checking whether it can be treated as a number first, and a value like "12px" flows straight into the calculation and produces NaN.

What's covered here isn't the type itself, but whether it can convert.

Converting with Number(input) and checking whether the result is NaN with Number.isNaN(result) was covered in the type-conversion article. What's worth separating from type-checking here is that this is a check on contents, not on type.

Both "9800" and "abc" have the same typeof of "string" — whether something works as a quantity can't be told from its type.

The pitfall is an empty string. Number("") returns 0, not NaN, so an unfilled form field slips through as "a valid input of quantity 0."

To reject an empty string, check input !== "" before converting.

console.log(Number("9800"));               // 9800
console.log(Number("abc"));                // NaN
console.log(Number(""));                   // 0 (not NaN)

// Check whether the converted result is NaN
console.log(Number.isNaN(Number("abc")));  // true
console.log(Number.isNaN(Number("9800"))); // false

// An empty string slips through as 0
console.log(Number.isNaN(Number("")));     // false

Judge whether 4 inputs that arrived from a form can be used as a quantity. inputs is already declared.

① Convert all 4 to numbers, join them with ", ", and display the result.

② Display whether each converted result isn't NaN, alongside the input, 1 line at a time, in the form "input: result".

③ Add a condition that rejects an unfilled field, and display how the empty string's result changes with 1 condition versus 2, side by side.

Picking the Right Check — a Quick-Reference Table

There's more than 1 way to write a type check. Some types typeof alone can tell apart, others need a further check on top of what typeof returns, and whether a string's contents work as a number is a separate check from type entirely. Pick the way of writing it based on what you're trying to confirm.