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
+28-28Lines changed: 28 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -60,7 +60,7 @@ sayHi(); // Hello // прежняя тоже работает (почем
60
60
61
61
Давайте детально разберём всё, что тут произошло:
62
62
63
-
1. Объявление функции`(1)` создало функцию и присвоило её значение переменной с именем `sayHi`.
63
+
1. Объявление Функции`(1)` создало функцию и присвоило её значение переменной с именем `sayHi`.
64
64
2. В строке `(2)` мы скопировали её значение в переменную `func`.
65
65
66
66
Обратите внимание (ещё раз): нет круглых скобок после `sayHi`. Если бы они были, то выражение `func = sayHi()` "записало" бы *результат вызова*`sayHi()` в переменную `func`, а не саму *функцию*`sayHi`.
@@ -122,15 +122,15 @@ function ask(question, yes, no) {
122
122
*/!*
123
123
124
124
functionshowOk() {
125
-
alert( "You agreed." );
125
+
alert( "Вы согласны." );
126
126
}
127
127
128
128
functionshowCancel() {
129
-
alert( "You canceled the execution." );
129
+
alert( "Вы отменили выполнение." );
130
130
}
131
131
132
132
// использование: функции showOk, showCancel передаются в качестве аргументов ask
133
-
ask("Do you agree?", showOk, showCancel);
133
+
ask("Вы согласны?", showOk, showCancel);
134
134
```
135
135
136
136
Перед тем, как мы рассмотрим, как можно записать это гораздо короче, давайте обратим внимание, что в браузере (и в отдельных случаях на стороне сервера) подобное использование функций очень распространено. Основным отличием между реализацией таких функций в реальном проекте и примером выше, является то, что в реальности функции используют более сложные способы взаимодействия с пользователем, чем простой вызов `confirm`. В браузерах такие функции обычно отображают красивые диалоговые окна. Но это уже другая история.
@@ -149,9 +149,9 @@ function ask(question, yes, no) {
149
149
150
150
*!*
151
151
ask(
152
-
"Do you agree?",
153
-
function() { alert("You agreed."); },
154
-
function() { alert("You canceled the execution."); }
152
+
"Вы согласны?",
153
+
function() { alert("Вы согласились."); },
154
+
function() { alert("Вы отменили выполнение."); }
155
155
);
156
156
*/!*
157
157
```
@@ -166,7 +166,7 @@ ask(
166
166
```smart header="Функция это значение представляющее \"действие\""
167
167
Обычные значения, такие как строки или числа представляют *данные*.
168
168
169
-
Функции предназначены для *значений*.
169
+
Функции предназначены для *действий*.
170
170
171
171
Мы можем передавать их другим переменным и вызывать их когда захотим.
172
172
```
@@ -186,7 +186,7 @@ ask(
186
186
return a + b;
187
187
}
188
188
```
189
-
- В случае Функциональным Выражением: функция создаётся внутри выражения или другой синтаксической конструкции. В данном случае функция создаётся в правой части "выражения присваивания"`=`:
189
+
- В случае с Функциональным Выражением: функция создаётся внутри выражения или другой синтаксической конструкции. В данном случае функция создаётся в правой части "выражения присваивания"`=`:
190
190
191
191
```js
192
192
// Функциональное Выражение
@@ -203,11 +203,11 @@ ask(
203
203
204
204
С Объявлением Функций всё иначе.
205
205
206
-
**Объявление Функции применимы ко всему скрипту или блоку кода.**
206
+
**Объявление Функции применимо ко всему скрипту или блоку кода.**
207
207
208
-
Другими словами, когда движок JavaScript *подготавливает* к выполнению скрипт или блок кода, прежде всего в нём происходит поиск Объявлений Функций, а затем создаются все найденные функции, созданные таким образом. Можно считать этот процесс "стадией инициализации".
208
+
Другими словами, когда движок JavaScript *подготавливает* к выполнению скрипт или блок кода, прежде всего в нём происходит поиск Объявлений Функций, а затем инициализируются все найденные функции, созданные таким образом. Можно считать этот процесс "стадией инициализации".
209
209
210
-
И только после того, как все объявления функций будут обработаны, продолжиться выполнение остального кода.
210
+
И только после того, как все объявленные функции будут обработаны, продолжиться выполнение остального кода.
211
211
212
212
В результате, функции, созданные, как Объявление Функции могут быть вызваны раньше своих определений.
213
213
@@ -223,13 +223,13 @@ function sayHi(name) {
223
223
}
224
224
```
225
225
226
-
Объявление Функции `sayHi` было создано, когда движок JavaScript приготавливал скрипт к выполнению, и такая функция отовсюду.
226
+
Объявление Функции `sayHi` было создано, когда движок JavaScript подготавливал скрипт к выполнению, и такая функция видна повсюду в этом скрипте.
227
227
228
228
...В случае с Функциональным Выражением, такой код вызовет ошибку:
229
229
230
230
```js run refresh untrusted
231
231
*!*
232
-
sayHi("John"); // error!
232
+
sayHi("John"); // ошибка!
233
233
*/!*
234
234
235
235
let sayHi = function(name) { // (*) магии больше нет
@@ -299,7 +299,7 @@ if (age < 18) {
299
299
}
300
300
301
301
// здесь фигурная скобка закрывается,
302
-
// поэтому, Объявления Функций, созданные внутри блока кода выше -- недоступны отсюда.
302
+
// поэтому Объявления Функций, созданные внутри блока кода выше -- недоступны отсюда.
303
303
304
304
*!*
305
305
welcome(); // Ошибка: welcome is not defined
@@ -310,7 +310,7 @@ welcome(); // Ошибка: welcome is not defined
310
310
311
311
Верным подходом будет воспользоваться Функциональным Выражением и присвоить значение `welcome` переменной, объявленной снаружи `if`, что обеспечит нам нужную видимость.
312
312
313
-
Теперь работает как надо:
313
+
Теперь работает как ожидалось:
314
314
315
315
```js run
316
316
let age = prompt("Сколько Вам лет?", 18);
@@ -352,9 +352,9 @@ welcome(); // теперь всё в порядке
352
352
353
353
354
354
```smart header="Когда использовать Объявление Функции, а когда Функциональное Выражение?"
355
-
Как правило, если нам понадобилась функция в первую очередь нужно рассматривать синтаксис Объявления Функции, который мы использовали до этого. Это даёт нам больше свободы в том, как мы можем организовывать код. Функции, объявленные таким образом можно вызывать до их объявления.
355
+
Как правило, если нам понадобилась функция, в первую очередь нужно рассматривать синтаксис Объявления Функции, который мы использовали до этого. Это даёт нам больше свободы в том, как мы можем организовывать код. Функции, объявленные таким образом можно вызывать до их объявления.
356
356
357
-
Ещё такие функции `functionf(…) {…}`, чуть более заметны в коде, чем `letf=function(…) {…}`. Объявления функций более распознаваемы.
357
+
Ещё такие функции `functionf(…) {…}`, чуть более заметны в коде, чем `letf=function(…) {…}`. Объявления Функций более распознаваемы.
358
358
359
359
...Но если Объявление Функции нам не подходит по какой-то причине (мы рассмотрели это в примере выше), тогда должно быть использовано Функциональное Выражение.
360
360
```
@@ -369,9 +369,9 @@ welcome(); // теперь всё в порядке
369
369
let func = (arg1, arg2, ...argN) => expression
370
370
```
371
371
372
-
...Такой код создаёт функцию `func` с аргументами `arg1..argN` и вычисляет `expression` с правой стороны с их использованием, сразу возвращая результат.
372
+
...Такой код создаёт функцию `func` с аргументами `arg1..argN` и вычисляет `expression` с правой стороны с их использованием, возвращая результат.
373
373
374
-
Другими словами, это почти так же как:
374
+
Другими словами, это почти так же, как:
375
375
376
376
```js
377
377
let func = function(arg1, arg2, ...argN) {
@@ -409,15 +409,15 @@ let double = n => n * 2;
409
409
alert( double(3) ); // 6
410
410
```
411
411
412
-
Если нет аргументов, исользуются пустые круглые скобки (их указывать обязательно):
412
+
Если нет аргументов, используются пустые круглые скобки (их указывать обязательно):
413
413
414
414
```js run
415
415
let sayHi = () => alert("Hello!");
416
416
417
417
sayHi();
418
418
```
419
419
420
-
Функции-стрелки могут быть использован, в качестве Функциональныех Выражений.
420
+
Функции-стрелки могут быть использованы, в качестве Функциональных Выражений.
421
421
422
422
Например, вот переписанный пример уже знакомой нам функции `welcome()`:
423
423
@@ -437,9 +437,9 @@ welcome(); // теперь всё в порядке
В примерах выше аргументы использовались слева от `=>`, а справа вычислялось выражение с ними.
440
+
В примерах выше аргументы использовались слева от `=>`, а справа вычислялось выражение с их значениями.
441
441
442
-
Иногда нам нужно кое-что более сложное, например, несколько выражений или инструкций. Это также возможно, но мы должны заключать такие выражения в фигурные скобки с использованием директивы `return` внутри них, как в обычной функции.
442
+
Порой нам нужно кое-что более сложное, допустим, несколько выражений или инструкций. Это также возможно, но мы должны заключать такие выражения в фигурные скобки с использованием директивы `return` внутри них, как в обычной функции.
443
443
444
444
Например:
445
445
@@ -455,7 +455,7 @@ alert( sum(1, 2) ); // 3
455
455
```
456
456
457
457
```smart header="Кое-что ещё"
458
-
Здесь мы рассмотрели Функции-стрелки, с позиции их более краткой записи. Но это далеко не всё! Стрелочные функциио обладают другими интересными особенностями. Мы вернёмся к ним позже в главе <info:arrow-functions>.
458
+
Здесь мы рассмотрели Функции-стрелки, с позиции их более краткой записи. Но это далеко не всё! Стрелочные функции обладают другими интересными особенностями. Мы вернёмся к ним позже в главе <info:arrow-functions>.
459
459
460
460
А пока, мы можем использовать их для простых однострочных действий и колбэков.
461
461
```
@@ -464,16 +464,16 @@ alert( sum(1, 2) ); // 3
464
464
465
465
- Функции это значения. Они могут быть присвоены, скопированы или объявлены в другом месте кода.
466
466
- Если функция объявлена, как отдельная инструкция в основном потоке кода, то это "Объявление Функции".
467
-
- Если функция была создана, как часть выражения, такая функция называется "Функциональным Выражением".
467
+
- Если функция была создана, как часть выражения, то такая функция называется "Функциональным Выражением".
468
468
- Объявления Функций обрабатываются перед выполненеи блока кода. Они видны во всём блоке.
469
469
- Функциональные Выражения создаются, только когда поток выполнения достигает их.
470
470
471
471
472
-
В большинстве случаев, когда нам нужно создать фукнцию, предпочтительно использовать Объявление Функции, т.к. оно видимо до своего объявления в коде. Это позволяет более гибко организовывать код, и обычно улучшает его читаемость.
472
+
В большинстве случаев, когда нам нужно создать фукнцию, предпочтительно использовать Объявление Функции, т.к. оно видимо до своего объявления в коде. Это позволяет более гибко организовывать код, и улучшает его читаемость.
473
473
474
474
Таким образом, мы должны прибегать к Функциональным Выражениям в случае, когда Объявления Функций не подходят для нашей задачи. Мы рассмотрели несколько таких примеров в этой главе, и рассмотрим их ещё больше в будущем.
475
475
476
-
Стрелочные функции очень удобны для однострочных действий. Они бывают двух типов:
476
+
Функции-стрелки очень удобны для однострочных действий. Они бывают двух типов:
477
477
478
478
1. Без фигурных скобок: `(...args) => expression` -- правая сторона выражение: функция выполняет его и возвращает результат.
479
479
2. С фигурными скобками: `(...args) => { body }` -- скобки позволяют нам писать многосточные инструкции внутри функции, но при этом необходимо указывать директиву `return`, чтобы вернуть какое либо значение.
0 commit comments