Skip to content

Commit 6e77e3a

Browse files
committed
improvements
1 parent 2634131 commit 6e77e3a

File tree

2 files changed

+15
-17
lines changed

2 files changed

+15
-17
lines changed

1-js/06-advanced-functions/03-closure/article.md

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11

22
# Closure
33

4-
JavaScript is a very function-oriented language. It gives us a lot of freedom. A function can be created at one moment, then copied to another variable or passed as an argument to another function and called from a totally different place later.
4+
JavaScript is a very function-oriented language. It gives us a lot of freedom. A function can be created dynamically, copied to another variable or passed as an argument to another function and called from a totally different place later.
55

6-
We know that a function can access variables outside of it; this feature is used quite often.
6+
We know that a function can access variables outside of it, this feature is used quite often.
77

88
But what happens when an outer variable changes? Does a function get the most recent value or the one that existed when the function was created?
99

@@ -63,24 +63,24 @@ Let's consider two situations to begin with, and then study the internal mechani
6363

6464
To understand what's going on, let's first discuss what a "variable" actually is.
6565

66-
In JavaScript, every running function, code block, and the script as a whole have an associated object known as the *Lexical Environment*.
66+
In JavaScript, every running function, code block `{...}`, and the script as a whole have an internal (hidden) associated object known as the *Lexical Environment*.
6767

6868
The Lexical Environment object consists of two parts:
6969

70-
1. *Environment Record* -- an object that has all local variables as its properties (and some other information like the value of `this`).
71-
2. A reference to the *outer lexical environment*, usually the one associated with the code lexically right outside of it (outside of the current curly brackets).
70+
1. *Environment Record* -- an object that stores all local variables as its properties (and some other information like the value of `this`).
71+
2. A reference to the *outer lexical environment*, the one associated with the outer code.
7272

73-
**So, a "variable" is just a property of the special internal object, Environment Record. "To get or change a variable" means "to get or change a property of that object".**
73+
**So, a "variable" is just a property of the special internal object, `Environment Record`. "To get or change a variable" means "to get or change a property of that object".**
7474

7575
For instance, in this simple code, there is only one Lexical Environment:
7676

7777
![lexical environment](lexical-environment-global.png)
7878

79-
This is a so-called global Lexical Environment, associated with the whole script. For browsers, all `<script>` tags share the same global environment.
79+
This is a so-called global Lexical Environment, associated with the whole script.
8080

8181
On the picture above, the rectangle means Environment Record (variable store) and the arrow means the outer reference. The global Lexical Environment has no outer reference, so it points to `null`.
8282

83-
Here's the bigger picture of how `let` variables work:
83+
Here's the bigger picture of what happens when a `let` changes:
8484

8585
![lexical environment](lexical-environment-global-2.png)
8686

@@ -89,7 +89,7 @@ Rectangles on the right-hand side demonstrate how the global Lexical Environment
8989
1. When the script starts, the Lexical Environment is empty.
9090
2. The `let phrase` definition appears. It has been assigned no value, so `undefined` is stored.
9191
3. `phrase` is assigned a value.
92-
4. `phrase` refers to a new value.
92+
4. `phrase` changes value.
9393

9494
Everything looks simple for now, right?
9595

@@ -147,7 +147,7 @@ So, during the function call we have two Lexical Environments: the inner one (fo
147147
148148
The inner Lexical Environment has a reference to the outer one.
149149
150-
**When the code wants to access a variable -- the inner Lexical Environment is searched first, then the outer one, then the more outer one and so on until the end of the chain.**
150+
**When the code wants to access a variable -- the inner Lexical Environment is searched first, then the outer one, then the more outer one and so on until the global one.**
151151
152152
If a variable is not found anywhere, that's an error in strict mode. Without `use strict`, an assignment to an undefined variable creates a new global variable, for backwards compatibility.
153153
@@ -309,12 +309,10 @@ alert( counter2() ); // 0 (independent)
309309
```
310310

311311

312-
Hopefully, the situation with outer variables is quite clear for you now. But in more complex situations a deeper understanding of internals may be required. So let's dive deeper.
312+
Hopefully, the situation with outer variables is clear now. For most situations such understanding is enough. There are few details in the specification that we omitted for brewity. So in the next section we cover even more details, not to miss anything.
313313

314314
## Environments in detail
315315

316-
Now that you understand how closures work generally, that's already very good.
317-
318316
Here's what's going on in the `makeCounter` example step-by-step, follow it to make sure that you know things in the very detail.
319317

320318
Please note the additional `[[Environment]]` property is covered here. We didn't mention it before for simplicity.
@@ -351,7 +349,7 @@ Please note the additional `[[Environment]]` property is covered here. We didn't
351349

352350
![](lexenv-nested-makecounter-3.png)
353351

354-
Please note that on this step the inner function was created, but not yet called. The code inside `function() { return count++; }` is not running; we're going to return it soon.
352+
Please note that on this step the inner function was created, but not yet called. The code inside `function() { return count++; }` is not running.
355353

356354
4. As the execution goes on, the call to `makeCounter()` finishes, and the result (the tiny nested function) is assigned to the global variable `counter`:
357355

@@ -451,7 +449,7 @@ Again, similarly to `if`, after the loop `i` is not visible.
451449

452450
We also can use a "bare" code block `{…}` to isolate variables into a "local scope".
453451

454-
For instance, in a web browser all scripts share the same global area. So if we create a global variable in one script, it becomes available to others. But that becomes a source of conflicts if two scripts use the same variable name and overwrite each other.
452+
For instance, in a web browser all scripts (except with `type="module"`) share the same global area. So if we create a global variable in one script, it becomes available to others. But that becomes a source of conflicts if two scripts use the same variable name and overwrite each other.
455453

456454
That may happen if the variable name is a widespread word, and script authors are unaware of each other.
457455

@@ -581,7 +579,7 @@ function f() {
581579
return function() { alert(value); };
582580
}
583581

584-
// 3 functions in array, every one of them links to Lexical Environment
582+
// 3 functions in array, every one of them links to Lexical Environment (LE for short)
585583
// from the corresponding f() run
586584
// LE LE LE
587585
let arr = [f(), f(), f()];

1-js/08-prototypes/01-prototype-inheritance/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ In JavaScript, objects have a special hidden property `[[Prototype]]` (as named
1212

1313
![prototype](object-prototype-empty.png)
1414

15-
That `[[Prototype]]` has a "magical" meaning. When we want to read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". Many cool language features and programming techniques are based on it.
15+
The prototype is a little bit "magical". When we want to read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". Many cool language features and programming techniques are based on it.
1616

1717
The property `[[Prototype]]` is internal and hidden, but there are many ways to set it.
1818

0 commit comments

Comments
 (0)