instanceof vs typeof
Written byPhuoc Nguyen
Category
JavaScript
Created
24 Jun, 2020
Last updated
23 Apr, 2021
`instanceof`
and `typeof`
are two operators to check the type of a value.#Differences
The
`typeof`
operator checks if a value has type of primitive type which can be one of `boolean`
, `function`
, `object`
, `number`
, `string`
, `undefined`
and `symbol`
(ES6).typeof 'helloworld'; // 'string'
typeof new String('helloworld'); // 'object'
The
`instanceof`
operator checks if a value is an instance of a class or constructor function.'helloworld' instanceof String; // false
new String('helloworld') instanceof String; // true
#Good to know
-
If you want to check if a value is a primitive string or a
`String`
object, then you need to use both operators:const isString = (value) => typeof value === 'string' || value instanceof String;isString('helloworld'); // trueisString(new String('helloworld')); // trueAnother approach is to rely on the`toString()`
of`Object`
as below:const isString = (value) => Object.prototype.toString.call(value) === '[object String]';isString('hello world'); // trueisString(new String('hello world')); // trueisString(10); // falseWe can use similar methods to check a value against given original or wrapped primitive types:const isBoolean = (value) => Object.prototype.toString.call(value) === '[object Boolean]'; -
Be careful when creating a value of primitive type with constructor. The type of value can be changed based on the way you use it. In the piece of code below, we start with creating a string from the
`String`
constructor:let message = new String('hello');message instanceof String; // truetypeof message; // 'object'We are going to append the string object with another string:message += ' world';Now, let's look at the result of the operators:message instanceof String; // falsetypeof message; // 'string'These type modifications are known as boxing and unboxing. Boxing is the process that wraps a primitive value by object. Unboxing extracts the wrapped primitive value from object. -
There is a special case when using
`typeof`
with`null`
:typeof null; // 'object', not 'null' -
`instanceof`
doesn't work for primitive types.If you want to use`instanceof`
all the time, then you can override the behavior of`instanceof`
by implementing a static method with the key of`Symbol.hasInstance`
.In the following code, we create a class called`PrimitiveNumber`
that checks if a value is a number:class PrimitiveNumber {static [Symbol.hasInstance](value) {return typeof value === 'number';}}12345 instanceof PrimitiveNumber; // true'helloworld' instanceof PrimitiveNumber; // false
Questions? 🙋
Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.
I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.
Recent posts ⚡
Copy the content of an element to your clipboard
01 Oct, 2023
Make a text area fit its content automatically
30 Sep, 2023
Quickly insert alternate characters while typing
30 Sep, 2023
Zebra-like background
30 Sep, 2023
Add autocomplete to your text area
28 Sep, 2023
Linear scale of a number between two ranges
28 Sep, 2023
Highlight the current line in a text area
27 Sep, 2023
Create your own custom cursor in a text area
27 Sep, 2023
Mirror a text area for improving user experience
26 Sep, 2023
Display the line numbers in a text area
24 Sep, 2023
Select a given line in a text area
24 Sep, 2023
Newsletter 🔔
If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn