DevPrep
  • Interview Prep
  • Projects
  • Resources
  • Pricing
  • About Us
Submit Question
DevPrep
  • Pricing
  • About Us
Submit Question
  1. Home
  2. Articles
  3. Frontend Engineering
  4. instanceof vs typeof in JavaScript: How They Actually Work
XLinkedInReddit
MediumFrontend Engineering

instanceof vs typeof in JavaScript: How They Actually Work

D
DevPrep Team
February 9, 2026·2 min read·0
Table of Contents
  • typeof — Checking Primitive Types
  • The null Bug
  • instanceof — Checking the Prototype Chain
  • When Each Fails
  • typeof Cannot Distinguish Objects
  • instanceof Fails Across Realms
  • Real Production Issues
  • The Better Approach: Object.prototype.toString
  • Best Practices
  • Summary

By Rahul — Google Frontend Engineer

typeof — Checking Primitive Types

typeof returns a string indicating the type of the operand. It works on the value itself, not the prototype chain.

typeof 42           // "number"
typeof "hello"      // "string"
typeof true         // "boolean"
typeof undefined    // "undefined"
typeof Symbol()     // "symbol"
typeof BigInt(42)   // "bigint"
typeof null         // "object" ← THE BUG
typeof {}           // "object"
typeof []           // "object"
typeof function(){} // "function"

The null Bug

typeof null === "object" is a bug from the first version of JavaScript (1995). It was never fixed because too much existing code depends on it. Always check for null explicitly:

// GOOD
if (value !== null && typeof value === 'object') {
  // It is actually an object
}

instanceof — Checking the Prototype Chain

instanceof checks whether the prototype of a constructor appears anywhere in the prototype chain of an object.

class Animal {}
class Dog extends Animal {}

const dog = new Dog();
dog instanceof Dog    // true
dog instanceof Animal // true — checks up the chain
dog instanceof Object // true — everything extends Object

// How it works internally:
// dog.__proto__ === Dog.prototype? Yes → true
// dog.__proto__.__proto__ === Animal.prototype? Yes → true

When Each Fails

typeof Cannot Distinguish Objects

typeof []    // "object" — not helpful
typeof {}    // "object"
typeof null  // "object"
typeof /re/  // "object"
typeof new Date() // "object"

// Use Array.isArray() for arrays
Array.isArray([]) // true

instanceof Fails Across Realms

// iframe has its own global scope with its own Array constructor
const iframeArray = iframe.contentWindow.eval('[]');
iframeArray instanceof Array // false! Different Array constructor

// This is why Array.isArray() exists — it works across realms
Array.isArray(iframeArray) // true

Real Production Issues

  • Cross-iframe instanceof: We had a component library that checked error instanceof Error. Errors thrown from an iframe failed this check. We switched to duck-typing: error && typeof error.message === 'string'
  • Bundler duplicates: If two versions of a library are bundled, instanceof fails because there are two different constructor functions

The Better Approach: Object.prototype.toString

Object.prototype.toString.call([])        // "[object Array]"
Object.prototype.toString.call(null)      // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(/re/)      // "[object RegExp]"
Object.prototype.toString.call(new Date)  // "[object Date]"

This works across realms and gives precise type information.

Best Practices

  • Use typeof for primitives (string, number, boolean, undefined)
  • Use Array.isArray() for arrays
  • Use instanceof only when you control both the constructor and the usage context
  • For libraries, prefer duck-typing over instanceof

Summary

typeof checks the value type but has the null bug and cannot distinguish objects. instanceof walks the prototype chain but breaks across iframes and bundler duplicates. Use the right tool for the right situation.

Related Articles

MediumFrontend Engineering

System Design #12: Design a Multi-Step Form Wizard

7 min read
MediumFrontend Engineering

Mastering Senior-Level JavaScript Interview Concepts

2 min read
MediumFrontend Engineering

System Design #9: Design a Collaborative Text Editor

9 min read

Comments (0)

Sign in to leave a comment.

No comments yet. Be the first to comment.

Table of Contents

  • typeof — Checking Primitive Types
  • The null Bug
  • instanceof — Checking the Prototype Chain
  • When Each Fails
  • typeof Cannot Distinguish Objects
  • instanceof Fails Across Realms
  • Real Production Issues
  • The Better Approach: Object.prototype.toString
  • Best Practices
  • Summary

Series

View all Frontend Engineering articles →

Practice

  • JavaScript
  • DSA
  • Machine Coding
  • System Design

Resources

  • Learning Tracks
  • Articles
  • Roadmaps
  • Compare Concepts
  • Glossary
  • Developer Tools
  • All Questions

Company

  • About
  • Pricing

Legal

  • Privacy Policy
  • Terms of Service
DevPrep

© 2026 DevPrep. All rights reserved.