I'm trying to understand how can namespace be implemented in JavaScript. I'm checking out How do I declare a namespace in JavaScript?.
One of the answers mentioned the following TypeScript code.
namespace Stack {
export const hello = () => console.log('hi')
}
Stack.hello()
is compiled to the following JavaScript
var Stack;
(function (Stack) {
Stack.hello = () => console.log('hi');
})(Stack || (Stack = {}));
However, I find it hard to understand the above syntax, could someone explain how does it work? For example, how does the following work?
(function(Stack) {...})(...)
(Stack || (Stack = {}))
var Stack;
(function (Stack) {
Stack.hello = () => console.log('hi');
})(Stack || (Stack = {}));
Stack.hello();It's a self-executing anonymous function. You can check this document for some insights.
For a more understanding version, you can imagine it like below
var Stack;
//naming the function
//`Stack` here is not related to the global `Stack` because the function parameter scopes this variable
function anonymousFunction(Stack) {
Stack.hello = () => console.log('hi');
}
//replace for `Stack || (Stack = {})`
if(!Stack) {
Stack = {} //it's a reference value, so if we have any changes inside a function, it will be applied to `Stack` as well
}
//execute the function/namespace to add `hello` to `Stack`
anonymousFunction(Stack);
Stack.hello();