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
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/03-strict-mode/article.md
+10-2Lines changed: 10 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -53,9 +53,17 @@ For the future, when you use a browser console to test features, please note tha
53
53
54
54
Sometimes, when `use strict` makes a difference, you'll get incorrect results.
55
55
56
-
Even if we press `key:Shift+Enter` to input multiple lines, and put `use strict` on top, it doesn't work. That's because of how the console executes the code internally.
56
+
You can try to press `key:Shift+Enter` to input multiple lines, and put `use strict` on top, like this:
57
57
58
-
The reliable way to ensure `use strict` would be to input the code into console like this:
58
+
```js
59
+
'use strict'; <Shift+Enter for a newline>
60
+
// ...your code
61
+
<Enter to run>
62
+
```
63
+
64
+
It works in most browsers, namely Firefox and Chrome.
65
+
66
+
If it doesn't, the most reliable way to ensure `use strict` would be to input the code into console like this:
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/04-ninja-code/article.md
+4-5Lines changed: 4 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -137,7 +137,7 @@ Instead, reuse existing names. Just write new values into them.
137
137
138
138
In a function try to use only variables passed as parameters.
139
139
140
-
That would make it really hard to identify what's exactly in the variable *now*. And also where it comes from. A person with weak intuition would have to analyze the code line-by-line and track the changes through every code branch.
140
+
That would make it really hard to identify what's exactly in the variable *now*. And also where it comes from. The purpose is to develop the intuition and memory of a person reading the code. A person with weak intuition would have to analyze the code line-by-line and track the changes through every code branch.
141
141
142
142
**An advanced variant of the approach is to covertly (!) replace the value with something alike in the middle of a loop or a function.**
143
143
@@ -155,7 +155,7 @@ function ninjaFunction(elem) {
155
155
156
156
A fellow programmer who wants to work with `elem` in the second half of the function will be surprised... Only during the debugging, after examining the code they will find out that they're working with a clone!
157
157
158
-
Seen in code regularly. Deadly effective even against an experienced ninja.
158
+
Seen in code regularly. Deadly effective even against an experienced ninja.
159
159
160
160
## Underscores for fun
161
161
@@ -169,8 +169,7 @@ A smart ninja puts underscores at one spot of code and evades them at other plac
169
169
170
170
Let everyone see how magnificent your entities are! Names like `superElement`, `megaFrame` and `niceItem` will definitely enlighten a reader.
171
171
172
-
Indeed, from one hand, something is written: `super..`, `mega..`, `nice..` But from the other hand -- that brings no details. A reader may decide to look for a hidden meaning and meditate for an hour or two.
173
-
172
+
Indeed, from one hand, something is written: `super..`, `mega..`, `nice..` But from the other hand -- that brings no details. A reader may decide to look for a hidden meaning and meditate for an hour or two of their paid working time.
174
173
175
174
176
175
## Overlap outer variables
@@ -180,7 +179,7 @@ When in the light, can't see anything in the darkness.<br>
180
179
When in the darkness, can see everything in the light.
181
180
```
182
181
183
-
Use same names for variables inside and outside a function. As simple. No efforts required.
182
+
Use same names for variables inside and outside a function. As simple. No efforts to invent new names.
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/11-currying-partials/article.md
+10-15Lines changed: 10 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -170,7 +170,7 @@ To understand the benefits we definitely need a worthy real-life example.
170
170
171
171
Advanced currying allows the function to be both callable normally and partially.
172
172
173
-
For instance, we have the logging function `log(date, importance, message)` that formats and outputs the information. In real projects such functions also have many other useful features like sending logs over the network:
173
+
For instance, we have the logging function `log(date, importance, message)` that formats and outputs the information. In real projects such functions also have many other useful features like sending logs over the network, here we just use `alert`:
174
174
175
175
```js
176
176
functionlog(date, importance, message) {
@@ -184,34 +184,29 @@ Let's curry it!
184
184
log =_.curry(log);
185
185
```
186
186
187
-
After that `log` still works the normal way:
188
-
189
-
```js
190
-
log(newDate(), "DEBUG", "some debug");
191
-
```
192
-
193
-
...But also can be called in the curried form:
187
+
After that `log` work both the normal way and in the curried form:
Copy file name to clipboardExpand all lines: 1-js/11-async/03-promise-chaining/article.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -146,7 +146,7 @@ Returning promises allows us to build chains of asynchronous actions.
146
146
147
147
## Example: loadScript
148
148
149
-
Let's use this feature with `loadScript` to load scripts one by one, in sequence:
149
+
Let's use this feature with the promisified `loadScript`, defined in the [previous chapter](/promise-basics#loadscript), to load scripts one by one, in sequence:
The code works, see comments about the details, but it should be quite self-descriptive. Although, there's a potential problem in it, a typical error of those who begin to use promises.
308
+
The code works, see comments about the details. Although, there's a potential problem in it, a typical error of those who begin to use promises.
309
309
310
310
Look at the line `(*)`: how can we do something *after* the avatar has finished showing and gets removed? For instance, we'd like to show a form for editing that user or something else. As of now, there's no way.
Copy file name to clipboardExpand all lines: 1-js/11-async/07-microtask-queue/article.md
-1Lines changed: 0 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -124,7 +124,6 @@ Naturally, `promise` shows up first, because `setTimeout` macrotask awaits in th
124
124
125
125
As a logical consequence, macrotasks are handled only when promises give the engine a "free time". So if we have a chain of promise handlers that don't wait for anything, execute right one after another, then a `setTimeout` (or a user action handler) can never run in-between them.
126
126
127
-
128
127
## Unhandled rejection
129
128
130
129
Remember "unhandled rejection" event from the chapter <info:promise-error-handling>?
Copy file name to clipboardExpand all lines: 1-js/12-generators-iterators/2-async-iterators-generators/article.md
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,13 +3,13 @@
3
3
4
4
Asynchronous iterators allow to iterate over data that comes asynchronously, on-demand.
5
5
6
-
For instance, when we download something chunk-by-chunk, or just expect events to come asynchronously and would like to iterate over them -- async iterators and generators may come in handy. Let's see a simple example first, to grasp the syntax, and then review a real-life use case.
6
+
For instance, when we download something chunk-by-chunk, and expect data fragments to come asynchronously and would like to iterate over them -- async iterators and generators may come in handy. Let's see a simple example first, to grasp the syntax, and then review a real-life use case.
7
7
8
8
## Async iterators
9
9
10
-
Asynchronous iterators are totally similar to regular iterators, with a few syntactic differences.
10
+
Asynchronous iterators are similar to regular iterators, with a few syntactic differences.
11
11
12
-
"Regular" iterable object from the chapter <info:iterable> look like this:
12
+
"Regular" iterable object, as described in the chapter <info:iterable>, look like this:
13
13
14
14
```js run
15
15
let range = {
@@ -101,7 +101,7 @@ let range = {
101
101
})()
102
102
```
103
103
104
-
As we can see, the components are similar to regular iterators:
104
+
As we can see, the structure is similar to regular iterators:
105
105
106
106
1. To make an object asynchronously iterable, it must have a method `Symbol.asyncIterator``(1)`.
107
107
2. It must return the object with `next()` method returning a promise `(2)`.
@@ -117,22 +117,22 @@ Here's a small cheatsheet:
117
117
| to loop, use |`for..of`|`for await..of`|
118
118
119
119
120
-
````warn header="The spread operator doesn't work asynchronously"
120
+
````warn header="The spread operator ... doesn't work asynchronously"
121
121
Features that require regular, synchronous iterators, don't work with asynchronous ones.
122
122
123
123
For instance, a spread operator won't work:
124
124
```js
125
125
alert( [...range] ); // Error, no Symbol.iterator
126
126
```
127
127
128
-
That's natural, as it expects to find `Symbol.iterator`, same as `for..of` without `await`.
128
+
That's natural, as it expects to find `Symbol.iterator`, same as `for..of` without `await`. Not `Symbol.asyncIterator`.
129
129
````
130
130
131
131
## Async generators
132
132
133
-
JavaScript also provides generators, that are also iterable.
133
+
As we already know, JavaScript also supprots generators, and they are iterable.
134
134
135
-
Let's recall a sequence generator from the chapter [](info:generators). It generates a sequence of values from `start` to `end` (could be anything else):
135
+
Let's recall a sequence generator from the chapter [](info:generators). It generates a sequence of values from `start` to `end`:
136
136
137
137
```js run
138
138
function*generateSequence(start, end) {
@@ -147,7 +147,7 @@ for(let value of generateSequence(1, 5)) {
147
147
```
148
148
149
149
150
-
Normally, we can't use `await` in generators. All values must come synchronously: there's no place for delay in `for..of`.
150
+
Normally, we can't use `await` in generators. All values must come synchronously: there's no place for delay in `for..of`, it's a synchronous construct.
151
151
152
152
But what if we need to use `await` in the generator body? To perform network requests, for instance.
153
153
@@ -184,15 +184,15 @@ It's indeed very simple. We add the `async` keyword, and the generator now can u
184
184
185
185
Technically, another the difference of an async generator is that its `generator.next()` method is now asynchronous also, it returns promises.
186
186
187
-
Instead of `result = generator.next()`for a regular, non-async generator, values can be obtained like this:
187
+
In a regular generator we'd use `result = generator.next()`to get values. In an async generator, we should add `await`, like this:
188
188
189
189
```js
190
190
result =awaitgenerator.next(); // result = {value: ..., done: true/false}
191
191
```
192
192
193
193
## Iterables via async generators
194
194
195
-
When we'd like to make an object iterable, we should add `Symbol.iterator` to it.
195
+
As we already know, to make an object iterable, we should add `Symbol.iterator` to it.
196
196
197
197
```js
198
198
let range = {
@@ -270,7 +270,7 @@ The pattern is very common, it's not about users, but just about anything. For i
270
270
- It responds with a JSON of 30 commits, and also provides a link to the next page in the `Link` header.
271
271
- Then we can use that link for the next request, to get more commits, and so on.
272
272
273
-
What we'd like to have is an iterable source of commits, so that we could use it like this:
273
+
What we'd like to have is a simpler API: an iterable object with commits, so that we could go over them like this:
274
274
275
275
```js
276
276
let repo ='javascript-tutorial/en.javascript.info'; // GitHub repository to get commits from
@@ -332,7 +332,7 @@ An example of use (shows commit authors in console):
332
332
})();
333
333
```
334
334
335
-
That's just what we wanted. The internal pagination mechanics is invisible from the outside. For us it's just an async generator that returns commits.
335
+
That's just what we wanted. The internal mechanics of paginated requests is invisible from the outside. For us it's just an async generator that returns commits.
336
336
337
337
## Summary
338
338
@@ -356,6 +356,6 @@ Syntax differences between async and regular generators:
356
356
357
357
In web-development we often meet streams of data, when it flows chunk-by-chunk. For instance, downloading or uploading a big file.
358
358
359
-
We could use async generators to process such data, but there's also another API called Streams, that may be more convenient, as it provides special interfaces to transform the data and to pass it from one stream to another (e.g. download from one place and immediately send elsewhere). But they are also more complex.
359
+
We can use async generators to process such data, but it's worth to mention that there's also another API called Streams, that provides special interfaces to transform the data and to pass it from one stream to another (e.g. download from one place and immediately send elsewhere).
360
360
361
361
Streams API not a part of JavaScript language standard. Streams and async generators complement each other, both are great ways to handle async data flows.
Copy file name to clipboardExpand all lines: 2-ui/1-document/08-styles-and-classes/article.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -66,10 +66,10 @@ So we can operate both on the full class string using `className` or on individu
66
66
Methods of `classList`:
67
67
68
68
-`elem.classList.add/remove("class")` -- adds/removes the class.
69
-
-`elem.classList.toggle("class")` -- if the class exists, then removes it, otherwise adds it.
69
+
-`elem.classList.toggle("class")` -- adds the class if it doesn't exist, otherwise removes it.
70
70
-`elem.classList.contains("class")` -- returns `true/false`, checks for the given class.
71
71
72
-
Besides that, `classList` is iterable, so we can list all classes like this:
72
+
Besides, `classList` is iterable, so we can list all classes with `for..of`, like this:
73
73
74
74
```html run
75
75
<bodyclass="main page">
@@ -147,7 +147,7 @@ To set the full style as a string, there's a special property `style.cssText`:
147
147
</script>
148
148
```
149
149
150
-
We rarely use it, because such assignment removes all existing styles: it does not add, but replaces them. May occasionally delete something needed. But still can be done for new elements when we know we won't delete something important.
150
+
This property is rarely used, because such assignment removes all existing styles: it does not add, but replaces them. May occasionally delete something needed. But we can safely use it for new elements, when we know we won't delete an existing style.
151
151
152
152
The same can be accomplished by setting an attribute: `div.setAttribute('style', 'color: red...')`.
0 commit comments