JavaScript Interview Trick: typeof vs instanceof

Title: JavaScript Interview Trick: Understanding typeof vs instanceof As we dive into the world of JavaScript, we encounter different methods to determine the type of a variable or object. Two of the most common methods are the 'typeof' and 'instanceof' operators. In this blog post, we will explore these operators, their use cases, edge cases, and when it's best to use each one. typeof Use Cases The 'typeof' operator in JavaScript is used to return a string indicating the type of the operand. An operand is the object or variable you're testing. It’s a unary operator, meaning it takes only one operand. Here are some examples: console.log(typeof 'Hello World'); // Returns "string" console.log(typeof 42); // Returns "number" console.log(typeof true); // Returns "boolean" console.log(typeof undefined); // Returns "undefined" console.log(typeof {name: 'John Doe'}); // Returns "object" console.log(typeof null); // Returns "object" console.log(typeof function() {}); // Returns "function" console.log(typeof [1, 2, 3]); // Returns "object" instanceof Use Cases On the other hand, 'instanceof' operator in JavaScript is used to check the current object and returns true if an object is an instance of a particular class or constructor, and false otherwise. It's a binary operator, meaning it requires two operands: an object and a constructor. Here are some examples: console.log([] instanceof Array); // Returns true console.log({} instanceof Object); // Returns true console.log('Hello World' instanceof String); // Returns false console.log(new String('Hello World') instanceof String); // Returns true Edge Cases While 'typeof' and 'instanceof' operators are straightforward in most cases, there are some edge cases that might trip you up. For instance, console.log(typeof null); // Returns "object" This is a long-standing bug in JS, but one we're stuck with for now. Null is not really an object; it has its own type. Another edge case is when dealing with arrays. When you use the 'typeof' operator with an array, it will return "object", which is not entirely accurate. console.log(typeof [1, 2, 3]); // Returns "object" That's where 'instanceof' comes in handy: console.log([1, 2, 3] instanceof Array); // Returns true When to use what? Understanding when to use 'typeof' vs 'instanceof' can be a bit tricky. Here are some rules of thumb: Use 'typeof' when you want to know the type of a primitive value. Use 'instanceof' when you want to know if an object is an instance of a certain class. 'instanceof' is typically better for custom objects where you want to check if an object was instantiated from a specific class. Remember, JavaScript is a dynamically typed language, which means that the same variable can be used to hold different data types. Therefore, understanding 'typeof' and 'instanceof' is crucial in your journey as a JavaScript developer. By understanding the subtleties of these operators, you'll be better prepared to write and debug JavaScript code, and you'll be more equipped to handle any curveballs thrown your way during a JavaScript interview. Happy coding!

Apr 29, 2025 - 18:09

JavaScript Interview Trick: typeof vs instanceof

Title: JavaScript Interview Trick: Understanding typeof vs instanceof

As we dive into the world of JavaScript, we encounter different methods to determine the type of a variable or object. Two of the most common methods are the 'typeof' and 'instanceof' operators. In this blog post, we will explore these operators, their use cases, edge cases, and when it's best to use each one.

typeof Use Cases

The 'typeof' operator in JavaScript is used to return a string indicating the type of the operand. An operand is the object or variable you're testing. It’s a unary operator, meaning it takes only one operand. Here are some examples:

console.log(typeof 'Hello World'); // Returns "string"
console.log(typeof 42); // Returns "number"
console.log(typeof true); // Returns "boolean"
console.log(typeof undefined); // Returns "undefined"
console.log(typeof {name: 'John Doe'}); // Returns "object"
console.log(typeof null); // Returns "object"
console.log(typeof function() {}); // Returns "function"
console.log(typeof [1, 2, 3]); // Returns "object"

instanceof Use Cases

On the other hand, 'instanceof' operator in JavaScript is used to check the current object and returns true if an object is an instance of a particular class or constructor, and false otherwise. It's a binary operator, meaning it requires two operands: an object and a constructor. Here are some examples:

console.log([] instanceof Array); // Returns true
console.log({} instanceof Object); // Returns true
console.log('Hello World' instanceof String); // Returns false
console.log(new String('Hello World') instanceof String); // Returns true

Edge Cases

While 'typeof' and 'instanceof' operators are straightforward in most cases, there are some edge cases that might trip you up. For instance,

console.log(typeof null); // Returns "object"

This is a long-standing bug in JS, but one we're stuck with for now. Null is not really an object; it has its own type.

Another edge case is when dealing with arrays. When you use the 'typeof' operator with an array, it will return "object", which is not entirely accurate.

console.log(typeof [1, 2, 3]); // Returns "object"

That's where 'instanceof' comes in handy:

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

When to use what?

Understanding when to use 'typeof' vs 'instanceof' can be a bit tricky. Here are some rules of thumb:

Use 'typeof' when you want to know the type of a primitive value.
Use 'instanceof' when you want to know if an object is an instance of a certain class.
'instanceof' is typically better for custom objects where you want to check if an object was instantiated from a specific class.

Remember, JavaScript is a dynamically typed language, which means that the same variable can be used to hold different data types. Therefore, understanding 'typeof' and 'instanceof' is crucial in your journey as a JavaScript developer.

By understanding the subtleties of these operators, you'll be better prepared to write and debug JavaScript code, and you'll be more equipped to handle any curveballs thrown your way during a JavaScript interview. Happy coding!