DEV Community

Imran shaikh
Imran shaikh

Posted on

2

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.

  1. 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"
Enter fullscreen mode Exit fullscreen mode
  1. 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
Enter fullscreen mode Exit fullscreen mode
  1. 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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

That's where 'instanceof' comes in handy:

console.log([1, 2, 3] instanceof Array); // Returns true
Enter fullscreen mode Exit fullscreen mode
  1. 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!

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (0)