0

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.

14
  • What doe you mean by global memory? Do you mean having global scope? Commented Jan 26, 2021 at 2:04
  • @DipeshTimilsina No. I think global memory and global scope different things from each other. When you define a variable in global scope it will stored in global memory but when you define a variable inside of function, inside of it's local scope( function's scope) it will stored in the function's temporary local memory. I hope I was able to explain myself. Commented Jan 26, 2021 at 2:17
  • 1
    You're kind of mixing two different concepts. When the interpreter first parses the entire script into bytecode (think of it as instructions for a virtual CPU called javascript). Some of these bytecodes if executed a lot will later get compiled into native CPU instructions automatically. These bytecodes and program instructions need to be stored somewhere. They are stored in RAM of course but they are normally treated as unmodifiable by javascript. This is normally called the TEXT segment or CODE segment. This does not contain variables, only constants and instructions that create variables. Commented Jan 26, 2021 at 7:41
  • 1
    ... now, when the interpreter executes javascript (or indeed when the CPU executes programs in general) it reads this text section to fetch instructions to execute. When it finds an instruction that says something like x = 1 it 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. Commented Jan 26, 2021 at 7:44
  • 1
    ... When you do a = function () {...} the function already exist. Say for example the function was compiled and now exist at RAM address 0x1234. The expression a = 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 variable a is you will not see the function you will only see a pointer (reference) to the function. The function already exist long before the variable a was created Commented Jan 26, 2021 at 7:47

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.