You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Copy file name to clipboardExpand all lines: docs/concepts/scope-and-closures.mdx
+13-5Lines changed: 13 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -136,6 +136,10 @@ Scope exists for three critical reasons:
136
136
137
137
JavaScript has three main types of scope. Understanding each one is fundamental to writing predictable code.
138
138
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
+
139
143
### 1. Global Scope
140
144
141
145
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
523
527
524
528
## What is a Closure in JavaScript?
525
529
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.
527
531
528
532
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!
529
533
@@ -853,15 +857,19 @@ function createHeavyClosure() {
853
857
consthugeData=newArray(1000000).fill('x'); // Large data
854
858
855
859
returnfunction() {
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);
858
862
};
859
863
}
860
864
861
865
constleakyFunction=createHeavyClosure();
862
-
// hugeData is still in memory because the closure might reference it
866
+
// hugeData is still in memory because the closure references it
863
867
```
864
868
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
+
865
873
### Breaking Closure References
866
874
867
875
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
0 commit comments