How can a value be invoked (as a function) at the same time as it contains properties (as an object) in Javascript?

Question

I was left with a question concerning the structure of the Express.

How Express can be invoked, as in express(), but can also have in its structure access to the Router property, for example?

I don’t know if my doubt was clear, so I’ll try to illustrate. To create a structure with access to a name method Router, for example, just create an object and set a property for it with name Router and to give it a function, example:

var express = {
    Router: () => { console.log("Acessou o router"); }
};

In the example above, I could access the property Router easily, as in express.Router().

The problem is that in the above form it would not be possible to invoke the Express object as in express(), since it is an object. If I try to do as in the example below, it gives error:

var express = {
    (): () => { console.log("Iniciou o express"); },
    Router: () => { console.log("Acessou o Router"); }
};

I don’t need to understand specifically how Express does, but I would just like to understand how this would be possible, since in my view it would not be possible for an object to work with direct function calls.

Answer 1

In Javascript, every function is an object.

And it’s quite simple, escaping the formality of language, to prove it. See:

function x() {}
x instanceof Object; //-> true

In more detail, "function objects" implement an internal property to which the specification refers as [[Call]]. Every Javascript object that has this internal property is a function and therefore can be invoked.

As functions are objects, it becomes possible to attach any property to a function. Although it is not possible to use literal object notation to define the [[Call]] of a function (as the question suggests), one can create the function and then assign the desired properties.

In the case of Express, it would be something like:

function express() {
  // return new express instance
}

express.Router = function() {
  // return new router instance
};

If several properties are to be added, one can use Object.assign, which facilitates the allocation:

function express() {
  // return new express instance
}

Object.assign(express, {
  Router: function() {
    // return new router instance
  }
});

---

A little related: Why Arrays and Functions are Objects?.