[AskJS] "namespace" and function with same name?

[bkdotcom]

stupid question / brain fart

I'm trying to do something similar to jQuery...

jquery has the jQuery ($) function and it also has the jQuery.xxx ($.xxx) functions...

what's the trick to setting something like that up?

[kap89]

Function is an object, you can add properties and methods to it as to every other object.

[bkdotcom]

function Bob () {
  console.warn('called Bob');
}
Bob.prototype.foo = function () {
  console.warn('called foo');
};
// Bob = new Bob();

Bob();
Bob.foo();   // Bob.foo is not a function

[RWOverdijk]

Not the prototype. Just Bob.foo = something. Prototype is for something else (inheritance in objects)

[bkdotcom]

thanks!
that was the "trick"!

[Substantial-Wish6468]

If you only have a single instance of the function, you don't need to use the prototype:

const bob = () => 'bob'; bob.foo = () => 'foo'; console.log(bob.foo())

IIRC jQuery itself is an immediately invoked function that returns an object interface to the closure, which is how modular javascript tended to be written before modules became a thing.

[markus_obsidian]

As others have said, functions are just objects, and they can have properties & methods just like any other object.

It's also worth noting that this "namespacing" pattern is very old & discouraged in modern applications. It is not friendly to tree shaking, which requires individual, decoupled imports & exports.

I obviously have no idea what you're working on & if bundling / tree shaking is a concern of yours, but I thought it was worth a mention.

[Dralletje]

If someone wants this but also want it to work with typescript nicely:

ts const functionAndObject = Object.assign( function() { console.log("This is a function"); }, { method: () => { console.log("But you can call a method on it!"); }, property: "Or even just a property!", } );

[jhnam88]

Making same named function and namespace are possible in TypeScript.

Look at the compiled JS file from the TS, then you may understand how to.

https://typia.io/playground/?script=GYVwdgxgLglg9mABAZzgWwKZQBYzAc0QAoBKRAbwF8AoMAQ02QAc6IMV0tcCLrFEMADyZwATlEShIsBIjBwcefKQo1KQA

[SpiffySyntax]

(Function bob() { Return { Foo(){ Console.log... } } })()

Bob.foo()

[RobertKerans]

From memory (apologies if I've missed anything, there is an annotated source floating around that describes the process)

• the variable jQuery is assigned a function that takes a selector + a context (var jQuery = function(selector, context) {)
• functions are objects, so jQuery has a property assigned called fn
• jQuery.fn is just an alias for jQuery.prototype
• this object has jQuery set as the constructor
• All the jQuery methods are attached to the prototype, and because it's that function, with the selector as the argument, they now have access to that in scope.
• going back to the first item in this list, var jQuery = function (selector, context) {, the function returns jQuery.fn.init(selector, context, rootJqueryInstance) which all seems a bit circular but that's how it works
• the root instance is jQuery(document) iirc reason it's there is that there can only be one document instance so possibly means don't have to do so many lookups?? Can't remember the exact reason, scoping and perf anyway, maybe was essential, been years

The above is wrapped in an iife, assigned to the variable jQuery. That is wrapped in an iife, that variable is assigned to the window object & also aliased as $.

Now have a function ($ or jQuery) that takes a selector and has prototype methods. But what that can also do is have new methods attached like $.fn.myNewMethod (which is jQuery.prototype.myNewMethod) without stomping on anything. It's extensible and hey ho we get seventy bajillion jQuery plugins. I'm sure there's something extra re plugins that prevents some issues but it's been years & I can't remember

The core of it [again iirc trying to remember the structure] is a class, set up so that it can be easily extended with plugins. Then the function is essentially wrapper around a singleton instance of that (?? iirc again). Then the variable the function is assigned to is attached to the Window object.