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/03-code-quality/06-polyfills/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
@@ -1,9 +1,9 @@
1
1
2
2
# Polyfills
3
3
4
-
The JavaScript language steadily evolves. The new proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended to the list at <https://tc39.github.io/ecma262/> and then progress to the [specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
4
+
The JavaScript language steadily evolves. New proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended to the list at <https://tc39.github.io/ecma262/> and then progress to the [specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm).
5
5
6
-
Teams behind JavaScript engines have their own ideas about what to implement first. It may decide to implement proposals that are in draft and postpone things that are already in the spec, because they are less interesting or just harder to do.
6
+
Teams behind JavaScript engines have their own ideas about what to implement first. They may decide to implement proposals that are in draft and postpone things that are already in the spec, because they are less interesting or just harder to do.
7
7
8
8
So it's quite common for an engine to implement only the part of the standard.
9
9
@@ -23,7 +23,7 @@ Actually, there are two parts in Babel:
23
23
24
24
2. Second, the polyfill.
25
25
26
-
The transpiler rewrites the code, so syntax features are covered. But for new functions we need to add a special script that implements them. JavaScript is a highly dynamic language, scripts may not just add new functions, but also modify built-in ones, so that they behave according to the modern standard.
26
+
The transpiler rewrites the code, so syntax features are covered. But for new functions we need to write a special script that implements them. JavaScript is a highly dynamic language, scripts may not just add new functions, but also modify built-in ones, so that they behave according to the modern standard.
27
27
28
28
There's a term "polyfill" for scripts that "fill in" the gap and add missing implementations.
Copy file name to clipboardExpand all lines: 8-async/01-callback-hell/article.md
+54-47Lines changed: 54 additions & 47 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,17 +5,42 @@ Many things that we do in JavaScript are asynchronous. We initiate a process, bu
5
5
6
6
The most obvious example is `setTimeout`, but there are others, like making network requests, performing animations and so on.
7
7
8
-
Let's see a couple of examples, so that we can discover a problem, and then solve it using "promises".
9
-
10
8
[cut]
11
9
12
10
## Callbacks
13
11
14
-
Remember resource load/error events? They are covered in the chapter <info:onload-onerror>.
12
+
Consider this function `loadScript(src)` that loads a script:
13
+
14
+
```js
15
+
functionloadScript(src) {
16
+
let script =document.createElement('script');
17
+
script.src= src;
18
+
document.head.append(script);
19
+
}
20
+
```
21
+
22
+
When the script element is added to the document, the browser loads it and executes. So, the function works.
23
+
24
+
We can use it like this:
25
+
26
+
```js
27
+
// loads and executes the script
28
+
loadScript('/my/script.js');
29
+
```
30
+
31
+
The function is asynchronous: the script starts loading now, but finishes later.
32
+
33
+
```smart header="Synchronous vs asynchronous"
34
+
"Synchonous" and "asynchronous" are general programming terms, not specific to JavaScript.
35
+
36
+
A *synchronous* action suspends the execution until it's completed. For instance, `alert` and `prompt` are synchronous: the program may not continue until they are finished.
37
+
38
+
An *asynchronous* action allows the program to continue while it's in progress. For instance, `loadScript` in the example above initiates the script loading, but does not suspend the execution. Other commands may execute while the script is loading.
39
+
```
15
40
16
-
Let's say we want to create a function `loadScript` that loads a script and executes our code afterwards.
41
+
As of now, `loadScript` provides no way to track the load end. How can we execute our own code after the script is loaded?
17
42
18
-
It can look like this:
43
+
Let's allow that by adding a custom function as a second argument to `loadScript`, that should execute at that moment:
...And it works, shows `alert` after the script is loaded.
40
-
41
-
That is called "a callback API". Our function `loadScript` performs an asynchronous task and we can hook on its completion using the callback function.
64
+
...And it works, shows the `alert` after the script is loaded.
42
65
43
66
## Callback in callback
44
67
45
-
What if we need to load two scripts: one more after the first one?
68
+
What if we need to load two scripts sequentially: the first one, and then the second one after it?
46
69
47
-
We can put another`loadScript` inside the callback, like this:
70
+
We can put the second`loadScript` inside the callback, like this:
48
71
49
72
```js
50
73
loadScript('/my/script.js', function(script) {
74
+
51
75
alert(`Cool, the ${script.src} is loaded, let's load one more`);
The first argument of `callback` is reserved for errors and the second argument for the successful result. That allows to use a single function to pass both success and failure.
143
+
The first argument of `callback` is reserved for errors, and the second argument is for the successful result.
120
144
121
145
## Pyramid of doom
122
146
123
-
From the first look it's a viable code. And indeed it is. For one or maybe two nested calls it looks fine.
147
+
What we've just seen is called a "callback-based" approach to asynchronous programming. We pass a function, and it should run after the process is complete: with an error or a successful result.
148
+
149
+
From the first look it's a viable way of asynchronous coding. And indeed it is. For one or maybe two nested calls it looks fine.
124
150
125
-
But for multiple asynchronous actions that follow one after another...
151
+
But for multiple asynchronous actions that follow one after another we'll have a code like this:
1.we load `/my/script1.js`, then if there's no error
157
-
2.we load `/my/script2.js`, then if there's no error
158
-
3.we load `/my/script3.js`, then if there's no error -- do something else `(*)`.
182
+
1.We load `1.js`, then if there's no error.
183
+
2.We load `2.js`, then if there's no error.
184
+
3.We load `3.js`, then if there's no error -- do something else `(*)`.
159
185
160
-
The nested calls become increasingly more difficult to manage, especially if we add real code instead of `...`, that may include more loops, conditional statements and other usage of loaded scripts.
186
+
As calls become more nested, the whole thing becomes increasingly more difficult to manage, especially if we add real code instead of `...`, that may include more loops, conditional statements and other usage of loaded scripts.
161
187
162
188
That's sometimes called "callback hell" or "pyramid of doom".
163
189
164
190
165
191
166
-
See? It grows right with every asynchronous action.
167
-
168
-
Compare that with a "regular" synchronous code.
169
-
170
-
Just *if*`loadScript` were a regular synchronous function:
171
-
172
-
```js
173
-
try {
174
-
// assume we get the result in a synchronous manner, without callbacks
175
-
let script =loadScript('/my/script.js');
176
-
// ...
177
-
let script2 =loadScript('/my/script2.js');
178
-
// ...
179
-
let script3 =loadScript('/my/script3.js');
180
-
} catch(err) {
181
-
handleError(err);
182
-
}
183
-
```
184
-
185
-
How much cleaner and simpler it is!
192
+
The pyramid grows to the right with every asynchronous action. Soon it spirales out of control.
186
193
187
-
Promises allow to write asynchronous code in a similar way. They are really great at that. Let's study them in the next chapter.
194
+
Fortunately, there are ways to evade such pyramids. One of them is using "promises", we'll study them in the next chapters.
0 commit comments