
Set 1 of JavaScript consists of nine lines of code. Line 1: StartCommand let EndCommand g 2 equals open double quotes variable with global scope close double quotes semicolon. Line 2: function parent2 open parenthesis close parenthesis open curly brace. Line 3: StartCommand let EndCommand foo2 equals open double quotes within parent2 close double quotes semicolon. Line 4: function child2 open parenthesis close parenthesis open curly brace. Line 5: StartCommand let EndCommand bar2 equals open double quotes within child2 close double quotes semicolon. Line 6: return foo2 plus open double quotes close double quotes plus bar2 semicolon. Line 7: Close curly brace. Line 8: return child2 semicolon. An arrow labeled Notice that we are not invoking the inner function now. Instead, we are returning the inner function points to the child2 property in line 8. Line 9: Close curly brace. Explanation 1 is written at the right of set 1 as follows: After parent2 executes, we might expect that any local variables defined within the function to be gone (i.e., garbage collected). Yet in this example, this is not what happens. The local variable foo2 sticks around even after parent2 is finished executing. Why? This happens because the parent2 function has a closure. A closure is like a special object that contains a function’s design-time scope environment. A closure thus lets a function continue to access its design-time lexical scope even if it is executed outside its original parent.
Set 2 of JavaScript is placed below set 1 and consists of four lines of code. Line 1: StartCommand let EndCommand temp equals parent2 open parenthesis close parenthesis semicolon. The function parent2 open parenthesis close parenthesis in line 1 points to the child2 property in line 8 of set 1. Line 2: alert open parenthesis open double quotes temp equals close double quotes plus temp close parenthesis semicolon. An arrow labeled The temp variable is now going to contain inner child2 open parenthesis close parenthesis function points from line 2 to the explanation on the right that shows an alert dialog with four lines of code and an OK button. The first line of code reads: temp equals function child2 open parenthesis close parenthesis open curly brace. The second line of code reads: StartCommand let EndCommand bar3 equals open double quotes within child2 close double quotes semicolon. The third line of code reads: return foo2 plus open double quotes close double quotes plus bar2 semicolon. The fourth line of code reads: Close curly brace. Line 3: alert open parenthesis open double quotes temp open parenthesis close parenthesis equals close double quotes plus temp open parenthesis close parenthesis close parenthesis semicolon. An arrow labeled The temp function still has access to the foo2 variable within the parent2 function even though the temp function is now outside its declared lexical scope (i.e., the parent2 function) points to the explanation on the right that shows an alert dialog with one line of code and an OK button. The first line of code reads: temp open parenthesis close parenthesis equals within parent2 within child2. Line 4: console dot dir open parenthesis temp close parenthesis semicolon. An arrow labeled It has this same access since the closure keeps a record of the lexical (design-time) scope environment points from line 4 to the explanation on the right that shows a window labeled DevTools with eight lines of code. The first line of code reads: temp f child2 open parenthesis close parenthesis. The second line of code reads: ellipsis. The third line of code reads: Open square bracket open square bracket Scopes close square bracket close square bracket colon Scopes open square bracket 3 close square bracket. The fourth line of code reads: 0 colon Closure open parenthesis parent2 close parenthesis. The fifth line of code reads: foo2 colon open double quotes within parent2 close double quotes. The sixth line of code reads: 1 colon Script. The seventh line of code reads: g2 colon open double quotes variable with global scope close double quotes. The eight line of code reads: 2 colon Global.
Back