JavaScript: typeof vs instanceof

Because JavaScript is a dynamically typed language, checking the type of a variable at runtime is a frequent necessity.

What is the difference between typeof and instanceof? When should you use each?

While both are used for type checking, they serve completely different purposes. In short: typeof is for checking primitives, and instanceof is for checking custom objects and classes.

1. The typeof Operator

The typeof operator returns a string indicating the type of the unevaluated operand. It is best used for checking basic primitive types (strings, numbers, booleans, symbols, undefined).

console.log(typeof "hello"); // "string"
console.log(typeof 42);      // "number"
console.log(typeof true);    // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof Symbol());  // "symbol"

The Pitfalls of typeof

When typeof is used on structural types (Objects, Arrays, Null), it becomes practically useless because it groups them all under "object".

console.log(typeof {}); // "object"
console.log(typeof []); // "object" (Arrays are objects!)
console.log(typeof new Date()); // "object"
 
// The most famous JS bug:
console.log(typeof null); // "object"

Note: Functions are a notable exception. typeof function(){} returns "function".

2. The instanceof Operator

The instanceof operator tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object. It returns a boolean (true or false).

It is used specifically for complex object types (Arrays, Dates, custom Classes).

const arr = [1, 2, 3];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true (Arrays inherit from Object)
 
const date = new Date();
console.log(date instanceof Date); // true
 
class User {}
const alice = new User();
console.log(alice instanceof User); // true

The Pitfalls of instanceof

1. It fails across multiple frames/windows: If you pass an array from an <iframe> to the parent window, arr instanceof Array will return false because the iframe has a different execution context and a different Array constructor.
2. It does not work on primitives:

console.log("hello" instanceof String); // false
console.log(new String("hello") instanceof String); // true (because it's an object wrapper)

3. How to truly check an Array

Because typeof [] is "object" and instanceof Array can fail across execution contexts, modern JavaScript provides a bulletproof static method to check for arrays:

console.log(Array.isArray([1, 2, 3])); // true

Summary Table

Senior-Level Interview Answer

typeof is a unary operator that returns a string representing the primitive type of a variable, such as 'number' or 'undefined'. However, it is fundamentally flawed for structural types, returning 'object' for arrays, dates, and notoriously, null.

instanceof, on the other hand, is a relational operator that checks if a specific constructor's prototype exists anywhere in the object's prototype chain, making it ideal for identifying custom class instances or specific object types like Dates. However, instanceof can fail across different execution contexts (like iframes) because they have distinct global environments and constructors. For arrays specifically, neither is ideal, and Array.isArray() is the industry standard approach.

Common Interview Mistakes

❌ Using typeof to check for null

Because of a historical bug in JavaScript's initial implementation, typeof null returns "object". You should never use typeof to check for null. Instead, use strict equality:

if (value === null) { ... }

❌ Relying on instanceof Array

Interviewers often ask "How do you check if a variable is an array?" Mentioning instanceof Array is a decent answer, but a senior candidate will immediately point out the cross-realm (iframe) flaw and suggest Array.isArray() or Object.prototype.toString.call(value) === "[object Array]" as the robust solutions.