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/06-advanced-functions/08-settimeout-setinterval/article.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -158,7 +158,7 @@ The `setTimeout` above schedules next call right at the end of the current one `
158
158
159
159
Recursive `setTimeout` is more flexible method than `setInterval`. This way the next call may be scheduled differently, depending on the results of the current one.
160
160
161
-
For instance, we need to write a service that each 5 seconds sends a request to server asking for data, but in case if the server is overloaded, it should increase the interval to 10, 20, 60 seconds...
161
+
For instance, we need to write a service that each 5 seconds sends a request to server asking for data, but in case the server is overloaded, it should increase the interval to 10, 20, 40 seconds...
162
162
163
163
Here's the pseudocode:
164
164
```js
@@ -226,7 +226,7 @@ And here is the picture for recursive `setTimeout`:
226
226
That's because a new call is planned at the end of the previous one.
227
227
228
228
````smart header="Garbage collection"
229
-
When a function is passed in `setInterval/setTimeout`, an internal reference is created to it and saved in the scheduler. It prevents the function form being garbage collected, even if there are no other references to it.
229
+
When a function is passed in `setInterval/setTimeout`, an internal reference is created to it and saved in the scheduler. It prevents the function from being garbage collected, even if there are no other references to it.
230
230
231
231
```js
232
232
// the function stays in memory until the scheduler calls it
@@ -391,7 +391,7 @@ For server-side JavaScript, that limitation does not exist, and there exist othe
391
391
392
392
Another benefit for in-browser scripts is that they can show a progress bar or something to the user. That's because the browser usually does all "repainting" after the script is complete.
393
393
394
-
So if we do a single huge function then even it changes something, the changes are not reflected in the document till it finishes.
394
+
So if we do a single huge function then even if it changes something, the changes are not reflected in the document till it finishes.
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ importance: 5
6
6
7
7
Create a "throttling" decorator `throttle(f, ms)` -- that returns a wrapper, passing the call to `f` at maximum once per `ms` milliseconds. Those calls that fall into the "cooldown" period, are ignored.
8
8
9
-
**The differnce from`debounce` -- if an ignored call is the last during the cooldown, then it executes at the end of the delay.**
9
+
**The difference with`debounce` -- if an ignored call is the last during the cooldown, then it executes at the end of the delay.**
10
10
11
11
Let's check the real-life application to better understand that requirement and to see where it comes from.
12
12
@@ -45,4 +45,4 @@ f1000(3); // (throttling, 1000ms not out yet)
45
45
// ...outputs 3, intermediate value 2 was ignored
46
46
```
47
47
48
-
P.S. Arguments and the context `this` passed to `f1000` should be passed to the original `f`.
48
+
P.S. Arguments and the context `this` passed to `f1000` should be passed to the original `f`.
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/09-call-apply-decorators/article.md
+11-11
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ JavaScript gives exceptional flexibility when dealing with functions. They can b
8
8
9
9
Let's say we have a function `slow(x)` which is CPU-heavy, but its results are stable. In other words, for the same `x` it always returns the same result.
10
10
11
-
If the function is called often, we may want to cache (remember) the results for different `x` to evade spending extra-time on recalculations.
11
+
If the function is called often, we may want to cache (remember) the results for different `x` to avoid spending extra-time on recalculations.
12
12
13
13
But instead of adding that functionality into `slow()` we'll create a wrapper. As we'll see, there are many benefits of doing so.
The error occurs in the line `(*)` that tries to access `this.someMethod` and fails. Guess you can see, why?
113
+
The error occurs in the line `(*)` that tries to access `this.someMethod` and fails. Can you see why?
114
114
115
-
The reason is that the wrapper calls the original function as `func(x)` in the line `(**)`. And, when called like this, the function gets `this = undefined`.
115
+
The reason is that the wrapper calls the original function as `func(x)` in the line `(**)`. And, when called like that, the function gets `this = undefined`.
116
116
117
-
As if we run:
117
+
We would observe a similar symptom if we tried to run:
118
118
119
119
```js
120
120
let func =worker.slow;
@@ -133,7 +133,7 @@ The syntax is:
133
133
func.call(context, arg1, arg2, ...)
134
134
```
135
135
136
-
It runs the `func` providing the first argument as `this`, and the next as the arguments.
136
+
It runs `func` providing the first argument as `this`, and the next as the arguments.
137
137
138
138
To put it simple, these two calls do almost the same:
For our case, we can use `call` in the wrapper to pass the context to the original function:
176
+
In our case, we can use `call` in the wrapper to pass the context to the original function:
177
177
178
178
179
179
```js run
@@ -210,7 +210,7 @@ alert( worker.slow(2) ); // works, doesn't call the original (cached)
210
210
211
211
Now everything is fine.
212
212
213
-
To put all clear, let's see more deeply how `this` is passed along:
213
+
To make it all clear, let's see more deeply how `this` is passed along:
214
214
215
215
1. After the decoration `worker.slow` is now the wrapper `function (x) { ... }`.
216
216
2. So when `worker.slow(2)` is executed, the wrapper gets `2` as an argument and `this=worker` (it's the object before dot).
@@ -305,11 +305,11 @@ If we look more closely, there's a minor difference between such uses of `call`
305
305
- The spread operator `...` allows to pass *iterable*`args` as the list to `call`.
306
306
- The `apply` accepts only *array-like*`args`.
307
307
308
-
So, these calls complement to each other. Where we expect an iterable, `call` works, where we expect an array-like, `apply` works.
308
+
So, these calls complement each other. Where we expect an iterable, `call` works, where we expect an array-like, `apply` works.
309
309
310
310
And if `args` is both iterable and array-like, like a real array, then we technically could use any of them, but `apply` will probably be faster, because it's a single operation. Most JavaScript engines internally optimize is better than a pair `call + spread`.
311
311
312
-
One of most important uses of `apply` is passing the call to another function, like this:
312
+
One of the most important uses of `apply` is passing the call to another function, like this:
313
313
314
314
```js
315
315
letwrapper=function() {
@@ -438,7 +438,7 @@ So, technically it takes `this` and joins `this[0]`, `this[1]` ...etc together.
438
438
439
439
*Decorator* is a wrapper around a function that alters its behavior. The main job is still carried out by the function.
440
440
441
-
It is generally safe to replace a function or a method with decorated one, except for one little thing. If the original function had properties on it, like `func.calledCount` or whatever, then the decorated one will not provide them. Because that is a wrapper. So one need to be careful if he uses them. Some decorators provide their own properties.
441
+
It is generally safe to replace a function or a method with a decorated one, except for one little thing. If the original function had properties on it, like `func.calledCount` or whatever, then the decorated one will not provide them. Because that is a wrapper. So one need to be careful if one uses them. Some decorators provide their own properties.
442
442
443
443
Decorators can be seen as "features" or "aspects" that can be added to a function. We can add one or add many. And all this without changing its code!
444
444
@@ -458,4 +458,4 @@ let wrapper = function() {
458
458
We also saw an example of *method borrowing* when we take a method from an object and `call` it in the context of another object. It is quite common to take array methods and apply them to arguments. The alternative is to use rest parameters object that is a real array.
459
459
460
460
461
-
There are many decorators there in the wilds. Check how well you got them by solving the tasks of this chapter.
461
+
There are many decorators there in the wild. Check how well you got them by solving the tasks of this chapter.
The exotic [bound function](https://tc39.github.io/ecma262/#sec-bound-function-exotic-objects) object returned by `f.bind(...)` remembers the context (and arguments if provided) only at the creation time.
13
+
The exotic [bound function](https://tc39.github.io/ecma262/#sec-bound-function-exotic-objects) object returned by `f.bind(...)` remembers the context (and arguments if provided) only at creation time.
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/11-currying-partials/article.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -105,7 +105,7 @@ The result of `partial(func[, arg1, arg2...])` call is a wrapper `(*)` that call
105
105
- Then gives it `...argsBound` -- arguments from the `partial` call (`"10:00"`)
106
106
- Then gives it `...args` -- arguments given to the wrapper (`"Hello"`)
107
107
108
-
So easy to do it the spread operator, right?
108
+
So easy to do it with the spread operator, right?
109
109
110
110
Also there's a ready [_.partial](https://lodash.com/docs#partial) implementation from lodash library.
111
111
@@ -160,7 +160,7 @@ function curry(f) {
160
160
161
161
Advanced currying allows both to keep the function callable normally and to get partials easily. To understand the benefits we definitely need a worthy real-life example.
162
162
163
-
For instance, we have the logging function `log(date, importance, message)` that formats and output the information. In real projects such functions also have many other useful features like: sending it over the network or filtering:
163
+
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 it over the network or filtering:
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/12-arrow-functions/article.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -125,4 +125,4 @@ Arrow functions:
125
125
- Can't be called with `new`.
126
126
- (They also don't have `super`, but we didn't study it. Will be in the chapter <info:class-inheritance>).
127
127
128
-
That's because they are meant for short pieces of code that does not have the own "context", but rather works in the current one. And they really shine in that use case.
128
+
That's because they are meant for short pieces of code that does not have their own "context", but rather works in the current one. And they really shine in that use case.
0 commit comments