Why in JavaScript both “Object instanceof Function” and “Function instanceof Object” return true?

Question

Why in JavaScript do both Object instanceof Function and Function instanceof Object return true?

I tried it in Safari WebInspe

Answer 1

The source of the confusion in your question lies in the inherent dual nature of functions* in JavaScript (ECMAScript).

Functions in js are both regulars functions and objects at the same time. Think of them as algorithmic Dr. Jekyll and Mr. Hyde. They look like objects on the outside but inside they're just your good old js functions with all their quirks, or maybe it's the other way around!

JavaScript is really a tricky business :)

So back to your question, borrowing the syntax appearing on MDN:

object instanceof constructor

Applying it on the first statement in your code:

Object instanceof Function

Here you have Object, a constructor function that's used as an object initializer but since functions lead a double life in js, it has object-specific props and methods attached to it rendering it effectively an object too.

So, the first condition in the statement has been met. We remain to investigate the other condition or operand.

Function as you might have noticed is also function constructor but its other object side is of no interest to us now during the execution of this particular statement.

So, the syntactic conditions are both met namely "object" and "constructor". We can now then proceed to investigate their hereditary relation and if there's a connection between them.

Since Object is a working function itself, it makes a lot of sense to assume that it has its internal prototype prop pointing to the Function.prototype object reference since in js ALL functions inherit their props and methods through that same location Function.prototype.

true is definitely the ONLY expected outcome of this comparison performed by the instanceof operator.

For the other case:

Function instanceof Object

Since we established already that functions in js have also an object side to them. It makes sense that they got their fancy object-specific toys from the Object.prototype, and therefore they constitute instances of the Object constructor.

Hope I didn't add to the confusion with my explanation and allegories. :)

*: Not only functions that lead a double life in js. Almost all data types in js have an object dark side to them that facilitate completing operations and manipulations without any hassle.