Explain compiled TypeScript namespace (inner working of namespace)-CodePudding

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 = {}))

CodePudding user response：

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();