Web Tools #446 - Frameworks, Build Tools, Uncats

Here's a JavaScript operator that's recently new to me: instanceof. Similar to the typeof operator, which returns a string indicating the type of the expression you pass as a parameter, the instanceof operator, according to MDN, "tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object."

I like David Flanagan's explanation in the latest edition of JavaScript: The Definitive Guide. He says:

"The instanceof operator expects a left-side operand that is an object and a right-side operand that identifies a class of objects. The operator evaluates to true if the left-side object is an instance of the right-side class and evaluates to false otherwise."

A simple example is testing an object that was created with JavaScript's Date() constructor:

As you can see, unlike typeof, and as explained by Flanagan, this operator requires a left-side and right-side to the operator, in addition to the operator itself.

A more customized example, as in the MDN article, would be when you build an object yourself and run a similar check:

You can try out both the above examples using this CodePen demo. When using instanceof, if the left side operand is not an object, the expression will return false but if the right operand is not a class of objects, it will throw a TypeError.

I'll leave this again to Flanagan to explain the mechanism here, as he nicely expounds why MDN's definition mentions the prototype chain:

"To evaluate the expression o instanceof f, JavaScript evaluates f.prototype, and then looks for that value in the prototype chain of o. If it finds it, then o is an instance of f (or of a subclass of f) and the operator returns true. If f. prototype is not one of the values in the prototype chain of o, then o is not an instance of f and instanceof returns false."

Now on to this week's tools!