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/2-first-steps/15-function-expressions-arrows/article.md
+68-25Lines changed: 68 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,11 @@ function sayHi() {
10
10
}
11
11
```
12
12
13
-
There is another way of creating a function that is called *Function Expression*:
13
+
There is another way of creating a function that is called *Function Expression*.
14
+
15
+
[cut]
16
+
17
+
It looks like this:
14
18
15
19
```js
16
20
letsayHi=function() {
@@ -91,6 +95,68 @@ The answer is simple:
91
95
- The Function Expression appears in the context of the statement: `let sayHi = value;`. It's not a code block. The semicolon `;` is recommended at the end of statements, no matter what is the `value`. So the semicolon here is not related to Function Expression itself in any way, it just terminates the statement.
92
96
````
93
97
98
+
## Anonymous functions
99
+
100
+
Let's see an example where function expressions come really handy.
101
+
102
+
We'll write a function `ask(question, yes, no)` with three parameters:
103
+
104
+
`question`
105
+
: Text of the question
106
+
107
+
`yes`
108
+
: Function to run if the answer is "Yes"
109
+
110
+
`no`
111
+
: Function to run if the answer is "No"
112
+
113
+
The function should ask the `question` and, depending on the user's agreement, call `yes()` or `no()`:
114
+
115
+
```js run
116
+
*!*
117
+
functionask(question, yes, no) {
118
+
if (confirm(question)) yes()
119
+
elseno();
120
+
}
121
+
*/!*
122
+
123
+
functionshowOk() {
124
+
alert( "You agreed." );
125
+
}
126
+
127
+
functionshowCancel() {
128
+
alert( "You canceled the execution." );
129
+
}
130
+
131
+
// usage
132
+
ask("Do you agree?", showOk, showCancel);
133
+
```
134
+
135
+
The code looks kind of too simple, right? Why would anyone need such `ask`?
136
+
137
+
...It turns out that in the browser such functions are very required, the minor difference is that they ask not with a simple `confirm`, but output a much richer looking question window. But that's another story.
138
+
139
+
Right now let's see how we can write the same much shorter:
140
+
141
+
```js run no-beautify
142
+
functionask(question, yes, no) {
143
+
if (confirm(question)) yes()
144
+
elseno();
145
+
}
146
+
147
+
*!*
148
+
ask(
149
+
"Do you agree?",
150
+
function() { alert("You agreed."); },
151
+
function() { alert("You canceled the execution."); }
152
+
);
153
+
*/!*
154
+
```
155
+
156
+
Here functions are declared right inside the `ask(...)` call. They have no name (anonymous) and are not accessible outside of `ask`, but that's just what we need.
157
+
158
+
Such code appears very naturally, it's in the spirit of Javascript.
159
+
94
160
95
161
```smart header="A function is a value representing an \"action\""
96
162
Regular values like strings or numbers represent the *data*.
@@ -365,7 +431,7 @@ let sum = (a, b) => { // the figure bracket opens a multiline function
365
431
*!*
366
432
return result; // if we use figure brackets, must use return
367
433
*/!*
368
-
}
434
+
};
369
435
370
436
alert( sum(1, 2) ); // 3
371
437
```
@@ -376,29 +442,6 @@ Here we praised arrow functions for shortness. But that's not all! Arrow functio
376
442
As for now, we can already use them for one-line actions.
377
443
```
378
444
379
-
## new Function
380
-
381
-
And the last syntax for the functions:
382
-
```js
383
-
let func =newFunction('a, b', 'return a + b');
384
-
```
385
-
386
-
The major difference is that it creates a function literally from a string, at run time. See, both arguments are strings. The first one lists the arguments, while the second one is the function body.
387
-
388
-
All previous declarations required us, programmers, to write the function code in the script.
389
-
390
-
But `new Function` allows to turn any string into a function, for example we can receive a new function from the server and then execute it:
391
-
392
-
```js
393
-
let str =... receive the code from the server dynamically ...
394
-
395
-
let func =newFunction('', str);
396
-
func();
397
-
```
398
-
399
-
It is used in very specific cases, like when we receive the code from the server, or to dynamically compile a function from a template. The need for such uses arises at advanced stages of the development.
Copy file name to clipboardExpand all lines: 1-js/7-deeper/2-closure/8-make-army/solution.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
@@ -98,7 +98,7 @@ army[0](); // 0
98
98
army[5](); // 5
99
99
```
100
100
101
-
Look at the trick. The `while` loop just like `for`, makes a new Lexical Environment for each run. So we must make sure that it gets the right value for a `shooter` will access it.
101
+
Look at the trick. The `while` loop, just like `for`, makes a new Lexical Environment for each run. So we must make sure that it gets the right value for a `shooter` will access it.
102
102
103
-
We copy `let j = i`. This makes a loop-local `j` and copies the value of `i` to it. Primitives are copied "by value", so we actually get a complete independent copy of `i`, belonging to the current loop iteration.
103
+
We copy `let j = i`. This makes a loop body local `j` and copies the value of `i` to it. Primitives are copied "by value", so we actually get a complete independent copy of `i`, belonging to the current loop iteration.
0 commit comments