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
+32-32Lines changed: 32 additions & 32 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -60,13 +60,13 @@ sayHi(); // Hello // прежняя тоже работает (почем
60
60
61
61
Давайте детально разберём всё, что тут произошло:
62
62
63
-
1.*Function Declaration*`(1)` создало функцию и присвоило её значение переменной с именем `sayHi`.
63
+
1. Function Declaration `(1)` создало функцию и присвоило её значение переменной с именем `sayHi`.
64
64
2. В строке `(2)` мы скопировали её значение в переменную `func`.
65
65
66
66
Обратите внимание (ещё раз): нет круглых скобок после `sayHi`. Если бы они были, то выражение `func = sayHi()` "записало" бы *результат вызова*`sayHi()` в переменную `func`, а не саму *функцию*`sayHi`.
67
67
3. Теперь функция может быть вызвана с помощью обеих переменных `sayHi()` и `func()`.
68
68
69
-
Заметьте, что мы можем использовать и *Function Expression* чтобы создать `sayHi`, в первой строке:
69
+
Заметьте, что мы можем использовать и Function Expression чтобы создать `sayHi`, в первой строке:
70
70
71
71
```js
72
72
letsayHi=function() { ... };
@@ -79,7 +79,7 @@ let func = sayHi;
79
79
80
80
81
81
````smart header="Зачем нужна точка с запятой в конце?"
82
-
У вас мог возникнуть вопрос: Почему в *Function Expression* ставится точка с запятой `;` на конце, а в *Function Declaration* нет:
82
+
У вас мог возникнуть вопрос: Почему в Function Expression ставится точка с запятой `;` на конце, а в Function Declaration нет:
83
83
84
84
```js
85
85
function sayHi() {
@@ -93,7 +93,7 @@ let sayHi = function() {
93
93
94
94
Ответ прост:
95
95
- Нет необходимости в закрывающей `;` блоков кода и синтаксических конструкций, использующих их, таких как `if { ... }`, `for { }`, `function f { }` и т.д.
96
-
- *Function Expression* использует внутри себя инструкцию: `let sayHi = ...;`, как значение. Это не является блоком кода. И точки с запятой `;` рекомендуется ставить на конце инструкций, не зависимо от их значений. Таким образом, точка с запятой не относится непосредственно к *Function Expression*, оно лишь выполняет внутри себя инструкцию.
96
+
- Function Expression использует внутри себя инструкцию: `let sayHi = ...;`, как значение. Это не является блоком кода. И точки с запятой `;` рекомендуется ставить на конце инструкций, не зависимо от их значений. Таким образом, точка с запятой не относится непосредственно к Function Expression, оно лишь выполняет внутри себя инструкцию.
Ключевая идея в том, что мы передаём функцию и ожидаем, что она вызовется обратно ("called back") когда-нибудь позже, если это будет необходимо. В нашем случае, `showOk` становится *колбэком*' для ответа "yes", а `showCancel` -- для ответа "no".
141
141
142
-
Мы можем переписать этот пример значительно короче, используя *Function Expression*:
142
+
Мы можем переписать этот пример значительно короче, используя Function Expression:
143
143
144
144
```js run no-beautify
145
145
functionask(question, yes, no) {
@@ -172,21 +172,21 @@ ask(
172
172
```
173
173
174
174
175
-
## *Function Expression* в сравнении с *Function Declaration*
175
+
## Function Expression в сравнении с Function Declaration
176
176
177
-
Давайте разберём ключевые отличия *Function Declaration* от *Function Expression*.
177
+
Давайте разберём ключевые отличия Function Declaration от Function Expression.
178
178
179
179
Во-первых, синтаксис: как мы можем видеть это из кода.
180
180
181
-
- В случае *Function Declaration*: функция объявляется, как отдельная инструкция в основном потоке кода.
181
+
- В случае Function Declaration: функция объявляется, как отдельная инструкция в основном потоке кода.
182
182
183
183
```js
184
184
// Function Declaration
185
185
functionsum(a, b) {
186
186
return a + b;
187
187
}
188
188
```
189
-
- В случае с *Function Expression*: функция создаётся внутри выражения или другой синтаксической конструкции. В данном случае функция создаётся в правой части "выражения присваивания"`=`:
189
+
- В случае с Function Expression: функция создаётся внутри выражения или другой синтаксической конструкции. В данном случае функция создаётся в правой части "выражения присваивания"`=`:
190
190
191
191
```js
192
192
// Function Expression
@@ -197,19 +197,19 @@ ask(
197
197
198
198
Более тонкое отличие состоит, в том, *когда* создаётся функция движком JavaScript.
199
199
200
-
***Function Expression* создаётся, когда выполнение доходит до него, и затем уже может использоваться.**
200
+
**Function Expression создаётся, когда выполнение доходит до него, и затем уже может использоваться.**
201
201
202
202
После того, как поток выполнения достигнет правой части выражения присваивания `let sum = function…`-- с этого момента, функция считается созданной и может быть использована (присвоена переменной, вызвана и т.д. ).
203
203
204
-
С *Function Declaration* всё иначе.
204
+
С Function Declaration всё иначе.
205
205
206
-
***Function Declaration* применимо ко всему скрипту или блоку кода.**
206
+
**Function Declaration применимо ко всему скрипту или блоку кода.**
207
207
208
-
Другими словами, когда движок JavaScript *подготавливает* к выполнению скрипт или блок кода, прежде всего в нём происходит поиск *Function Declaration*, а затем инициализируются все найденные функции, созданные таким образом. Можно считать этот процесс "стадией инициализации".
208
+
Другими словами, когда движок JavaScript *подготавливает* к выполнению скрипт или блок кода, прежде всего в нём происходит поиск Function Declaration, а затем инициализируются все найденные функции, созданные таким образом. Можно считать этот процесс "стадией инициализации".
209
209
210
210
И только после того, как все объявленные функции будут обработаны, продолжиться выполнение остального кода.
211
211
212
-
В результате, функции, созданные, как *Function Declaration* могут быть вызваны раньше своих определений.
212
+
В результате, функции, созданные, как Function Declaration могут быть вызваны раньше своих определений.
213
213
214
214
Например, так будет работать:
215
215
@@ -223,9 +223,9 @@ function sayHi(name) {
223
223
}
224
224
```
225
225
226
-
*Function Declaration*`sayHi` было создано, когда движок JavaScript подготавливал скрипт к выполнению, и такая функция видна повсюду в этом скрипте.
226
+
Function Declaration `sayHi` было создано, когда движок JavaScript подготавливал скрипт к выполнению, и такая функция видна повсюду в этом скрипте.
227
227
228
-
...В случае с *Function Expression*, такой код вызовет ошибку:
228
+
...В случае с Function Expression, такой код вызовет ошибку:
229
229
230
230
```js run refresh untrusted
231
231
*!*
@@ -237,9 +237,9 @@ let sayHi = function(name) { // (*) магии больше нет
237
237
};
238
238
```
239
239
240
-
*Function Expression* создаются тогда, когда выполнение доходит до них. Это случится только на строке, помеченной звёздочкой `(*)`. Слишком поздно.
240
+
Function Expression создаются тогда, когда выполнение доходит до них. Это случится только на строке, помеченной звёздочкой `(*)`. Слишком поздно.
241
241
242
-
**Когда *Function Declaration* создаётся для блока кода, оно становится доступно везде внутри блока. Но не снаружи него.**
242
+
**Когда Function Declaration создаётся для блока кода, оно становится доступно везде внутри блока. Но не снаружи него.**
243
243
244
244
Иногда очень удобно создать локальную функцию лишь для отдельного блока кода, однако этот приём также может создать проблемы.
245
245
@@ -271,7 +271,7 @@ welcome(); // Ошибка: welcome is not defined
271
271
*/!*
272
272
```
273
273
274
-
Это произошло, так как *Function Declaration* видимо только внутри блока кода, в котором располагается.
274
+
Это произошло, так как Function Declaration видимо только внутри блока кода, в котором располагается.
275
275
276
276
Вот ещё один пример:
277
277
@@ -308,7 +308,7 @@ welcome(); // Ошибка: welcome is not defined
308
308
309
309
Что можно сделать, чтобы `welcome` была видима снаружи `if`?
310
310
311
-
Верным подходом будет воспользоваться *Function Expression* и присвоить значение `welcome` переменной, объявленной снаружи `if`, что обеспечит нам нужную видимость.
311
+
Верным подходом будет воспользоваться Function Expression и присвоить значение `welcome` переменной, объявленной снаружи `if`, что обеспечит нам нужную видимость.
312
312
313
313
Теперь работает как ожидалось:
314
314
@@ -351,18 +351,18 @@ welcome(); // теперь всё в порядке
351
351
```
352
352
353
353
354
-
```smart header="Когда использовать *Function Declaration*, а когда *Function Expression*?"
355
-
Как правило, если нам понадобилась функция, в первую очередь нужно рассматривать синтаксис *Function Declaration*, который мы использовали до этого. Это даёт нам больше свободы в том, как мы можем организовывать код. Функции, объявленные таким образом можно вызывать до их объявления.
354
+
```smart header="Когда использовать Function Declaration, а когда Function Expression?"
355
+
Как правило, если нам понадобилась функция, в первую очередь нужно рассматривать синтаксис Function Declaration, который мы использовали до этого. Это даёт нам больше свободы в том, как мы можем организовывать код. Функции, объявленные таким образом можно вызывать до их объявления.
356
356
357
-
Ещё такие функции `functionf(…) {…}`, чуть более заметны в коде, чем `letf=function(…) {…}`. *Function Declaration* более распознаваемы.
357
+
Ещё такие функции `functionf(…) {…}`, чуть более заметны в коде, чем `letf=function(…) {…}`. Function Declaration более распознаваемы.
358
358
359
-
...Но если *Function Declaration* нам не подходит по какой-то причине (мы рассмотрели это в примере выше), тогда должно быть использовано *Function Expression*.
359
+
...Но если Function Declaration нам не подходит по какой-то причине (мы рассмотрели это в примере выше), тогда должно быть использовано Function Expression.
360
360
```
361
361
362
362
363
363
## Функции-стрелки [#arrow-functions]
364
364
365
-
Существует ещё более простой и краткий синтаксис для создания функций, который часто лучше, чем синтаксис *Function Expression*. Он называется "функции-стрелки" или "стрелочные функции" (arrow functions), т.к. выглядит следующим образом:
365
+
Существует ещё более простой и краткий синтаксис для создания функций, который часто лучше, чем синтаксис Function Expression. Он называется "функции-стрелки" или "стрелочные функции" (arrow functions), т.к. выглядит следующим образом:
366
366
367
367
368
368
```js
@@ -417,7 +417,7 @@ let sayHi = () => alert("Hello!");
417
417
sayHi();
418
418
```
419
419
420
-
Функции-стрелки могут быть использованы, в качестве *Function Expression*.
420
+
Функции-стрелки могут быть использованы, в качестве Function Expression.
421
421
422
422
Например, вот переписанный пример уже знакомой нам функции `welcome()`:
423
423
@@ -463,15 +463,15 @@ alert( sum(1, 2) ); // 3
463
463
## Итого
464
464
465
465
- Функции это значения. Они могут быть присвоены, скопированы или объявлены в другом месте кода.
466
-
- Если функция объявлена, как отдельная инструкция в основном потоке кода, то это *Function Declaration*.
467
-
- Если функция была создана, как часть выражения, то такая функция называется *Function Expression*.
468
-
-*Function Declaration* обрабатываются перед выполненеи блока кода. Они видны во всём блоке.
469
-
-*Function Expression* создаются, только когда поток выполнения достигает их.
466
+
- Если функция объявлена, как отдельная инструкция в основном потоке кода, то это Function Declaration.
467
+
- Если функция была создана, как часть выражения, то такая функция называется Function Expression.
468
+
- Function Declaration обрабатываются перед выполненеи блока кода. Они видны во всём блоке.
469
+
- Function Expression создаются, только когда поток выполнения достигает их.
470
470
471
471
472
-
В большинстве случаев, когда нам нужно создать фукнцию, предпочтительно использовать *Function Declaration*, т.к. оно видимо до своего объявления в коде. Это позволяет более гибко организовывать код, и улучшает его читаемость.
472
+
В большинстве случаев, когда нам нужно создать фукнцию, предпочтительно использовать Function Declaration, т.к. оно видимо до своего объявления в коде. Это позволяет более гибко организовывать код, и улучшает его читаемость.
473
473
474
-
Таким образом, мы должны прибегать к *Function Expression* в случае, когда *Function Declaration* не подходят для нашей задачи. Мы рассмотрели несколько таких примеров в этой главе, и рассмотрим их ещё больше в будущем.
474
+
Таким образом, мы должны прибегать к Function Expression в случае, когда Function Declaration не подходят для нашей задачи. Мы рассмотрели несколько таких примеров в этой главе, и рассмотрим их ещё больше в будущем.
475
475
476
476
Функции-стрелки очень удобны для однострочных действий. Они бывают двух типов:
0 commit comments