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/15-function-expressions-arrows/article.md
+27-28Lines changed: 27 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -135,13 +135,11 @@ function showCancel() {
135
135
ask("Do you agree?", showOk, showCancel);
136
136
```
137
137
138
-
Before we explore how we can write it in a much shorter way, let's note that in the browser (and on the server-side in some cases) such functions are quite popular.
138
+
Before we explore how we can write it in a much shorter way, let's note that in the browser (and on the server-side in some cases) such functions are quite popular. The major difference between a real-life implementation and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such a function usually draws a nice-looking question window. But that's another story.
139
139
140
-
The major difference between a real-life implementation and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such a function usually draws a nice-looking question window. But that's another story.
140
+
**The arguments of `ask` are called *callback functions* or just *callbacks*.**
141
141
142
-
**The arguments of `ask` are called *callback functions* or just *callbacks*. The idea is that we pass a function and expect it to be "called back" in certain circumstances.**
143
-
144
-
So, `showOk` becomes the callback for the "yes" answer, and `showCancel` for the "no" answer.
142
+
The idea is that we pass a function and expect it to be "called back" later if necessary. In our case, `showOk` becomes the callback for the "yes" answer, and `showCancel` for the "no" answer.
145
143
146
144
We can use Function Expressions to write the same function much shorter:
147
145
@@ -160,6 +158,7 @@ ask(
160
158
*/!*
161
159
```
162
160
161
+
163
162
Here, functions are declared right inside the `ask(...)` call. They have no name, and so are called *anonymous*. Such functions are not accessible outside of `ask` (because they are not assigned to variables), but that's just what we want here.
164
163
165
164
Such code appears in our scripts very naturally, it's in the spirit of JavaScript.
@@ -242,10 +241,7 @@ let sayHi = function(name) { // (*) no magic any more
242
241
243
242
Function Expressions are created when the execution reaches them. That would happen only in the line `(*)`. Too late.
244
243
245
-
246
-
### Function Declaration in a block
247
-
248
-
When a Function Declaration is made within a code block, it is visible everywhere inside that block. But not outside of it.
244
+
**When a Function Declaration is made within a code block, it is visible everywhere inside that block. But not outside of it.**
249
245
250
246
Sometimes that's handy to declare a local function only needed in that block alone. But that feature may also cause problems.
251
247
@@ -256,6 +252,7 @@ The code below doesn't work:
256
252
```js run
257
253
let age =prompt("What is your age?", 18);
258
254
255
+
// conditionally declare a function
259
256
if (age <18) {
260
257
261
258
functionwelcome() {
@@ -270,14 +267,15 @@ if (age < 18) {
270
267
271
268
}
272
269
270
+
// ...use it later
273
271
*!*
274
272
welcome(); // Error: welcome is not defined
275
273
*/!*
276
274
```
277
275
278
-
A Function Declaration is only visible inside the code block in which it resides.
276
+
That's because a Function Declaration is only visible inside the code block in which it resides.
279
277
280
-
We can call it from within the block, but not from outside:
278
+
Here's another example:
281
279
282
280
```js run
283
281
let age =16; // take 16 as an example
@@ -296,11 +294,10 @@ if (age < 18) {
296
294
*/!*
297
295
298
296
} else {
299
-
// \
300
-
functionwelcome() { // |
301
-
alert("Greetings!"); // | if age=16, the the execution does not go here,
302
-
} // | so this "welcome" is never created
303
-
// /
297
+
298
+
functionwelcome() { // for age = 16, this "welcome" is never created
299
+
alert("Greetings!");
300
+
}
304
301
}
305
302
306
303
// Here we're out of figure brackets,
@@ -313,7 +310,9 @@ welcome(); // Error: welcome is not defined
313
310
314
311
What can we do to make `welcome` visible outside of `if`?
315
312
316
-
The correct approach would be to use a Function Expression and assign `welcome` to the variable that is declared outside of `if` and has the proper visibility:
313
+
The correct approach would be to use a Function Expression and assign `welcome` to the variable that is declared outside of `if` and has the proper visibility.
314
+
315
+
Now it works as intended:
317
316
318
317
```js run
319
318
let age =prompt("What is your age?", 18);
@@ -354,7 +353,7 @@ welcome(); // ok now
354
353
```
355
354
356
355
357
-
```smart header="What to choose: Function Declaration or Function Expression?"
356
+
```smart header="When to choose Function Declaration versus Function Expression?"
358
357
As a rule of thumb, when we need to declare a function, the first to consider is Function Declaration syntax, the one we used before. It gives more freedom in how to organize our code, because we can call such functions before they are declared.
359
358
360
359
It's also a little bit easier to look up `function f(…) {…}` in the code than `let f = function(…) {…}`. Function Declarations are more "eye-catching".
@@ -365,7 +364,7 @@ It's also a little bit easier to look up `function f(…) {…}` in the code tha
365
364
366
365
## Arrow functions [#arrow-functions]
367
366
368
-
There's one more very simple and concise syntax for creating functions. It's called "arrow functions", because it looks like this:
367
+
There's one more very simple and concise syntax for creating functions, that's often better than Function Expressions. It's called "arrow functions", because it looks like this:
0 commit comments