Skip to content

Commit 9ed8042

Browse files
committed
fix: improve technical accuracy in scope and closures concept page
- Update MDN closures URL to canonical path (/Guide/Closures) - Fix closure definition wording to match MDN exactly - Improve memory leak example to actually reference the variable - Add note about modern engine optimizations for closures - Add note about module scope for completeness
1 parent 906653b commit 9ed8042

1 file changed

Lines changed: 13 additions & 5 deletions

File tree

docs/concepts/scope-and-closures.mdx

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,10 @@ Scope exists for three critical reasons:
136136

137137
JavaScript has three main types of scope. Understanding each one is fundamental to writing predictable code.
138138

139+
<Note>
140+
ES6 modules also introduce **module scope**, where top-level variables are scoped to the module rather than being global. Learn more in our [IIFE, Modules and Namespaces](/concepts/iife-modules) guide.
141+
</Note>
142+
139143
### 1. Global Scope
140144

141145
Variables declared outside of any function or block are in the **global scope**. They're accessible from anywhere in your code.
@@ -523,7 +527,7 @@ Shadowing can be confusing. While sometimes intentional, accidental shadowing is
523527

524528
## What is a Closure in JavaScript?
525529

526-
A **[closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)** is a function bundled together with references to its surrounding state (the lexical environment). In other words, a closure gives a function access to variables from an outer (enclosing) scope, even after that outer function has finished executing and returned. Every function in JavaScript creates a closure at creation time.
530+
A **[closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures)** is the combination of a function bundled together with references to its surrounding state (the lexical environment). In other words, a closure gives a function access to variables from an outer (enclosing) scope, even after that outer function has finished executing and returned. Every function in JavaScript creates a closure at creation time.
527531

528532
Remember our office building analogy? A closure is like someone who worked in the private office, left the building, but still remembers exactly where everything was, and can still use that knowledge!
529533

@@ -853,15 +857,19 @@ function createHeavyClosure() {
853857
const hugeData = new Array(1000000).fill('x'); // Large data
854858

855859
return function() {
856-
// Even if we don't use hugeData, it's still retained!
857-
console.log('Hello');
860+
// This reference to hugeData keeps the entire array in memory
861+
console.log(hugeData.length);
858862
};
859863
}
860864

861865
const leakyFunction = createHeavyClosure();
862-
// hugeData is still in memory because the closure might reference it
866+
// hugeData is still in memory because the closure references it
863867
```
864868

869+
<Note>
870+
Modern JavaScript engines like V8 can optimize closures that don't actually use outer variables. However, it's best practice to assume referenced variables are retained and explicitly clean up large data when you're done with it.
871+
</Note>
872+
865873
### Breaking Closure References
866874

867875
When you're done with a closure, explicitly break the reference. Use [`removeEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) to clean up event handlers:
@@ -1099,7 +1107,7 @@ cleanup(); // Removes listener, allows memory to be freed
10991107
## Reference
11001108

11011109
<CardGroup cols={2}>
1102-
<Card title="Closures — MDN" icon="book" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">
1110+
<Card title="Closures — MDN" icon="book" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures">
11031111
Official MDN documentation on closures and lexical scoping
11041112
</Card>
11051113
<Card title="Scope — MDN Glossary" icon="book" href="https://developer.mozilla.org/en-US/docs/Glossary/Scope">

0 commit comments

Comments
 (0)