Before asking my question let me give you some information. See this piece of code
"use strict"
function outer() {
let counter = 0;
function incrementCounter() {
counter++;
console.log(counter);
}
return incrementCounter;
}
const newFunction = outer(); // A
newFunction(); // B
newFunction(); // C
This is an example of closure. When the line A done. The global memory seems like this:
Global Memory
________________________________________________________________
Function Name Data
outer ----------------------------> { outer function code }
newFunction ----------------------------> { incrementCounter's code / definitions / functionalty }
| live data attached to incrementCounter |
| counter = 0 } |
The live data section includes counter variable.
When we run the function on line B and when engine encounter counter++ first it looks new Function's local memory for find counter variable then if don't find, it checks the live data mentioned above.
When it finally find the counter inside of live data, counter++ works. The same things are repeated for the line C.
At the end of all this, we see 1 and 2 on the console.
Now Check out this piece of code.
"use strict"
function outer() {
let counter = 0;
function incrementCounter() {
counter++;
console.log(counter);
}
return incrementCounter;
}
const newFunction = outer(); // A
newFunction(); // B
newFunction(); // C
const anotherFunction = outer(); // D
anotherFunction(); // F
anotherFunction(); // G
When we run the above code, we see 1 2 1 2 on the console. Not 1 2 3 4. Because i know newFunction's live data field or closure or backpack is different than anotherFunction's.
Here is my questions:
1)What does global memory looks like in this case?
Does it looks like this?
Global Memory
________________________________________________________________
Function Name Data
outer ----------------------------> { outer function code }
newFunction ----------------------------> { incrementCounter's code / definitions / functionalty }
| live data attached to incrementCounter |
| counter = 2 } |
anotherFunction ----------------------------> { incrementCounter's code / definitions / functionalty }
| live data attached to incrementCounter |
| counter = 2 } |
Or does it looks like this?
Global Memory
________________________________________________________________
Function Name Data
outer ----------------------------> { outer function code }
| Unique |
newFunction ----------------------------> | live data attached to incrementCounter |
| | counter = 2 } |
|
| common function definition
|-----------------------> { incrementCounter's code / definitions / functionalty }
|
| | Unique |
anotherFunction ---------------------------> | live data attached to incrementCounter |
| counter = 2 } |
2)Is there just one outer function in global memory or more?
3)In global memory Is there are one function definition of incrementCounter or is there are two function definition?
UPDATE
I think i should add my resource here. I learned the things I mentioned above while watching codesmith's javascript the hard parts video series.
If you can check this video maybe you can understand this question better.
question from:
https://stackoverflow.com/questions/65894881/are-functions-kept-only-once-in-memory-in-javascript 
