Skip to content

Commit edbe004

Browse files
committed
readability
1 parent 9bf0153 commit edbe004

File tree

1 file changed

+27
-28
lines changed
  • 1-js/02-first-steps/15-function-expressions-arrows

1 file changed

+27
-28
lines changed

1-js/02-first-steps/15-function-expressions-arrows/article.md

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -135,13 +135,11 @@ function showCancel() {
135135
ask("Do you agree?", showOk, showCancel);
136136
```
137137

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.
139139

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*.**
141141

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.
145143

146144
We can use Function Expressions to write the same function much shorter:
147145

@@ -160,6 +158,7 @@ ask(
160158
*/!*
161159
```
162160

161+
163162
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.
164163

165164
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
242241

243242
Function Expressions are created when the execution reaches them. That would happen only in the line `(*)`. Too late.
244243

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.**
249245

250246
Sometimes that's handy to declare a local function only needed in that block alone. But that feature may also cause problems.
251247

@@ -256,6 +252,7 @@ The code below doesn't work:
256252
```js run
257253
let age = prompt("What is your age?", 18);
258254

255+
// conditionally declare a function
259256
if (age < 18) {
260257

261258
function welcome() {
@@ -270,14 +267,15 @@ if (age < 18) {
270267

271268
}
272269

270+
// ...use it later
273271
*!*
274272
welcome(); // Error: welcome is not defined
275273
*/!*
276274
```
277275

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.
279277

280-
We can call it from within the block, but not from outside:
278+
Here's another example:
281279

282280
```js run
283281
let age = 16; // take 16 as an example
@@ -296,11 +294,10 @@ if (age < 18) {
296294
*/!*
297295

298296
} else {
299-
// \
300-
function welcome() { // |
301-
alert("Greetings!"); // | if age=16, the the execution does not go here,
302-
} // | so this "welcome" is never created
303-
// /
297+
298+
function welcome() { // for age = 16, this "welcome" is never created
299+
alert("Greetings!");
300+
}
304301
}
305302

306303
// Here we're out of figure brackets,
@@ -313,7 +310,9 @@ welcome(); // Error: welcome is not defined
313310

314311
What can we do to make `welcome` visible outside of `if`?
315312

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:
317316

318317
```js run
319318
let age = prompt("What is your age?", 18);
@@ -354,7 +353,7 @@ welcome(); // ok now
354353
```
355354

356355

357-
```smart header="What to choose: Function Declaration or Function Expression?"
356+
```smart header="When to choose Function Declaration versus Function Expression?"
358357
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.
359358
360359
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
365364

366365
## Arrow functions [#arrow-functions]
367366

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:
369368

370369

371370
```js
@@ -382,22 +381,22 @@ let func = function(arg1, arg2, ...argN) {
382381
}
383382
```
384383

385-
...But much shorter.
384+
...But much more concise.
386385

387386
Let's see an example:
388387

389388
```js run
390389
let sum = (a, b) => a + b;
391390

392-
alert( sum(1, 2) ); // 3
393-
```
394-
395-
Here the arrow function is a shorter form of:
391+
/* The arrow function is a shorter form of:
396392
397-
```js
398393
let sum = function(a, b) {
399394
return a + b;
400395
};
396+
*/
397+
398+
alert( sum(1, 2) ); // 3
399+
401400
```
402401

403402
If we have only one argument, then parentheses can be omitted, making that even shorter:
@@ -412,7 +411,7 @@ let double = n => n*2;
412411
alert( double(3) ); // 6
413412
```
414413

415-
If there are no arguments, we can insert empty parentheses:
414+
If there are no arguments, parentheses should be empty (but they should be present):
416415

417416
```js run
418417
let sayHi = () => alert("Hello!");
@@ -434,9 +433,9 @@ let welcome = (age < 18) ?
434433
welcome(); // ok now
435434
```
436435

437-
The syntax may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.
436+
Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.
438437

439-
Arrow functions are very convenient for simple one-line actions, when we're just too lazy to write many words.
438+
They are very convenient for simple one-line actions, when we're just too lazy to write many words.
440439

441440
```smart header="Multiline arrow functions"
442441

0 commit comments

Comments
 (0)