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.
x = 1it will need to allocate memory. But remember, the memory that holds the instructions (functions) have already been allocated. It is the instructions themselves now requesting for memory to store a variable. THIS is the level you are thinking.. the level of variables. Scope is nothing more than rules that instructions follow for accessing variables.a = function () {...}the function already exist. Say for example the function was compiled and now exist at RAM address 0x1234. The expressiona = function () {..}only needs to store the value 0x1234 into the variable a which may be exist at RAM location 0x5678. So if you look at RAM and look at where the variableais you will not see the function you will only see a pointer (reference) to the function. The function already exist long before the variableawas created