I am confused about how memory allocation and function calls tracking happen in Javascript. One thing I am quite sure about is that there is a call stack in JS, where function calls are stored in LIFO manner. But when it comes to memory allocation, I am confused which of the following arguments is correct:
or
If 1st argument is correct, then how call stack and stack are connected to each other such that function in call stack can identify which variables to pick from stack for its execution?
JavaScript will keep on stack whatever it knows at compile time the size of (primitives have a fixed size so they can be put on the stack, as well as references to objects -- this is why you have size limitations).
Objects and functions on the other hand don't have a known fixed size at compilation time so they need to be stored in a dynamic place (heap). It allocates as much memory as it's needed.
The stack will be used to get to the heap as well (remember, refference is kept on the stack).
When the stack does not contain the function reference or the object reference, it will be garbage collected and the heap will be freed up.
JavaScript has a refference counting algorithm to identify if any of the allocated variables are still needed in heap memory.
Every function is a closure in javascript, so it knows the variables that are needed for it (the ones defined in the upper closure and the ones defined inside of it).
Hope this helps.
If you want to dive deeper into how everything works, this article covers the question that you had
A stack is usually a continuous region of memory allocating local context for each executing function.
LE:
This article has a great visualization of the stack (with primitives associated in the local context for each function)
This is the stack memory area and there is one stack per V8 process. This is where static data including method/function frames, primitive values, and pointers to objects are stored. The stack memory limit can be set using the --stack_size V8 flag.