(253-1) (т. е. `9007199254740991`), или меньше, чем -(253-1) для отрицательных чисел. Это техническое ограничение вызвано их внутренним представлением.
+В JavaScript тип `number` не может безопасно работать с числами, большими, чем (253-1) (т. е. `9007199254740991`) или меньшими, чем -(253-1) для отрицательных чисел.
-Для большинства случаев этого достаточно. Но иногда нам нужны действительно гигантские числа, например, в криптографии или при использовании метки времени ("timestamp") с микросекундами.
+Если говорить совсем точно, то, технически, тип `number` *может* хранить большие целые числа (до 1.7976931348623157 * 10308), но за пределами безопасного диапазона целых чисел ±(253-1) будет ошибка точности, так как не все цифры помещаются в фиксированную 64-битную память. Поэтому можно хранить "приблизительное" значение.
+
+Например, эти два числа (прямо за пределами безопасного диапазона) совпадают:
+
+```js
+console.log(9007199254740991 + 1); // 9007199254740992
+console.log(9007199254740991 + 2); // 9007199254740992
+```
+
+То есть все нечетные целые числа, большие чем (253-1), вообще не могут храниться в типе `number`.
+
+В большинстве случаев безопасного диапазона чисел от -(253-1) до (253-1) вполне достаточно, но иногда нам требуется весь диапазон действительно гигантских целых чисел без каких-либо ограничений или пропущенных значений внутри него. Например, в криптографии или при использовании метки времени («timestamp») с микросекундами.
Тип `BigInt` был добавлен в JavaScript, чтобы дать возможность работать с целыми числами произвольной длины.
@@ -79,7 +92,7 @@ n = 12.345;
const bigInt = 1234567890123456789012345678901234567890n;
```
-Так как `BigInt`-числа нужны достаточно редко, мы рассмотрим их в отдельной главе ±(253-1).
-- `bigint` для целых чисел произвольной длины.
-- `string` для строк. Строка может содержать ноль или больше символов, нет отдельного символьного типа.
-- `boolean` для `true`/`false`.
-- `null` для неизвестных значений -- отдельный тип, имеющий одно значение `null`.
-- `undefined` для неприсвоенных значений -- отдельный тип, имеющий одно значение `undefined`.
-- `object` для более сложных структур данных.
-- `symbol` для уникальных идентификаторов.
+В JavaScript есть 8 основных типов данных.
+
+- Семь из них называют «примитивными» типами данных:
+ - `number` для любых чисел: целочисленных или чисел с плавающей точкой; целочисленные значения ограничены диапазоном ±(253-1).
+ - `bigint` для целых чисел произвольной длины.
+ - `string` для строк. Строка может содержать ноль или больше символов, нет отдельного символьного типа.
+ - `boolean` для `true`/`false`.
+ - `null` для неизвестных значений -- отдельный тип, имеющий одно значение `null`.
+ - `undefined` для неприсвоенных значений -- отдельный тип, имеющий одно значение `undefined`.
+ - `symbol` для уникальных идентификаторов.
+- И один не является «примитивным» и стоит особняком:
+ - `object` для более сложных структур данных.
Оператор `typeof` позволяет нам увидеть, какой тип данных сохранён в переменной.
diff --git a/1-js/02-first-steps/07-type-conversions/article.md b/1-js/02-first-steps/07-type-conversions/article.md
index 253641a024..bd413fa539 100644
--- a/1-js/02-first-steps/07-type-conversions/article.md
+++ b/1-js/02-first-steps/07-type-conversions/article.md
@@ -7,7 +7,9 @@
Есть также случаи, когда нам нужно явно преобразовать значение в ожидаемый тип.
```smart header="Пока что мы не говорим об объектах"
-В этой главе мы не касаемся объектов. Сначала мы разберём преобразование примитивных значений. Мы разберём преобразование объектов позже, в главе true / false | `1` / `0` |
-| `string` | Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то получаем `0`, иначе из непустой строки "считывается" число. При ошибке результат `NaN`.|
+| `string` | Пробельные символы (пробелы, знаки табуляции `\t`, знаки новой строки `\n` и т. п.) по краям обрезаются. Далее, если остаётся пустая строка, то получаем `0`, иначе из непустой строки "считывается" число. При ошибке результат `NaN`.|
Примеры:
@@ -104,7 +106,7 @@ alert( Boolean("Привет!") ); // true
alert( Boolean("") ); // false
```
-````warn header="Заметим, что строчка с нулём `\"0\"` — это `true`"
+````warn header="Заметим, что строка с нулём `\"0\"` — это `true`"
Некоторые языки (к примеру, PHP) воспринимают строку `"0"` как `false`. Но в JavaScript, если строка не пустая, то она всегда `true`.
```js run
diff --git a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md
index a71061606e..24d683549d 100644
--- a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md
+++ b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md
@@ -9,7 +9,6 @@ true + false = 1
"$" + 4 + 5 = "$45"
"4" - 2 = 2
"4px" - 2 = NaN
-7 / 0 = Infinity
" -9 " + 5 = " -9 5" // (3)
" -9 " - 5 = -14 // (4)
null + 1 = 1 // (5)
diff --git a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md
index 1009616c35..ccabd3689b 100644
--- a/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md
+++ b/1-js/02-first-steps/08-operators/3-primitive-conversions-questions/task.md
@@ -16,7 +16,6 @@ true + false
"$" + 4 + 5
"4" - 2
"4px" - 2
-7 / 0
" -9 " + 5
" -9 " - 5
null + 1
diff --git a/1-js/02-first-steps/08-operators/article.md b/1-js/02-first-steps/08-operators/article.md
index 677ebac556..95685286e7 100644
--- a/1-js/02-first-steps/08-operators/article.md
+++ b/1-js/02-first-steps/08-operators/article.md
@@ -52,28 +52,29 @@
```js run
alert( 5 % 2 ); // 1, остаток от деления 5 на 2
alert( 8 % 3 ); // 2, остаток от деления 8 на 3
+alert( 8 % 4 ); // 0, остаток от деления 8 на 4
```
### Возведение в степень **
-В выражении `a ** b` оператор возведения в степень умножает `a` на само себя `b` раз.
+Оператор возведения в степень `a ** b` возводит `a` в степень `b`.
+
+В школьной математике мы записываем это как ab.
Например:
```js run
-alert( 2 ** 2 ); // 4 (2 умножено на себя 2 раза)
-alert( 2 ** 3 ); // 8 (2 * 2 * 2, 3 раза)
-alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2, 4 раза)
+alert( 2 ** 2 ); // 2² = 4
+alert( 2 ** 3 ); // 2³ = 8
+alert( 2 ** 4 ); // 2⁴ = 16
```
-Математически, оператор работает и для нецелых чисел. Например, квадратный корень является возведением в степень `1/2`:
+Математически, оператор работает и для нецелых чисел. Например, квадратный корень является возведением в степень ½:
```js run
alert( 4 ** (1/2) ); // 2 (степень 1/2 эквивалентна взятию квадратного корня)
-alert( 8 ** (1/3) ); // 2 (степень 1/3 эквивалентна взятию кубического корня)
```
-
## Сложение строк при помощи бинарного +
Давайте рассмотрим специальные возможности операторов JavaScript, которые выходят за рамки школьной арифметики.
@@ -104,7 +105,7 @@ alert( 2 + '1' ); // "21"
alert(2 + 2 + '1' ); // будет "41", а не "221"
```
-Здесь операторы работают один за другим. Первый `+` складывает два числа и возвращает `4`, затем следующий `+` объединяет результат со строкой, производя действие `4 + '1' = 41`.
+Здесь операторы работают один за другим. Первый `+` складывает два числа и возвращает `4`, затем следующий `+` объединяет результат со строкой, производя действие `4 + '1' = '41'`.
Сложение и преобразование строк — это особенность бинарного плюса `+`. Другие арифметические операторы работают только с числами и всегда преобразуют операнды в числа.
@@ -166,7 +167,7 @@ alert( +apples + +oranges ); // 5
// alert( Number(apples) + Number(oranges) ); // 5
```
-С точки зрения математика, такое изобилие плюсов выглядит странным. Но с точки зрения программиста тут нет ничего особенного: сначала выполнятся унарные плюсы, которые приведут строки к числам, а затем бинарный `'+'` их сложит.
+С точки зрения математики, такое изобилие плюсов выглядит странным. Но с точки зрения программиста тут нет ничего особенного: сначала выполнятся унарные плюсы, которые приведут строки к числам, а затем бинарный `'+'` их сложит.
Почему унарные плюсы выполнились до бинарного сложения? Как мы сейчас увидим, дело в их приоритете.
@@ -185,22 +186,22 @@ alert( +apples + +oranges ); // 5
| Приоритет | Название | Обозначение |
|------------|------|------|
| ... | ... | ... |
-| 17 | унарный плюс | `+` |
-| 17 | унарный минус | `-` |
-| 16 | возведение в степень | `**` |
-| 15 | умножение | `*` |
-| 15 | деление | `/` |
-| 13 | сложение | `+` |
-| 13 | вычитание | `-` |
+| 15 | унарный плюс | `+` |
+| 15 | унарный минус | `-` |
+| 14 | возведение в степень | `**` |
+| 13 | умножение | `*` |
+| 13 | деление | `/` |
+| 12 | сложение | `+` |
+| 12 | вычитание | `-` |
| ... | ... | ... |
-| 3 | присваивание | `=` |
+| 2 | присваивание | `=` |
| ... | ... | ... |
-Так как "унарный плюс" имеет приоритет `17`, который выше, чем `13` у "сложения" (бинарный плюс), то в выражении `"+apples + +oranges"` сначала выполнятся унарные плюсы, а затем сложение.
+Так как "унарный плюс" имеет приоритет `15`, который выше, чем `12` у "сложения" (бинарный плюс), то в выражении `"+apples + +oranges"` сначала выполнятся унарные плюсы, а затем сложение.
## Присваивание
-Давайте отметим, что в таблице приоритетов также есть оператор присваивания `=`. У него один из самых низких приоритетов: `3`.
+Давайте отметим, что в таблице приоритетов также есть оператор присваивания `=`. У него один из самых низких приоритетов: `2`.
Именно поэтому, когда переменной что-либо присваивают, например, `x = 2 * 2 + 1`, то сначала выполнится арифметика, а уже затем произойдёт присваивание `=` с сохранением результата в `x`.
@@ -287,7 +288,7 @@ n *= 2; // теперь n = 14 (работает как n = n * 2)
alert( n ); // 14
```
-Подобные краткие формы записи существуют для всех арифметических и побитовых операторов: `/=`, `-=` и так далее.
+Подобные краткие формы записи существуют для **всех** арифметических и побитовых операторов: `/=`, `-=`, `**=` и так далее.
Вызов с присваиванием имеет в точности такой же приоритет, как обычное присваивание, то есть выполнится после большинства других операций:
@@ -428,7 +429,9 @@ counter++;
- RIGHT SHIFT(правый сдвиг) ( `>>` )
- ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) ( `>>>` )
-Они используются редко, когда возникает необходимость оперировать с числами на очень низком (побитовом) уровне. В ближайшем времени они нам не понадобятся, так как веб-разработчики редко к ним прибегают, хотя в некоторых сферах (например, в криптографии) они полезны. Можете прочитать [раздел о них](https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators#Битовые_поразрядные_операторы) на MDN, когда возникнет реальная необходимость.
+Они используются редко, когда возникает необходимость оперировать с числами на очень низком (побитовом) уровне. В ближайшем времени они нам не понадобятся, так как веб-разработчики редко к ним прибегают, хотя в некоторых сферах (например, в криптографии) они полезны.
+
+Вы можете прочитать о них в главе Если оно вычислится в `false`, цикл остановится. | +| тело | `alert(i)` | Выполняется снова и снова, пока условие вычисляется в `true`. | +| шаг | `i++`| Выполняется *после* тела цикла на каждой итерации *перед* проверкой условия. | В целом, алгоритм работы цикла выглядит следующим образом: ``` -Выполнить *начало* -→ (Если *условие* == true → Выполнить *тело*, Выполнить *шаг*) -→ (Если *условие* == true → Выполнить *тело*, Выполнить *шаг*) -→ (Если *условие* == true → Выполнить *тело*, Выполнить *шаг*) +Выполнить начало +→ (Если условие == true → Выполнить тело, Выполнить шаг) +→ (Если условие == true → Выполнить тело, Выполнить шаг) +→ (Если условие == true → Выполнить тело, Выполнить шаг) → ... ``` -То есть, *начало* выполняется один раз, а затем каждая итерация заключается в проверке *условия*, после которой выполняется *тело* и *шаг*. +То есть, `начало` выполняется один раз, а затем каждая итерация заключается в проверке `условия`, после которой выполняется `тело` и `шаг`. Если тема циклов для вас нова, может быть полезным вернуться к примеру выше и воспроизвести его работу на листе бумаги, шаг за шагом. @@ -162,10 +175,8 @@ for (i = 0; i < 3; i++) { // используем существующую пе alert(i); // 3, переменная доступна, т.к. была объявлена снаружи цикла ``` - ```` - ### Пропуск частей "for" Любая часть `for` может быть пропущена. @@ -212,7 +223,7 @@ for (;;) { Например, следующий код подсчитывает сумму вводимых чисел до тех пор, пока посетитель их вводит, а затем – выдаёт: -```js +```js run let sum = 0; while (true) { @@ -231,7 +242,7 @@ alert( 'Сумма: ' + sum ); Директива `break` в строке `(*)` полностью прекращает выполнение цикла и передаёт управление на строку за его телом, то есть на `alert`. -Вообще, сочетание «бесконечный цикл + `break`» – отличная штука для тех ситуаций, когда условие, по которому нужно прерваться, находится не в начале или конце цикла, а посередине. +Вообще, сочетание «бесконечный цикл + `break`» – отличная штука для тех ситуаций, когда условие, по которому нужно прерваться, находится не в начале или конце цикла, а посередине или даже в нескольких местах его тела. ## Переход к следующей итерации: continue [#continue] @@ -256,7 +267,7 @@ for (let i = 0; i < 10; i++) { ````smart header="Директива `continue` позволяет избегать вложенности" Цикл, который обрабатывает только нечётные значения, мог бы выглядеть так: -```js +```js run for (let i = 0; i < 10; i++) { if (i % 2) { @@ -286,7 +297,6 @@ if (i > 5) { ...и перепишем его, используя вопросительный знак: - ```js no-beautify (i > 5) ? alert(i) : *!*continue*/!*; // continue здесь приведёт к ошибке ``` @@ -310,18 +320,18 @@ for (let i = 0; i < 3; i++) { let input = prompt(`Значение на координатах (${i},${j})`, ''); // Что если мы захотим перейти к Готово (ниже) прямо отсюда? - } } alert('Готово!'); ``` -Нам нужен способ остановить выполнение если пользователь отменит ввод. +Нам нужен способ остановить выполнение, если пользователь отменит ввод. Обычный `break` после `input` лишь прервёт внутренний цикл, но этого недостаточно. Достичь желаемого поведения можно с помощью меток. *Метка* имеет вид идентификатора с двоеточием перед циклом: + ```js labelName: for (...) { ... @@ -347,7 +357,9 @@ labelName: for (...) { alert('Готово!'); ``` -В примере выше это означает, что вызовом `break outer` будет разорван внешний цикл до метки с именем `outer`, и управление перейдёт со строки, помеченной `(*)`, к `alert('Готово!')`. +В примере выше это означает, что вызовом `break outer` будет разорван внешний цикл до метки с именем `outer`. + +Таким образом управление перейдёт со строки, помеченной `(*)`, к `alert('Готово!')`. Можно размещать метку на отдельной строке: @@ -362,13 +374,26 @@ for (let i = 0; i < 3; i++) { ... } Метки не дают возможности передавать управление в произвольное место кода. Например, нет возможности сделать следующее: + ```js break label; // не прыгает к метке ниже label: for (...) ``` -Вызов `break/continue` возможен только внутри цикла, и метка должна находиться где-то выше этой директивы. +Директива `break` должна находиться внутри блока кода. Технически, подойдет любой маркированный блок кода, например: + +```js +label: { + // ... + break label; // работает + // ... +} +``` + +...Хотя в 99.9% случаев `break` используется внутри циклов, как мы видели в примерах выше. + +К слову, `continue` возможно только внутри цикла. ```` ## Итого diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index 551d990f8f..7f356dc2da 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -117,7 +117,7 @@ switch (+a) { Для примера, выполним один и тот же код для `case 3` и `case 5`, сгруппировав их: ```js run no-beautify -let a = 2 + 2; +let a = 3; switch (a) { case 4: diff --git a/1-js/02-first-steps/15-function-basics/4-pow/solution.md b/1-js/02-first-steps/15-function-basics/4-pow/solution.md index 4375dab037..a374abc83e 100644 --- a/1-js/02-first-steps/15-function-basics/4-pow/solution.md +++ b/1-js/02-first-steps/15-function-basics/4-pow/solution.md @@ -13,9 +13,9 @@ function pow(x, n) { let x = prompt("x?", ''); let n = prompt("n?", ''); -if (n < 1) { - alert(`Степень ${n} не поддерживается, используйте натуральное число`); -} else { +if (n >= 1 && n % 1 == 0) { alert( pow(x, n) ); +} else { + alert(`Степень ${n} не поддерживается, используйте натуральное число`); } ``` diff --git a/1-js/02-first-steps/15-function-basics/4-pow/task.md b/1-js/02-first-steps/15-function-basics/4-pow/task.md index de3b84475f..e4e513c313 100644 --- a/1-js/02-first-steps/15-function-basics/4-pow/task.md +++ b/1-js/02-first-steps/15-function-basics/4-pow/task.md @@ -4,7 +4,7 @@ importance: 4 # Функция pow(x,n) -Напишите функцию `pow(x,n)`, которая возвращает `x` в степени `n`. Иначе говоря, умножает `x` на себя `n` раз и возвращает результат. +Напишите функцию `pow(x,n)`, которая возводит `x` в степень `n` и возвращает результат. ```js pow(3, 2) = 3 * 3 = 9 diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index b24625a5e6..4f3bacf687 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -28,7 +28,7 @@ function имя(параметры) { } ``` -Наша новая функция может быть вызвана по её имени: `showMessage()`. +Наша новая функция может быть вызвана по своему имени: `showMessage()`. Например: @@ -137,12 +137,12 @@ alert( userName ); // *!*Вася*/!*, не изменилась, функция ## Параметры -Мы можем передать внутрь функции любую информацию, используя параметры (также называемые *аргументами функции*). +Мы можем передать внутрь функции любую информацию, используя параметры. В нижеприведённом примере функции передаются два параметра: `from` и `text`. ```js run -function showMessage(*!*from, text*/!*) { // аргументы: from, text +function showMessage(*!*from, text*/!*) { // параметры: from, text alert(from + ': ' + text); } @@ -175,9 +175,20 @@ showMessage(from, "Привет"); // *Аня*: Привет alert( from ); // Аня ``` -## Параметры по умолчанию +Значение, передаваемое в качестве параметра функции, также называется *аргументом*. -Если параметр не указан, то его значением становится `undefined`. +Другими словами: + +- Параметр - это переменная, указанная в круглых скобках в объявлении функции. +- Аргумент - это значение, которое передаётся функции при её вызове. + +Мы объявляем функции со списком параметров, затем вызываем их, передавая аргументы. + +Рассматривая приведённый выше пример, мы могли бы сказать: "функция `showMessage` объявляется с двумя параметрами, затем вызывается с двумя аргументами: `from` и `"Привет"`". + +## Значения по умолчанию + +Если при вызове функции аргумент не был указан, то его значением становится `undefined`. Например, вышеупомянутая функция `showMessage(from, text)` может быть вызвана с одним аргументом: @@ -185,7 +196,7 @@ alert( from ); // Аня showMessage("Аня"); ``` -Это не приведёт к ошибке. Такой вызов выведет `"Аня: undefined"`. В вызове не указан параметр `text`, поэтому предполагается, что `text === undefined`. +Это не приведёт к ошибке. Такой вызов выведет `"*Аня*: undefined"`. В вызове не указан параметр `text`, поэтому предполагается, что `text === undefined`. Если мы хотим задать параметру `text` значение по умолчанию, мы должны указать его после `=`: @@ -209,9 +220,11 @@ function showMessage(from, text = anotherFunction()) { ``` ```smart header="Вычисление параметров по умолчанию" -В JavaScript параметры по умолчанию вычисляются каждый раз, когда функция вызывается без соответствующего параметра. +В JavaScript параметры по умолчанию вычисляются каждый раз, когда функция вызывается без соответствующего аргумента. + +В приведённом выше примере, функция `anotherFunction()` не будет вызвана вообще, если указан аргумент `text`. -В примере выше `anotherFunction()` будет вызываться каждый раз, когда `showMessage()` вызывается без параметра `text`. +С другой стороны, функция будет независимо вызываться каждый раз, когда аргумент `text` отсутствует. ``` ````smart header="Использование параметров по умолчанию в ранних версиях JavaScript" @@ -236,12 +249,53 @@ function showMessage(from, text) { ```js function showMessage(from, text) { // Если значение text ложно, тогда присвоить параметру text значение по умолчанию + // заметим, что при этом пустая строка text === "" будет также считаться отсутствующим значением text = text || 'текст не добавлен'; ... } ``` ```` +### Альтернативные параметры по умолчанию + +Иногда имеет смысл присваивать значения по умолчанию для параметров не в объявлении функции, а на более позднем этапе. + +Во время выполнения функции мы можем проверить, передан ли параметр, сравнив его с `undefined`: + +```js run +function showMessage(text) { + // ... +*!* + if (text === undefined) { // если параметр отсутствует + text = 'пустое сообщение'; + } +*/!* + alert(text); +} +showMessage(); // пустое сообщение +``` + +...Или мы можем использовать оператор `||`: + +```js +function showMessage(text) { + // если значение text ложно или равняется undefined, тогда присвоить text значение 'пусто' + text = text || 'пусто'; + ... +} +``` + +Современные движки JavaScript поддерживают [оператор нулевого слияния](info:nullish-operators) `??`. Его использование будет лучшей практикой, в случае, если большинство ложных значений, таких как `0`, следует расценивать как "нормальные". + +```js run +function showCount(count) { + // если count равен undefined или null, показать "неизвестно" + alert(count ?? "неизвестно"); +} +showCount(0); // 0 +showCount(null); // неизвестно +showCount(); // неизвестно +``` ## Возврат значения @@ -264,7 +318,7 @@ alert( result ); // 3 ```js run function checkAge(age) { - if (age > 18) { + if (age >= 18) { *!* return true; */!* @@ -354,7 +408,7 @@ return ( ## Выбор имени функции [#function-naming] -Функция - это действие. Поэтому имя функции обычно является глаголом. Оно должно быть простым, точным и описывать действие функции, чтобы программист, который будет читать код, получил верное представление о том, что делает функция. +Функция - это действие. Поэтому имя функции обычно является глаголом. Оно должно быть кратким, точным и описывать действие функции, чтобы программист, который будет читать код, получил верное представление о том, что делает функция. Как правило, используются глагольные префиксы, обозначающие общий характер действия, после которых следует уточнение. Обычно в командах разработчиков действуют соглашения, касающиеся значений этих префиксов. @@ -371,13 +425,13 @@ return ( ```js no-beautify showMessage(..) // показывает сообщение -getAge(..) // возвращает возраст (в каком-либо значении) +getAge(..) // возвращает возраст (получая его каким-то образом) calcSum(..) // вычисляет сумму и возвращает результат createForm(..) // создаёт форму (и обычно возвращает её) checkPermission(..) // проверяет доступ, возвращая true/false ``` -Благодаря префиксам, при первом взгляде на имя функции становится понятным что делает её код, и какое значение она может возвращать. +Благодаря префиксам, при первом взгляде на имя функции становится понятным, что делает её код, и какое значение она может возвращать. ```smart header="Одна функция -- одно действие" Функция должна делать только то, что явно подразумевается её названием. И это должно быть одним действием. @@ -390,13 +444,13 @@ checkPermission(..) // проверяет доступ, возвращая true/ - `createForm` -- будет плохим выбором, если функция будет изменять документ, добавляя форму в него (должна только создавать форму и возвращать её). - `checkPermission` -- будет плохим выбором, если функция будет отображать сообщение с текстом `доступ разрешён/запрещён` (должна только выполнять проверку и возвращать её результат). -В этих примерах использовались общепринятые смыслы префиксов. Конечно, вы в команде можете договориться о других значениях, но обычно они мало отличаются от общепринятых. В любом случае вы и ваша команда должны точно понимать, что значит префикс, что функция с ним может делать, а чего не может. +В этих примерах использовались общепринятые смыслы префиксов. Конечно, вы в команде можете договориться о других значениях, но обычно они мало отличаются от общепринятых. В любом случае вы и ваша команда должны чётко понимать, что значит префикс, что функция с ним может делать, а чего не может. ``` ```smart header="Сверхкороткие имена функций" Имена функций, которые используются *очень часто*, иногда делают сверхкороткими. -Например, во фреймворке [jQuery](http://jquery.com) есть функция с именем `$`. В библиотеке [Lodash](http://lodash.com/) основная функция представлена именем `_`. +Например, фреймворк [jQuery](https://jquery.com) определяет функцию с помощью `$`. В библиотеке [Lodash](https://lodash.com/) основная функция представлена именем `_`. Это исключения. В основном имена функций должны быть в меру краткими и описательными. ``` diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index 18472035b2..795217fc39 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -12,7 +12,9 @@ function sayHi() { Существует ещё один синтаксис создания функций, который называется *Function Expression* (Функциональное Выражение). -Оно выглядит вот так: +Данный синтаксис позволяет нам создавать новую функцию в середине любого выражения. + +Это выглядит следующим образом: ```js let sayHi = function() { @@ -20,11 +22,21 @@ let sayHi = function() { }; ``` -В коде выше функция создаётся и явно присваивается переменной, как любое другое значение. По сути без разницы, как мы определили функцию, это просто значение, хранимое в переменной `sayHi`. +Здесь мы можем видеть переменную `sayHi`, получающую значение, новую функцию, созданную как `function() { alert("Привет"); }`. + +Поскольку создание функции происходит в контексте выражения присваивания (с правой стороны от `=`), это *Function Expression*. + +Обратите внимание, что после ключевого слова `function` нет имени. Для Function Expression допускается его отсутствие. + +Здесь мы сразу присваиваем её переменной, так что смысл этих примеров кода один и тот же: "создать функцию и поместить её в переменную `sayHi`". + +В более сложных ситуациях, с которыми мы столкнёмся позже, функция может быть создана и немедленно вызвана, или запланирована для дальнейшего выполнения, нигде не сохраняясь, таким образом, оставаясь анонимной. -Смысл обоих примеров кода одинаков: "создать функцию и поместить её значение в переменную `sayHi`". +## Функция - это значение -Мы можем даже вывести это значение с помощью `alert`: +Давайте повторим: независимо от того, как создаётся функция - она является значением. В обоих приведённых выше примерах функция хранится в переменной `sayHi`. + +Мы даже можем вывести это значение с помощью `alert`: ```js run function sayHi() { @@ -35,14 +47,13 @@ function sayHi() { alert( sayHi ); // выведет код функции */!* ``` +Обратите внимание, что последняя строка не вызывает функцию, потому что после `sayHi` нет круглых скобок. Существуют языки программирования, в которых любое упоминание имени функции приводит к её выполнению, но JavaScript к таким не относится. -Обратите внимание, что последняя строка не вызывает функцию `sayHi`, после её имени нет круглых скобок. Существуют языки программирования, в которых любое упоминание имени функции совершает её вызов. JavaScript - не один из них. - -В JavaScript функции - это значения, поэтому мы и обращаемся с ними, как со значениями. Код выше выведет строковое представление функции, которое является её исходным кодом. +В JavaScript функция - это значение, поэтому мы можем обращаться с ней как со значением. Приведённый выше код показывает её строковое представление, которое является её исходным кодом. -Конечно, функция - не обычное значение, в том смысле, что мы можем вызвать его при помощи скобок: `sayHi()`. +Конечно, функция - это особое значение, в том смысле, что мы можем вызвать её как `sayHi()`. -Но всё же это значение. Поэтому мы можем делать с ним то же самое, что и с любым другим значением. +Но всё же это значение. Поэтому мы можем работать с ней так же, как и с другими видами значений. Мы можем скопировать функцию в другую переменную: @@ -53,20 +64,20 @@ function sayHi() { // (1) создаём let func = sayHi; // (2) копируем -func(); // Привет // (3) вызываем копию (работает)! -sayHi(); // Привет // прежняя тоже работает (почему бы нет) +func(); // Привет // (3) вызываем копию (работает)! +sayHi(); // Привет // эта тоже все ещё работает (почему бы и нет) ``` Давайте подробно разберём всё, что тут произошло: -1. Объявление Function Declaration `(1)` создало функцию и присвоило её значение переменной с именем `sayHi`. +1. Объявление Function Declaration `(1)` создаёт функцию и помещает её в переменную с именем `sayHi`. 2. В строке `(2)` мы скопировали её значение в переменную `func`. Обратите внимание (ещё раз): нет круглых скобок после `sayHi`. Если бы они были, то выражение `func = sayHi()` записало бы *результат вызова* `sayHi()` в переменную `func`, а не саму *функцию* `sayHi`. -3. Теперь функция может быть вызвана с помощью обеих переменных `sayHi()` и `func()`. +3. Теперь функция может вызываться как `sayHi()`, так и `func()`. -Заметим, что мы могли бы использовать и Function Expression для того, чтобы создать `sayHi` в первой строке: +Мы также могли бы использовать Function Expression для объявления `sayHi` в первой строке: ```js -let sayHi = function() { +let sayHi = function() { // (1) создаём alert( "Привет" ); }; @@ -74,7 +85,7 @@ let func = sayHi; // ... ``` -Результат был бы таким же. +Всё будет работать так же. ````smart header="Зачем нужна точка с запятой в конце?" У вас мог возникнуть вопрос: Почему в Function Expression ставится точка с запятой `;` на конце, а в Function Declaration нет: @@ -89,14 +100,14 @@ let sayHi = function() { }*!*;*/!* ``` -Ответ прост: -- Нет необходимости в `;` в конце блоков кода и синтаксических конструкций, которые их используют, таких как `if { ... }`, `for { }`, `function f { }` и т.д. -- Function Expression использует внутри себя инструкции присваивания `let sayHi = ...;` как значение. Это не блок кода, а выражение с присваиванием. Таким образом, точка с запятой не относится непосредственно к Function Expression, она лишь завершает инструкцию. +Ответ прост: Function Expression создаётся здесь как `function(...) {...}` внутри выражения присваивания: `let sayHi = …;`. Точку с запятой `;` рекомендуется ставить в конце выражения, она не является частью синтаксиса функции. + +Точка с запятой нужна там для более простого присваивания, такого как `let sayHi = 5;`, а также для присваивания функции. ```` ## Функции-"колбэки" -Рассмотрим ещё примеры функциональных выражений и передачи функции как значения. +Давайте рассмотрим больше примеров передачи функции в виде значения и использования функциональных выражений. Давайте напишем функцию `ask(question, yes, no)` с тремя параметрами: @@ -133,9 +144,9 @@ ask("Вы согласны?", showOk, showCancel); На практике подобные функции очень полезны. Основное отличие "реальной" функции `ask` от примера выше будет в том, что она использует более сложные способы взаимодействия с пользователем, чем простой вызов `confirm`. В браузерах такие функции обычно отображают красивые диалоговые окна. Но это уже другая история. -**Аргументы функции `ask` ещё называют *функциями-колбэками* или просто *колбэками*.** +**Аргументы `showOk` и `showCancel` функции `ask` называются *функциями-колбэками* или просто *колбэками*.** -Ключевая идея в том, что мы передаём функцию и ожидаем, что она вызовется обратно (от англ. "call back" - обратный вызов) когда-нибудь позже, если это будет необходимо. В нашем случае, `showOk` становится *колбэком*' для ответа "yes", а `showCancel` -- для ответа "no". +Ключевая идея в том, что мы передаём функцию и ожидаем, что она вызовется обратно (от англ. "call back" - обратный вызов) когда-нибудь позже, если это будет необходимо. В нашем случае, `showOk` становится *колбэком* для ответа "yes", а `showCancel` -- для ответа "no". Мы можем переписать этот пример значительно короче, используя Function Expression: @@ -164,7 +175,7 @@ ask( ```smart header="Функция - это значение, представляющее \"действие\"" Обычные значения, такие как строки или числа представляют собой *данные*. -Функции, с другой стороны, можно воспринимать как "действия". +Функции, с другой стороны, можно воспринимать как *действия*. Мы можем передавать их из переменной в переменную и запускать, когда захотим. ``` @@ -174,9 +185,9 @@ ask( Давайте разберём ключевые отличия Function Declaration от Function Expression. -Во-первых, синтаксис: как определить, что есть что в коде. +Во-первых, синтаксис: как отличить их друг от друга в коде. -- Function Declaration: функция объявляется отдельной конструкцией "function..." в основном потоке кода. +- *Function Declaration*: функция объявляется отдельной конструкцией "function..." в основном потоке кода. ```js // Function Declaration @@ -184,7 +195,7 @@ ask( return a + b; } ``` -- Function Expression: функция, созданная внутри другого выражения или синтаксической конструкции. В данном случае функция создаётся в правой части "выражения присваивания" `=`: +- *Function Expression*: функция, созданная внутри другого выражения или синтаксической конструкции. В данном случае функция создаётся в правой части "выражения присваивания" `=`: ```js // Function Expression @@ -193,7 +204,7 @@ ask( }; ``` -Более тонкое отличие состоит, в том, *когда* создаётся функция движком JavaScript. +Более тонкое отличие состоит в том, *когда* создаётся функция движком JavaScript. **Function Expression создаётся, когда выполнение доходит до него, и затем уже может использоваться.** @@ -201,13 +212,13 @@ ask( С Function Declaration всё иначе. -**Function Declaration можно использовать во всем скрипте (или блоке кода, если функция объявлена в блоке).** +**Function Declaration может быть вызвана раньше, чем она объявлена.** Другими словами, когда движок JavaScript *готовится* выполнять скрипт или блок кода, прежде всего он ищет в нём Function Declaration и создаёт все такие функции. Можно считать этот процесс "стадией инициализации". И только после того, как все объявления Function Declaration будут обработаны, продолжится выполнение. -В результате, функции, созданные, как Function Declaration могут быть вызваны раньше своих определений. +В результате функции, созданные как Function Declaration, могут быть вызваны раньше своих определений. Например, так будет работать: @@ -241,9 +252,9 @@ let sayHi = function(name) { // (*) магии больше нет **В строгом режиме, когда Function Declaration находится в блоке `{...}`, функция доступна везде внутри блока. Но не снаружи него.** -Для примера давайте представим, что нам нужно создать функцию `welcome()` в зависимости от значения переменной `age`, которое мы получим во время выполнения кода. И затем запланируем использовать её когда-нибудь в будущем. +Для примера давайте представим, что нам нужно объявить функцию `welcome()` в зависимости от значения переменной `age`, которое мы получим во время выполнения кода. И затем запланируем использовать её когда-нибудь в будущем. -Такой код, использующий Function Declaration, работать не будет: +Если мы попробуем использовать Function Declaration, это не заработает так, как задумывалось: ```js run let age = prompt("Сколько Вам лет?", 18); @@ -274,7 +285,7 @@ welcome(); // Error: welcome is not defined Вот ещё один пример: ```js run -let age = 16; // присвоим для примера 16 +let age = 16; // возьмём для примера 16 if (age < 18) { *!* @@ -308,7 +319,7 @@ welcome(); // Ошибка: welcome is not defined Верным подходом будет воспользоваться функцией, объявленной при помощи Function Expression, и присвоить значение `welcome` переменной, объявленной снаружи `if`, что обеспечит нам нужную видимость. -Такой код работает, как ожидалось: +Такой код заработает, как ожидалось: ```js run let age = prompt("Сколько Вам лет?", 18); @@ -334,7 +345,7 @@ welcome(); // теперь всё в порядке */!* ``` -Можно упростить этот код ещё сильнее, используя условный оператор `?`: +Или мы могли бы упростить это ещё сильнее, используя условный оператор `?`: ```js run let age = prompt("Сколько Вам лет?", 18); @@ -354,17 +365,17 @@ welcome(); // теперь всё в порядке Также функции вида `function f(…) {…}` чуть более заметны в коде, чем `let f = function(…) {…}`. Function Declaration легче "ловятся глазами". -...Но если Function Declaration нам не подходит по какой-то причине (мы рассмотрели это в примере выше), то можно использовать объявление при помощи Function Expression. +...Но если Function Declaration нам не подходит по какой-то причине, или нам нужно условное объявление (мы рассмотрели это в примере выше), то следует использовать Function Expression. ``` ## Итого - Функции - это значения. Они могут быть присвоены, скопированы или объявлены в любом месте кода. -- Если функция объявлена как отдельная инструкция в основном потоке кода, то это Function Declaration. -- Если функция была создана как часть выражения, то считается, что эта функция объявлена при помощи Function Expression. +- Если функция объявлена как отдельная инструкция в основном потоке кода, то это “Function Declaration”. +- Если функция была создана как часть выражения, то это “Function Expression”. - Function Declaration обрабатываются перед выполнением блока кода. Они видны во всём блоке. -- Функции, объявленные при помощи Function Expression, создаются, только когда поток выполнения достигает их. +- Функции, объявленные при помощи Function Expression, создаются только когда поток выполнения достигает их. -В большинстве случаев, когда нам нужно создать функцию, предпочтительно использовать Function Declaration, т.к. функция будет видима до своего объявления в коде. Это позволяет более гибко организовывать код, и улучшает его читаемость. +В большинстве случаев, когда нам нужно объявить функцию, Function Declaration предпочтительнее, т.к функция будет видна до своего объявления в коде. Это даёт нам больше гибкости в организации кода, и, как правило, делает его более читабельным. -Таким образом, мы должны прибегать к объявлению функций при помощи Function Expression в случае, когда синтаксис Function Declaration не подходит для нашей задачи. Мы рассмотрели несколько таких примеров в этой главе, и рассмотрим их ещё больше в будущем. +Исходя из этого, мы должны использовать Function Expression только тогда, когда Function Declaration не подходит для нашей задачи. Мы рассмотрели несколько таких примеров в этой главе, и увидим ещё больше в будущем. diff --git a/1-js/02-first-steps/17-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md index 374f6d9172..25bc971ce9 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/article.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md @@ -1,16 +1,16 @@ -# Функции-стрелки, основы +# Стрелочные функции, основы -Существует ещё более простой и краткий синтаксис для создания функций, который часто лучше, чем синтаксис Function Expression. +Существует ещё один очень простой и лаконичный синтаксис для создания функций, который часто лучше, чем Function Expression. Он называется "функции-стрелки" или "стрелочные функции" (arrow functions), т.к. выглядит следующим образом: ```js -let func = (arg1, arg2, ...argN) => expression +let func = (arg1, arg2, ...argN) => expression; ``` -...Такой код создаёт функцию `func` с аргументами `arg1..argN` и вычисляет `expression` с правой стороны с их использованием, возвращая результат. +Это создаёт функцию `func`, которая принимает аргументы `arg1..argN`, затем вычисляет `expression` в правой части с их использованием и возвращает результат. -Другими словами, это более короткий вариант такой записи: +Другими словами, это сокращённая версия: ```js let func = function(arg1, arg2, ...argN) { @@ -18,12 +18,12 @@ let func = function(arg1, arg2, ...argN) { }; ``` -Давайте взглянем на конкретный пример: +Давайте рассмотрим конкретный пример: ```js run let sum = (a, b) => a + b; -/* Более короткая форма для: +/* Эта стрелочная функция представляет собой более короткую форму: let sum = function(a, b) { return a + b; @@ -34,21 +34,20 @@ alert( sum(1, 2) ); // 3 ``` -То есть, `(a, b) => a + b` задаёт функцию с двумя аргументами `a` и `b`, которая при запуске вычисляет выражение справа `a + b` и возвращает его результат. +Как вы можете видеть, `(a, b) => a + b` задаёт функцию, которая принимает два аргумента с именами `a` и `b`. И при выполнении она вычисляет выражение `a + b` и возвращает результат. - Если у нас только один аргумент, то круглые скобки вокруг параметров можно опустить, сделав запись ещё короче: ```js run - // тоже что и - // let double = function(n) { return n * 2 } *!* let double = n => n * 2; + // примерно то же, что и: let double = function(n) { return n * 2 } */!* alert( double(3) ); // 6 ``` -- Если нет аргументов, указываются пустые круглые скобки: +- Если аргументов нет, круглые скобки будут пустыми, но они должны присутствовать: ```js run let sayHi = () => alert("Hello!"); @@ -56,7 +55,7 @@ alert( sum(1, 2) ); // 3 sayHi(); ``` -Функции-стрелки могут быть использованы так же, как и Function Expression. +Стрелочные функции можно использовать так же, как и Function Expression. Например, для динамического создания функции: @@ -64,46 +63,50 @@ alert( sum(1, 2) ); // 3 let age = prompt("Сколько Вам лет?", 18); let welcome = (age < 18) ? - () => alert('Привет') : + () => alert('Привет!') : () => alert("Здравствуйте!"); -welcome(); // теперь всё в порядке +welcome(); ``` -Поначалу функции-стрелки могут показаться необычными и трудночитаемыми, но это быстро пройдёт, как только глаза привыкнут к этим конструкциям. +Поначалу стрелочные функции могут показаться необычными и даже трудночитаемыми, но это быстро пройдёт по мере того, как глаза привыкнут к этим конструкциям. -Они очень удобны для простых однострочных действий, когда лень писать много букв. +Они очень удобны для простых однострочных действий, когда лень писать много слов. ## Многострочные стрелочные функции -В примерах выше аргументы использовались слева от `=>`, а справа вычислялось выражение с их значениями. +Стрелочные функции, которые мы видели до этого, были очень простыми. Они брали аргументы слева от `=>` и вычисляли и возвращали выражение справа. -Порой нам нужно что-то посложнее, например, выполнить несколько инструкций. Это также возможно, нужно лишь заключить инструкции в фигурные скобки. И использовать `return` внутри них, как в обычной функции. +Иногда нам нужна более сложная функция, с несколькими выражениями и инструкциями. Это также возможно, нужно лишь заключить их в фигурные скобки. При этом важное отличие - в том, что в таких скобках для возврата значения нужно использовать `return` (как в обычных функциях). -Например: +Вроде этого: ```js run let sum = (a, b) => { // фигурная скобка, открывающая тело многострочной функции let result = a + b; *!* - return result; // при фигурных скобках для возврата значения нужно явно вызвать return + return result; // если мы используем фигурные скобки, то нам нужно явно указать "return" */!* }; alert( sum(1, 2) ); // 3 ``` -```smart header="Дальше будет ещё информация" -Здесь мы рассмотрели функции-стрелки как способ писать меньше букв. Но это далеко не всё! +```smart header="Дальше - больше" +Здесь мы представили главной целью стрелочных функций краткость. Но это ещё не всё! -Стрелочные функции обладают другими интересными особенностями. Их изучение требует знания некоторых других возможностей языка JavaScript, поэтому мы вернёмся к стрелочным функциям позже, в главе
253 или менее чем -253. Так как `BigInt` числа нужны достаточно редко, мы рассмотрим их в отдельной главе (253-1) или менее чем -(253-1). Так как `BigInt` числа нужны достаточно редко, мы рассмотрим их в отдельной главе \\`|Кавычки|
|`\\`|Обратный слеш|
|`\t`|Знак табуляции|
|`\b`, `\f`, `\v`| Backspace, Form Feed и Vertical Tab — оставлены для обратной совместимости, сейчас не используются. |
-|`\xXX`|Символ с шестнадцатеричным юникодным кодом `XX`, например, `'\x7A'` — то же самое, что `'z'`.|
-|`\uXXXX`|Символ в кодировке UTF-16 с шестнадцатеричным кодом `XXXX`, например, `\u00A9` — юникодное представление знака копирайта, `©`. Код должен состоять ровно из 4 шестнадцатеричных цифр. |
-|`\u{X…XXXXXX}` (от 1 до 6 шестнадцатеричных цифр)|Символ в кодировке UTF-32 с шестнадцатеричным кодом от U+0000 до U+10FFFF. Некоторые редкие символы кодируются двумя 16-битными словами и занимают 4 байта. Так можно вставлять символы с длинным кодом. |
-
-Примеры с Юникодом:
-
-```js run
-// ©
-alert( "\u00A9" );
-
-// Длинные юникодные коды
-// 佫, редкий китайский иероглиф
-alert( "\u{20331}" );
-// 😍, лицо с улыбкой и глазами в форме сердец
-alert( "\u{1F60D}" );
-```
-Все спецсимволы начинаются с обратного слеша, `\` — так называемого "символа экранирования".
+Как вы можете видеть, все спецсимволы начинаются с обратного слеша, `\` — так называемого "символа экранирования".
Он также используется, если необходимо вставить в строку кавычку.
@@ -146,35 +131,38 @@ alert( `My\n`.length ); // 3
## Доступ к символам
-Получить символ, который занимает позицию `pos`, можно с помощью квадратных скобок: `[pos]`. Также можно использовать метод `charAt`: [str.charAt(pos)](mdn:js/String/charAt). Первый символ занимает нулевую позицию:
+Получить символ, который занимает позицию `pos`, можно с помощью квадратных скобок: `[pos]`. Также можно использовать метод [str.at(pos)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/at). Первый символ занимает нулевую позицию:
```js run
let str = `Hello`;
// получаем первый символ
alert( str[0] ); // H
-alert( str.charAt(0) ); // H
+alert( str.at(0) ); // H
// получаем последний символ
alert( str[str.length - 1] ); // o
+alert( str.at(-1) ); // o
```
-Квадратные скобки — современный способ получить символ, в то время как `charAt` существует в основном по историческим причинам.
+Как вы можете видеть, преимущество метода `.at(pos)` заключается в том, что он допускает отрицательную позицию. Если `pos` -- отрицательное число, то отсчет ведется от конца строки.
+
+Таким образом, `.at(-1)` означает последний символ, а `.at(-2)` -- тот, что перед ним, и т.д.
-Разница только в том, что если символ с такой позицией отсутствует, тогда `[]` вернёт `undefined`, а `charAt` — пустую строку:
+Квадратные скобки всегда возвращают `undefined` для отрицательных индексов. Например:
```js run
let str = `Hello`;
-alert( str[1000] ); // undefined
-alert( str.charAt(1000) ); // '' (пустая строка)
+alert( str[-2] ); // undefined
+alert( str.at(-2) ); // l
```
Также можно перебрать строку посимвольно, используя `for..of`:
```js run
for (let char of "Hello") {
- alert(char); // H,e,l,l,o (char — сначала "H", потом "e", потом "l" и т. д.)
+ alert(char); // H,e,l,l,o (char — сначала "H", потом "e", потом "l" и т.д.)
}
```
@@ -216,7 +204,7 @@ alert( 'Interface'.toLowerCase() ); // interface
Если мы захотим перевести в нижний регистр какой-то конкретный символ:
-```js
+```js run
alert( 'Interface'[0].toLowerCase() ); // 'i'
```
@@ -313,7 +301,7 @@ if (str.indexOf("Widget") != -1) {
```
#### Трюк с побитовым НЕ
-Существует старый трюк с использованием [побитового оператора НЕ](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#.7E_.28Bitwise_NOT.29) — `~`. Он преобразует число в 32-разрядное целое со знаком (signed 32-bit integer). Дробная часть, в случае, если она присутствует, отбрасывается. Затем все биты числа инвертируются.
+Существует старый трюк с использованием [побитового оператора НЕ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT) — `~`. Он преобразует число в 32-разрядное целое со знаком (signed 32-bit integer). Дробная часть, в случае, если она присутствует, отбрасывается. Затем все биты числа инвертируются.
На практике это означает простую вещь: для 32-разрядных целых чисел значение `~n` равно `-(n+1)`.
@@ -372,8 +360,8 @@ alert( "Midget".includes("id", 3) ); // false, поиск начат с пози
Методы [str.startsWith](mdn:js/String/startsWith) и [str.endsWith](mdn:js/String/endsWith) проверяют, соответственно, начинается ли и заканчивается ли строка определённой строкой:
```js run
-alert( "Widget".startsWith("Wid") ); // true, "Wid" — начало "Widget"
-alert( "Widget".endsWith("get") ); // true, "get" — окончание "Widget"
+alert( "*!*Wid*/!*get".startsWith("Wid") ); // true, "Wid" — начало "Widget"
+alert( "Wid*!*get*/!*".endsWith("get") ); // true, "get" — окончание "Widget"
```
## Получение подстроки
@@ -451,12 +439,14 @@ alert( "Widget".endsWith("get") ); // true, "get" — окончание "Widget
alert( str.substr(-4, 2) );
```
+ Этот метод находится в [Annex B](https://tc39.es/ecma262/#sec-string.prototype.substr) спецификации языка. Это означает, что его должны поддерживать только браузерные движки JavaScript, и использовать его не рекомендуется. Но на практике он поддерживается везде.
+
Давайте подытожим, как работают эти методы, чтобы не запутаться:
| метод | выбирает… | отрицательные значения |
|--------|-----------|-----------|
| `slice(start, end)` | от `start` до `end` (не включая `end`) | можно передавать отрицательные значения |
-| `substring(start, end)` | между `start` и `end` | отрицательные значения равнозначны `0` |
+| `substring(start, end)` | между `start` и `end` (не включая `end`) | отрицательные значения равнозначны `0` |
| `substr(start, length)` | `length` символов, начиная от `start` | значение `start` может быть отрицательным |
```smart header="Какой метод выбрать?"
@@ -506,13 +496,6 @@ alert( "Widget".endsWith("get") ); // true, "get" — окончание "Widget
alert( String.fromCodePoint(90) ); // Z
```
- Также можно добавлять юникодные символы по их кодам, используя `\u` с шестнадцатеричным кодом символа:
-
- ```js run
- // 90 — 5a в шестнадцатеричной системе счисления
- alert( '\u005a' ); // Z
- ```
-
Давайте сделаем строку, содержащую символы с кодами от `65` до `220` — это латиница и ещё некоторые распространённые символы:
```js run
@@ -535,13 +518,13 @@ alert( str );
- Все строчные буквы идут после заглавных, так как их коды больше.
- Некоторые буквы, такие как `Ö`, вообще находятся вне основного алфавита. У этой буквы код больше, чем у любой буквы от `a` до `z`.
-### Правильное сравнение
+### Правильное сравнение [#correct-comparisons]
"Правильный" алгоритм сравнения строк сложнее, чем может показаться, так как разные языки используют разные алфавиты.
Поэтому браузеру нужно знать, какой язык использовать для сравнения.
-К счастью, все современные браузеры (для IE10− нужна дополнительная библиотека [Intl.JS](https://github.com/andyearnshaw/Intl.js/)) поддерживают стандарт [ECMA 402](http://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf), обеспечивающий правильное сравнение строк на разных языках с учётом их правил.
+К счастью, все современные браузеры (для IE10− нужна дополнительная библиотека [Intl.JS](https://github.com/andyearnshaw/Intl.js/)) поддерживают стандарт [ECMA 402](https://www.ecma-international.org/ecma-402/1.0/ECMA-402.pdf), обеспечивающий правильное сравнение строк на разных языках с учётом их правил.
Для этого есть соответствующий метод.
@@ -559,119 +542,12 @@ alert( 'Österreich'.localeCompare('Zealand') ); // -1
У этого метода есть два дополнительных аргумента, которые указаны в [документации](mdn:js/String/localeCompare). Первый позволяет указать язык (по умолчанию берётся из окружения) — от него зависит порядок букв. Второй — определить дополнительные правила, такие как чувствительность к регистру, а также следует ли учитывать различия между `"a"` и `"á"`.
-## Как всё устроено, Юникод
-
-```warn header="Глубокое погружение в тему"
-Этот раздел более подробно описывает, как устроены строки. Такие знания пригодятся, если вы намерены работать с эмодзи, редкими математическими символами, иероглифами, либо с ещё какими-то редкими символами.
-
-Если вы не планируете их поддерживать, эту секцию можно пропустить.
-```
-
-### Суррогатные пары
-
-Многие символы возможно записать одним 16-битным словом: это и буквы большинства европейских языков, и числа, и даже многие иероглифы.
-
-Но 16 битов — это 65536 комбинаций, так что на все символы этого, разумеется, не хватит. Поэтому редкие символы записываются двумя 16-битными словами — это также называется "суррогатная пара".
-
-Длина таких строк — `2`:
-
-```js run
-alert( '𝒳'.length ); // 2, MATHEMATICAL SCRIPT CAPITAL X
-alert( '😂'.length ); // 2, FACE WITH TEARS OF JOY
-alert( '𩷶'.length ); // 2, редкий китайский иероглиф
-```
-
-Обратите внимание, суррогатные пары не существовали, когда был создан JavaScript, поэтому язык не обрабатывает их адекватно!
-
-Ведь в каждой из этих строк только один символ, а `length` показывает длину `2`.
-
-`String.fromCodePoint` и `str.codePointAt` — два редких метода, правильно работающие с суррогатными парами, но они и появились в языке недавно. До них были только [String.fromCharCode](mdn:js/String/fromCharCode) и [str.charCodeAt](mdn:js/String/charCodeAt). Эти методы, вообще, делают то же самое, что `fromCodePoint/codePointAt`, но не работают с суррогатными парами.
-
-Получить символ, представленный суррогатной парой, может быть не так просто, потому что суррогатная пара интерпретируется как два символа:
-
-```js run
-alert( '𝒳'[0] ); // странные символы…
-alert( '𝒳'[1] ); // …части суррогатной пары
-```
-
-Части суррогатной пары не имеют смысла сами по себе, так что вызовы `alert` в этом примере покажут лишь мусор.
-
-Технически, суррогатные пары возможно обнаружить по их кодам: если код символа находится в диапазоне `0xd800..0xdbff`, то это — первая часть суррогатной пары. Следующий символ — вторая часть — имеет код в диапазоне `0xdc00..0xdfff`. Эти два диапазона выделены исключительно для суррогатных пар по стандарту.
-
-В данном случае:
-
-```js run
-// charCodeAt не поддерживает суррогатные пары, поэтому возвращает код для их частей
-
-alert( '𝒳'.charCodeAt(0).toString(16) ); // d835, между 0xd800 и 0xdbff
-alert( '𝒳'.charCodeAt(1).toString(16) ); // dcb3, между 0xdc00 и 0xdfff
-```
-
-Дальше в главе handler вызывается на этом поле для ввода:
++ + +
+
+А на этом поле функция handler вызывается с применением debounce – debounce(handler, 1000):
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md
index 82c2ecb5fe..5952020f11 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md
@@ -1,27 +1,12 @@
```js demo
-function debounce(f, ms) {
-
- let isCooldown = false;
-
+function debounce(func, ms) {
+ let timeout;
return function() {
- if (isCooldown) return;
-
- f.apply(this, arguments);
-
- isCooldown = true;
-
- setTimeout(() => isCooldown = false, ms);
+ clearTimeout(timeout);
+ timeout = setTimeout(() => func.apply(this, arguments), ms);
};
-
}
-```
-
-Вызов `debounce` возвращает обёртку. Возможны два состояния:
-- `isCooldown = false` -- готова к выполнению.
-- `isCooldown = true` -- ожидание окончания тайм-аута.
-В первом вызове `isCoolDown = false`, поэтому вызов продолжается, и состояние изменяется на `true`.
-
-Пока `isCoolDown` имеет значение `true`, все остальные вызовы игнорируются.
+```
-Затем `setTimeout` устанавливает его в `false` после заданной задержки.
+Вызов `debounce` возвращает обёртку. При вызове он планирует вызов исходной функции через указанное количество `ms` и отменяет предыдущий такой тайм-аут.
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md
index 9c87aa129f..bea131145e 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md
@@ -4,20 +4,49 @@ importance: 5
# Декоратор debounce
-Результатом декоратора `debounce(f, ms)` должна быть обёртка, которая передаёт вызов `f` не более одного раза в `ms` миллисекунд.
-Другими словами, когда мы вызываем `debounce`, это гарантирует, что все остальные вызовы будут игнорироваться в течение `ms`.
+Результат декоратора `debounce(f, ms)` – это обёртка, которая откладывает вызовы `f`, пока не пройдёт `ms` миллисекунд бездействия (без вызовов, «cooldown period»), а затем вызывает `f` один раз с последними аргументами.
-Например:
+Другими словами, `debounce` – это так называемый секретарь, который принимает «телефонные звонки», и ждёт, пока не пройдет `ms` миллисекунд тишины. И только после этого передает «начальнику» информацию о последнем звонке (вызывает непосредственно `f`).
+
+Например, у нас была функция `f` и мы заменили её на `f = debounce(f, 1000)`.
+
+Затем, если обёрнутая функция вызывается в 0, 200 и 500 мс, а потом вызовов нет, то фактическая `f` будет вызвана только один раз, в 1500 мс. То есть: по истечению 1000 мс от последнего вызова.
+
+
+
+...И она получит аргументы самого последнего вызова, остальные вызовы игнорируются.
+
+Ниже код этого примера (используется декоратор debounce из библиотеки [Lodash](https://lodash.com/docs/4.17.15#debounce)):
```js no-beautify
-let f = debounce(alert, 1000);
+let f = _.debounce(alert, 1000);
+
+f("a");
+setTimeout( () => f("b"), 200);
+setTimeout( () => f("c"), 500);
+
+// Обёрнутая в debounce функция ждёт 1000 мс после последнего вызова, а затем запускает: alert("c")
+```
-f(1); // выполняется немедленно
-f(2); // проигнорирован
+Теперь практический пример. Предположим, пользователь набирает какой-то текст, и мы хотим отправить запрос на сервер, когда ввод этого текста будет завершён.
-setTimeout( () => f(3), 100); // проигнорирован (прошло только 100 мс)
-setTimeout( () => f(4), 1100); // выполняется
-setTimeout( () => f(5), 1500); // проигнорирован (прошло только 400 мс от последнего вызова)
+Нет смысла отправлять запрос для каждого набранного символа. Вместо этого мы хотели бы подождать, а затем обработать весь результат.
+
+В браузере мы можем настроить обработчик событий – функцию, которая вызывается при каждом изменении поля для ввода. Обычно обработчик событий вызывается очень часто, для каждого набранного символа. Но если мы воспользуемся `debounce` на 1000мс, то он будет вызван только один раз, через 1000мс после последнего ввода символа.
+
+```online
+
+В этом живом примере обработчик помещает результат в поле ниже, попробуйте:
+
+[iframe border=1 src="debounce" height=200]
+
+Видите? На втором поле вызывается функция, обёрнутая в `debounce`, поэтому его содержимое обрабатывается через 1000мс с момента последнего ввода.
```
-На практике `debounce` полезен для функций, которые получают/обновляют данные, и мы знаем, что повторный вызов в течение короткого промежутка времени не даст ничего нового. Так что лучше не тратить на него ресурсы.
+Таким образом, `debounce` – это отличный способ обработать последовательность событий: будь то последовательность нажатий клавиш, движений мыши или ещё что-либо.
+
+Он ждёт заданное время после последнего вызова, а затем запускает свою функцию, которая может обработать результат.
+
+Задача — реализовать декоратор `debounce`.
+
+Подсказка: это всего лишь несколько строк, если вдуматься :)
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md
index 4d64b9d427..1f1a8c24c1 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md
@@ -34,6 +34,6 @@ function throttle(func, ms) {
1. Во время первого вызова обёртка просто вызывает `func` и устанавливает состояние задержки (`isThrottled = true`).
2. В этом состоянии все вызовы запоминаются в `saveArgs / saveThis`. Обратите внимание, что контекст и аргументы одинаково важны и должны быть запомнены. Они нам нужны для того, чтобы воспроизвести вызов позднее.
-3. ... Затем по прошествии `ms` миллисекунд срабатывает `setTimeout`. Состояние задержки сбрасывается (`isThrottled = false`). И если мы проигнорировали вызовы, то "обёртка" выполняется с последними запомненными аргументами и контекстом.
+3. Затем по прошествии `ms` миллисекунд срабатывает `setTimeout`. Состояние задержки сбрасывается (`isThrottled = false`). И если мы проигнорировали вызовы, то "обёртка" выполняется с последними запомненными аргументами и контекстом.
На третьем шаге выполняется не `func`, а `wrapper`, потому что нам нужно не только выполнить `func`, но и ещё раз установить состояние задержки и таймаут для его сброса.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
index fe5949e7df..f6f7aab282 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md
@@ -4,18 +4,21 @@ importance: 5
# Тормозящий (throttling) декоратор
-Создайте "тормозящий" декоратор `throttle(f, ms)`, который возвращает обёртку, передавая вызов в `f` не более одного раза в `ms` миллисекунд. Те вызовы, которые попадают в период "торможения", игнорируются.
+Создайте «тормозящий» декоратор `throttle(f, ms)`, который возвращает обёртку.
-**Отличие от `debounce` - если проигнорированный вызов является последним во время "задержки", то он выполняется в конце.**
+При многократном вызове он передает вызов `f` не чаще одного раза в `ms` миллисекунд.
-Давайте рассмотрим реальное применение, чтобы лучше понять это требование и выяснить, откуда оно взято.
+По сравнению с декоратором `debounce` поведение совершенно другое:
+- `debounce` запускает функцию один раз после периода «бездействия». Подходит для обработки конечного результата.
+- `throttle` запускает функцию не чаще, чем указанное время `ms`. Подходит для регулярных обновлений, которые не должны быть слишком частыми.
-**Например, мы хотим отслеживать движения мыши.**
+Другими словами, `throttle` похож на секретаря, который принимает телефонные звонки, но при этом беспокоит начальника (вызывает непосредственно `f`) не чаще, чем один раз в `ms` миллисекунд.
+Давайте рассмотрим реальное применение, чтобы лучше понять это требование и выяснить, откуда оно взято.
-В браузере мы можем объявить функцию, которая будет запускаться при каждом движении указателя и получать его местоположение. Во время активного использования мыши эта функция запускается очень часто, это может происходить около 100 раз в секунду (каждые 10 мс).
+**Например, мы хотим отслеживать движения мыши.**
-**Мы бы хотели обновлять информацию на странице при передвижениях.**
+В браузере мы можем реализовать функцию, которая будет запускаться при каждом перемещении указателя и получать его местоположение. Во время активного использования мыши эта функция запускается очень часто, что-то около 100 раз в секунду (каждые 10 мс). **Мы бы хотели обновлять некоторую информацию на странице при передвижении указателя.**
...Но функция обновления `update()` слишком ресурсоёмкая, чтобы делать это при каждом микродвижении. Да и нет смысла делать обновление чаще, чем один раз в 1000 мс.
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
index 94cac25d51..6fc33f17f8 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
@@ -62,7 +62,7 @@ alert( "Again: " + slow(2) ); // возвращаем из кеша
- При необходимости мы можем объединить несколько декораторов (речь об этом пойдёт позже).
-## Применение "func.call" для передачи контекста.
+## Применение "func.call" для передачи контекста
Упомянутый выше кеширующий декоратор не подходит для работы с методами объектов.
diff --git a/1-js/06-advanced-functions/10-bind/article.md b/1-js/06-advanced-functions/10-bind/article.md
index 9b1c8d4731..1c597cdf12 100644
--- a/1-js/06-advanced-functions/10-bind/article.md
+++ b/1-js/06-advanced-functions/10-bind/article.md
@@ -191,7 +191,7 @@ for (let key in user) {
}
```
-Некоторые JS-библиотеки предоставляют встроенные функции для удобной массовой привязки контекста, например [_.bindAll(obj)](http://lodash.com/docs#bindAll) в lodash.
+Некоторые JS-библиотеки предоставляют встроенные функции для удобной массовой привязки контекста, например [_.bindAll(obj)](https://lodash.com/docs#bindAll) в lodash.
````
## Частичное применение
diff --git a/1-js/07-object-properties/01-property-descriptors/article.md b/1-js/07-object-properties/01-property-descriptors/article.md
index 7f776c76fd..40dbc8f601 100644
--- a/1-js/07-object-properties/01-property-descriptors/article.md
+++ b/1-js/07-object-properties/01-property-descriptors/article.md
@@ -194,7 +194,7 @@ alert(Object.keys(user)); // name
Флаг неконфигурируемого свойства (`configurable:false`) иногда предустановлен для некоторых встроенных объектов и свойств.
-Неконфигурируемое свойство не может быть удалено.
+Неконфигурируемое свойство не может быть удалено, его атрибуты не могут быть изменены.
Например, свойство `Math.PI` - только для чтения, неперечислимое и неконфигурируемое:
@@ -214,36 +214,58 @@ alert( JSON.stringify(descriptor, null, 2 ) );
То есть программист не сможет изменить значение `Math.PI` или перезаписать его.
```js run
-Math.PI = 3; // Ошибка
+Math.PI = 3; // Ошибка, потому что writable: false
// delete Math.PI тоже не сработает
```
+Мы также не можем изменить `writable`:
-Определение свойства как неконфигурируемого - это дорога в один конец. Мы не сможем отменить это действие, потому что `defineProperty` не работает с неконфигурируемыми свойствами.
+```js run
+// Ошибка, из-за configurable: false
+Object.defineProperty(Math, "PI", { writable: true });
+```
+Мы абсолютно ничего не можем сделать с `Math.PI`.
+
+Определение свойства как неконфигурируемого - это дорога в один конец. Мы не можем изменить его обратно с помощью `defineProperty`.
-В коде ниже мы делаем `user.name` "навечно запечатанной" константой:
+**Обратите внимание: `configurable: false` не даст изменить флаги свойства, а также не даст его удалить. При этом можно изменить значение свойства.**
+
+В коде ниже свойство `user.name` является неконфигурируемым, но мы все ещё можем изменить его значение (т.к. `writable: true`).
```js run
-let user = { };
+let user = {
+ name: "John"
+};
+
+Object.defineProperty(user, "name", {
+ configurable: false
+});
+
+user.name = "Pete"; // работает
+delete user.name; // Ошибка
+```
+А здесь мы делаем `user.name` "навечно запечатанной" константой, как и встроенный `Math.PI`:
+```js run
+let user = {
+ name: "John"
+};
Object.defineProperty(user, "name", {
- value: "John",
writable: false,
configurable: false
});
-*!*
// теперь невозможно изменить user.name или его флаги
// всё это не будет работать:
-// user.name = "Pete"
-// delete user.name
-// defineProperty(user, "name", ...)
-Object.defineProperty(user, "name", {writable: true}); // Ошибка
-*/!*
-```
+user.name = "Pete";
+delete user.name;
+Object.defineProperty(user, "name", { value: "Pete" });
+```
+
+```smart header="Единственное возможное изменение атрибута: writable true -> false"
+Есть небольшое исключение, касающееся изменения флагов.
-```smart header="Ошибки отображаются только в строгом режиме"
-В нестрогом режиме мы не увидим никаких ошибок при записи в свойства "только для чтения" и т.п. Эти операции всё равно не будут выполнены успешно. Действия, нарушающие ограничения флагов, в нестрогом режиме просто молча игнорируются.
+Мы можем изменить `writable: true` на `false` для неконфигурируемого свойства, тем самым предотвратив изменение его значения (чтобы добавить ещё один уровень защиты). Однако не наоборот.
```
## Метод Object.defineProperties
@@ -292,7 +314,7 @@ for (let key in user) {
...Но это не копирует флаги. Так что если нам нужен клон "получше", предпочтительнее использовать `Object.defineProperties`.
-Другое отличие в том, что `for..in` игнорирует символьные свойства, а `Object.getOwnPropertyDescriptors` возвращает дескрипторы *всех* свойств, включая свойства-символы.
+Другое отличие в том, что `for..in` игнорирует символьные и неперечислимые свойства, а `Object.getOwnPropertyDescriptors` возвращает дескрипторы *всех* свойств.
## Глобальное запечатывание объекта
diff --git a/1-js/07-object-properties/02-property-accessors/article.md b/1-js/07-object-properties/02-property-accessors/article.md
index 023449fa6f..5be8d15a1b 100644
--- a/1-js/07-object-properties/02-property-accessors/article.md
+++ b/1-js/07-object-properties/02-property-accessors/article.md
@@ -55,6 +55,8 @@ alert(user.fullName); // John Smith
Снаружи свойство-аксессор выглядит как обычное свойство. В этом и заключается смысл свойств-аксессоров. Мы не *вызываем* `user.fullName` как функцию, а *читаем* как обычное свойство: геттер выполнит всю работу за кулисами.
+На данный момент у `fullName` есть только геттер. Если мы попытаемся назначить `user.fullName=`, произойдёт ошибка:
+
```js run
let user = {
get fullName() {
diff --git a/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/task.md b/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/task.md
index 5f9791ee3e..624b27c3c6 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/task.md
+++ b/1-js/08-prototypes/01-prototype-inheritance/1-property-after-delete/task.md
@@ -12,6 +12,7 @@ importance: 5
let animal = {
jumps: null
};
+
let rabbit = {
__proto__: animal,
jumps: true
diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md
index eb354126cb..b02f250839 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/article.md
+++ b/1-js/08-prototypes/01-prototype-inheritance/article.md
@@ -18,10 +18,11 @@
Одним из них является использование `__proto__`, например так:
-```js run
+```js
let animal = {
eats: true
};
+
let rabbit = {
jumps: true
};
@@ -31,14 +32,6 @@ rabbit.__proto__ = animal;
*/!*
```
-```smart header="Свойство `__proto__` — исторически обусловленный геттер/сеттер для `[[Prototype]]`"
-Обратите внимание, что `__proto__` — *не то же самое*, что `[[Prototype]]`. Это геттер/сеттер для него.
-
-Он существует по историческим причинам, в современном языке его заменяют функции `Object.getPrototypeOf/Object.setPrototypeOf`, которые также получают/устанавливают прототип. Мы рассмотрим причины этого и сами функции позже.
-
-По спецификации `__proto__` должен поддерживаться только браузерами, но по факту все среды, включая серверную, поддерживают его. Далее мы будем в примерах использовать `__proto__`, так как это самый короткий и интуитивно понятный способ установки и чтения прототипа.
-```
-
Если мы ищем свойство в `rabbit`, а оно отсутствует, JavaScript автоматически берёт его из `animal`.
Например:
@@ -47,6 +40,7 @@ rabbit.__proto__ = animal;
let animal = {
eats: true
};
+
let rabbit = {
jumps: true
};
@@ -130,6 +124,8 @@ alert(longEar.jumps); // true (из rabbit)
+Теперь, если мы прочтём что-нибудь из `longEar`, и оно будет отсутствовать, JavaScript будет искать его в `rabbit`, а затем в `animal`.
+
Есть только два ограничения:
1. Ссылки не могут идти по кругу. JavaScript выдаст ошибку, если мы попытаемся назначить `__proto__` по кругу.
@@ -137,6 +133,18 @@ alert(longEar.jumps); // true (из rabbit)
Это вполне очевидно, но всё же: может быть только один `[[Prototype]]`. Объект не может наследоваться от двух других объектов.
+```smart header="Свойство `__proto__` — исторически обусловленный геттер/сеттер для `[[Prototype]]`"
+Это распространённая ошибка начинающих разработчиков - не знать разницы между этими двумя понятиями.
+
+Обратите внимание, что `__proto__` — *не то же самое*, что внутреннее свойство `[[Prototype]]`. Это геттер/сеттер для `[[Prototype]]`. Позже мы увидим ситуации, когда это имеет значение, а пока давайте просто будем иметь это в виду, поскольку мы строим наше понимание языка JavaScript.
+
+Свойство `__proto__` немного устарело, оно существует по историческим причинам. Современный JavaScript предполагает, что мы должны использовать функции `Object.getPrototypeOf/Object.setPrototypeOf` вместо того, чтобы получать/устанавливать прототип. Мы также рассмотрим эти функции позже.
+
+По спецификации `__proto__` должен поддерживаться только браузерами, но по факту все среды, включая серверную, поддерживают его. Так что мы вполне безопасно его используем.
+
+Далее мы будем в примерах использовать `__proto__`, так как это самый короткий и интуитивно понятный способ установки и чтения прототипа.
+```
+
## Операция записи не использует прототип
Прототип используется только для чтения свойств.
@@ -170,7 +178,7 @@ rabbit.walk(); // Rabbit! Bounce-bounce!
-Свойства-аксессоры - исключение, так как запись в него обрабатывается функцией-сеттером. То есть, это, фактически, вызов функции.
+Свойства-аксессоры - исключение, так как запись в него обрабатывается функцией-сеттером. То есть это фактически вызов функции.
По этой причине `admin.fullName` работает корректно в приведённом ниже коде:
@@ -308,11 +316,11 @@ for(let prop in rabbit) {
-Заметим ещё одну деталь. Откуда взялся метод `rabbit.hasOwnProperty`? Мы его явно не определяли. Если посмотреть на цепочку прототипов, то видно, что он берётся из `Object.prototype.hasOwnProperty`. То есть, он унаследован.
+Заметим ещё одну деталь. Откуда взялся метод `rabbit.hasOwnProperty`? Мы его явно не определяли. Если посмотреть на цепочку прототипов, то видно, что он берётся из `Object.prototype.hasOwnProperty`. То есть он унаследован.
...Но почему `hasOwnProperty` не появляется в цикле `for..in` в отличие от `eats` и `jumps`? Он ведь перечисляет все унаследованные свойства.
-Ответ простой: оно не перечислимо. То есть, у него внутренний флаг `enumerable` стоит `false`, как и у других свойств `Object.prototype`. Поэтому оно и не появляется в цикле.
+Ответ простой: оно не перечислимо. То есть у него внутренний флаг `enumerable` стоит `false`, как и у других свойств `Object.prototype`. Поэтому оно и не появляется в цикле.
```smart header="Почти все остальные методы получения ключей/значений игнорируют унаследованные свойства"
Почти все остальные методы, получающие ключи/значения, такие как `Object.keys`, `Object.values` и другие - игнорируют унаследованные свойства.
diff --git a/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md
index ca15792760..561330a679 100644
--- a/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md
+++ b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md
@@ -39,6 +39,11 @@ alert( user2.name ); // undefined
1. Сначала ищется свойство `constructor` в объекте `user`. Не нашлось.
2. Потом задействуется поиск по цепочке прототипов. Прототип объекта `user` -- это `User.prototype`, и там тоже нет искомого свойства.
-3. Значение `User.prototype` -- это пустой объект `{}`, чей прототип -- `Object.prototype`. `Object.prototype.constructor == Object`. Таким образом, свойство `constructor` всё-таки найдено.
+3. Идя дальше по цепочке, значение `User.prototype` -- это пустой объект `{}`, чей прототип -- встроенный `Object.prototype`.
+4. Наконец, для встроенного `Object.prototype` предусмотрен встроенный `Object.prototype.constructor == Object`. Таким образом, свойство `constructor` всё-таки найдено.
-Наконец срабатывает `let user2 = new Object('Pete')`, но конструктор `Object` игнорирует аргументы, он всегда создаёт пустой объект: `let user2 = {}` -- это как раз то, чему равен `user2` в итоге.
+В итоге срабатывает `let user2 = new Object('Pete')`.
+
+Вероятно, это не то, что нам нужно. Мы хотели создать `new User`, а не `new Object`. Это и есть результат отсутствия конструктора.
+
+(На всякий случай, если вам интересно, вызов `new Object(...)` преобразует свой аргумент в объект. Это теоретическая вещь, на практике никто не вызывает `new Object` со значением, тем более, в основном мы вообще не используем `new Object` для создания объектов).
diff --git a/1-js/08-prototypes/02-function-prototype/article.md b/1-js/08-prototypes/02-function-prototype/article.md
index fd3ab2f6ce..cba991f886 100644
--- a/1-js/08-prototypes/02-function-prototype/article.md
+++ b/1-js/08-prototypes/02-function-prototype/article.md
@@ -40,15 +40,15 @@ alert( rabbit.eats ); // true
На изображении: `"prototype"` - горизонтальная стрелка, обозначающая обычное свойство для `"F"`, а `[[Prototype]]` -- вертикальная, обозначающая наследование `rabbit` от `animal`.
-```smart header="`F.prototype` используется только в момент вызова `new F()`"
-`F.prototype` используется только при вызове `new F()` и присваивается в качестве свойства `[[Prototype]]` нового объекта. После этого `F.prototype` и новый объект ничего не связывает. Следует понимать это как "единоразовый подарок" объекту.
+```smart header="`F.prototype` используется только в момент вызова `new F`"
+`F.prototype` используется только при вызове `new F` и присваивается в качестве свойства `[[Prototype]]` нового объекта.
-После создания `F.prototype` может измениться, и новые объекты, созданные с помощью `new F()`, будут иметь другой объект в качестве `[[Prototype]]`, но уже существующие объекты сохранят старый.
+Если после создания свойство `F.prototype` изменится (`F.prototype = <другой объект>`), то новые объекты, созданные с помощью `new F`, будут иметь в качестве `[[Prototype]]` другой объект, а уже существующие объекты сохранят старый.
```
## F.prototype по умолчанию, свойство constructor
-У каждой функции по умолчанию уже есть свойство `"prototype"`.
+У каждой функции (за исключением стрелочных) по умолчанию уже есть свойство `"prototype"`.
По умолчанию `"prototype"` - объект с единственным свойством `constructor`, которое ссылается на функцию-конструктор.
@@ -160,7 +160,7 @@ Rabbit.prototype = {
Всё достаточно просто. Выделим основные моменты:
-- Свойство `F.prototype` (не путать с `[[Prototype]]`) устанавливает`[[Prototype]]` для новых объектов при вызове `new F()`.
+- Свойство `F.prototype` (не путать с `[[Prototype]]`) устанавливает `[[Prototype]]` для новых объектов при вызове `new F()`.
- Значение `F.prototype` должно быть либо объектом, либо `null`. Другие значения не будут работать.
- Свойство `"prototype"` является особым, только когда оно назначено функции-конструктору, которая вызывается оператором `new`.
diff --git a/1-js/08-prototypes/03-native-prototypes/article.md b/1-js/08-prototypes/03-native-prototypes/article.md
index 035ff13fc7..7e365b3062 100644
--- a/1-js/08-prototypes/03-native-prototypes/article.md
+++ b/1-js/08-prototypes/03-native-prototypes/article.md
@@ -33,7 +33,7 @@ alert( obj ); // "[object Object]" ?
let obj = {};
alert(obj.__proto__ === Object.prototype); // true
-// obj.toString === obj.__proto__.toString == Object.prototype.toString
+// obj.toString === obj.__proto__.toString === Object.prototype.toString
```
Обратите внимание, что по цепочке прототипов выше `Object.prototype` больше нет свойства `[[Prototype]]`:
diff --git a/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md b/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md
index 235b4d11ab..7e9fc4a414 100644
--- a/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md
+++ b/1-js/08-prototypes/04-prototype-methods/3-compare-calls/task.md
@@ -17,7 +17,7 @@ Rabbit.prototype.sayHi = function() {
let rabbit = new Rabbit("Rabbit");
```
-Все эти вызовы делают одно и тоже или нет?
+Все эти вызовы делают одно и то же или нет?
```js
rabbit.sayHi();
diff --git a/1-js/08-prototypes/04-prototype-methods/article.md b/1-js/08-prototypes/04-prototype-methods/article.md
index bd0ee42c16..5403e47e5d 100644
--- a/1-js/08-prototypes/04-prototype-methods/article.md
+++ b/1-js/08-prototypes/04-prototype-methods/article.md
@@ -7,7 +7,7 @@
Современные же методы это:
-- [Object.create(proto, [descriptors])](mdn:js/Object/create) -- создаёт пустой объект со свойством `[[Prototype]]`, указанным как `proto`, и необязательными дескрипторами свойств `descriptors`.
+- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- создаёт пустой объект со свойством `[[Prototype]]`, указанным как `proto`, и необязательными дескрипторами свойств `descriptors`.
- [Object.getPrototypeOf(obj)](mdn:js/Object/getPrototypeOf) -- возвращает свойство `[[Prototype]]` объекта `obj`.
- [Object.setPrototypeOf(obj, proto)](mdn:js/Object/setPrototypeOf) -- устанавливает свойство `[[Prototype]]` объекта `obj` как `proto`.
@@ -156,12 +156,12 @@ alert(obj[key]); // "some value"
let obj = Object.create(null);
*/!*
-alert(obj); // Error (no toString)
+alert(obj); // Ошибка (no toString)
```
...Но обычно это нормально для ассоциативных массивов.
-Обратите внимание, что большая часть методов, связанных с объектами, имеют вид `Object.something(...)`. К примеру, `Object.keys(obj)`. Подобные методы не находятся в прототипе, так что они продолжат работать для таких объектов:
+Обратите внимание, что большинство методов, связанных с объектами, имеют вид `Object.something(...)`. К примеру, `Object.keys(obj)`. Подобные методы не находятся в прототипе, так что они продолжат работать для таких объектов:
```js run
diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md
index 9407856101..a41d43a601 100644
--- a/1-js/09-classes/01-class/article.md
+++ b/1-js/09-classes/01-class/article.md
@@ -109,7 +109,7 @@ alert(typeof User); // function
alert(User === User.prototype.constructor); // true
// Методы находятся в User.prototype, например:
-alert(User.prototype.sayHi); // alert(this.name);
+alert(User.prototype.sayHi); // sayHi() { alert(this.name); }
// в прототипе ровно 2 метода
alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi
@@ -165,7 +165,7 @@ user.sayHi();
```
2. Методы класса являются неперечислимыми.
- Определение класса устанавливает флаг `enumerable` в` false` для всех методов в `"prototype"`.
+ Определение класса устанавливает флаг `enumerable` в `false` для всех методов в `"prototype"`.
И это хорошо, так как если мы проходимся циклом `for..in` по объекту, то обычно мы не хотим при этом получать методы класса.
diff --git a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
index ca613ca5e5..be2053cfcf 100644
--- a/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
+++ b/1-js/09-classes/02-class-inheritance/2-clock-class-extended/solution.view/extended-clock.js
@@ -1,7 +1,7 @@
class ExtendedClock extends Clock {
constructor(options) {
super(options);
- let { precision=1000 } = options;
+ let { precision = 1000 } = options;
this.precision = precision;
}
diff --git a/1-js/09-classes/02-class-inheritance/article.md b/1-js/09-classes/02-class-inheritance/article.md
index edbe624ccd..e49e329e70 100644
--- a/1-js/09-classes/02-class-inheritance/article.md
+++ b/1-js/09-classes/02-class-inheritance/article.md
@@ -1,8 +1,13 @@
+
# Наследование классов
-Допустим, у нас есть два класса.
+Наследование классов - это способ расширения одного класса другим классом.
+
+Таким образом, мы можем добавить новый функционал к уже существующему.
+
+## Ключевое слово "extends"
-`Animal`:
+Допустим, у нас есть класс `Animal`:
```js
class Animal {
@@ -16,57 +21,26 @@ class Animal {
}
stop() {
this.speed = 0;
- alert(`${this.name} стоит.`);
+ alert(`${this.name} стоит неподвижно.`);
}
}
let animal = new Animal("Мой питомец");
```
-
-
-...И `Rabbit`:
-
-```js
-class Rabbit {
- constructor(name) {
- this.name = name;
- }
- hide() {
- alert(`${this.name} прячется!`);
- }
-}
-
-let rabbit = new Rabbit("Мой кролик");
-```
-
-
+Вот как мы можем представить объект `animal` и класс `Animal` графически:
-Сейчас они полностью независимы.
+
-Но мы хотим, чтобы `Rabbit` расширял `Animal`. Другими словами, кролики должны происходить от животных, т.е. иметь доступ к методам `Animal` и расширять функциональность `Animal` своими методами.
+...И мы хотели бы создать ещё один `class Rabbit`.
-Для того, чтобы наследовать класс от другого, мы должны использовать ключевое слово `"extends"` и указать название родительского класса перед `{..}`.
+Поскольку кролики - это животные, класс `Rabbit` должен быть основан на `Animal`, и иметь доступ к методам животных, так чтобы кролики могли делать то, что могут делать "общие" животные.
-Ниже `Rabbit` наследует от `Animal`:
+Синтаксис для расширения другого класса следующий: `class Child extends Parent`.
-```js run
-class Animal {
- constructor(name) {
- this.speed = 0;
- this.name = name;
- }
- run(speed) {
- this.speed = speed;
- alert(`${this.name} бежит со скоростью ${this.speed}.`);
- }
- stop() {
- this.speed = 0;
- alert(`${this.name} стоит.`);
- }
-}
+Давайте создадим `class Rabbit`, который наследуется от `Animal`:
-// Наследуем от Animal указывая "extends Animal"
+```js
*!*
class Rabbit extends Animal {
*/!*
@@ -80,24 +54,30 @@ let rabbit = new Rabbit("Белый кролик");
rabbit.run(5); // Белый кролик бежит со скоростью 5.
rabbit.hide(); // Белый кролик прячется!
```
-Теперь код `Rabbit` стал короче, так как используется конструктор класса `Animal` по умолчанию и кролик может использовать метод `run` как и все животные.
-Ключевое слово `extends` работает, используя прототипы. Оно устанавливает `Rabbit.prototype.[[Prototype]]` в `Animal.prototype`. Так что если метод не найден в `Rabbit.prototype`, JavaScript берёт его из `Animal.prototype`.
+Объект класса `Rabbit` имеет доступ как к методам `Rabbit`, таким как `rabbit.hide()`, так и к методам `Animal`, таким как `rabbit.run()`.
+
+Внутри ключевое слово `extends` работает по старой доброй механике прототипов. Оно устанавливает `Rabbit.prototype.[[Prototype]]` в `Animal.prototype`. Таким образом, если метода не оказалось в `Rabbit.prototype`, JavaScript берет его из `Animal.prototype`.
-Как мы помним из главы Сообщения: Logger: Logger:
currency Алфавитный код валюты
- См. Список кодов валюты, например
+ USD См. Список кодов валюты, например
USD
@@ -377,7 +377,7 @@ formatter.format(number); // форматирование
@@ -399,7 +399,7 @@ alert( formatter.format(1234567890.123) ); // 1 230 000 000
С опциями для валюты:
-```js
+```js run
let formatter = new Intl.NumberFormat("ru", {
style: "currency",
currency: "GBP"
@@ -410,7 +410,7 @@ alert( formatter.format(1234.5) ); // 1 234,5 £
С двумя цифрами после запятой:
-```js
+```js run
let formatter = new Intl.NumberFormat("ru", {
style: "currency",
currency: "GBP",
diff --git a/1-js/99-js-misc/09-weakref-finalizationregistry/article.md b/1-js/99-js-misc/09-weakref-finalizationregistry/article.md
new file mode 100644
index 0000000000..6a7d9ba40f
--- /dev/null
+++ b/1-js/99-js-misc/09-weakref-finalizationregistry/article.md
@@ -0,0 +1,431 @@
+
+# WeakRef и FinalizationRegistry
+
+```warn header="\"Скрытые\" возможности языка"
+В этой статье рассматривается очень узконаправленная тема, с которой большинство разработчиков на практике сталкиваются чрезвычайно редко (а могут и вообще не знать о её существовании).
+
+Мы рекомендуем пропустить эту главу, если вы только начали изучение JavaScript.
+```
+
+Вспоминая основную концепцию *принципа достижимости* из главы maximumSignificantDigitsМаксимальное количество значимых цифр
от
- minimumSignificantDigits до 21minimumSignificantDigits21alert сработает незамедлительно.
+
+## FinalizationRegistry
+
+А теперь пришло время поговорить о финализаторах. Прежде чем мы перейдём дальше, давайте разберёмся с терминологией:
+
+**Колбэк очистки (финализатор)** - это функция, которая выполняется в случае, если объект, зарегистрированный в `FinalizationRegistry`, удаляется из памяти сборщиком мусора.
+
+Его цель - предоставить возможность выполнения дополнительных операций, связанных с объектом, после его окончательного удаления из памяти.
+
+**Реестр** (или `FinalizationRegistry`) - это специальный объект в JavaScript, который управляет регистрацией и отменой регистрации объектов и их колбэков очистки.
+
+Этот механизм позволяет зарегистрировать объект для отслеживания и связать с ним колбэк очистки. По сути, это структура, которая хранит информацию о зарегистрированных объектах и их колбэках очистки, а затем автоматически вызывает эти колбэки при удалении объектов из памяти.
+
+Для создания экземпляра реестра `FinalizationRegistry`, необходимо вызвать его конструктор,
+который принимает единственный аргумент - колбэк очистки (финализатор).
+
+Синтаксис:
+
+```js
+function cleanupCallback(heldValue) {
+ // код колбэка очистки
+}
+
+const registry = new FinalizationRegistry(cleanupCallback);
+```
+
+Здесь:
+
+- `cleanupCallback` - колбэк очистки, который будет автоматически вызван при удалении зарегистрированного объекта из памяти.
+- `heldValue` - значение, которое передаётся в качестве аргумента для колбэка очистки. Если `heldValue` является объектом, реестр сохраняет на него сильную ссылку.
+- `registry` - экземпляр `FinalizationRegistry`.
+
+Методы `FinalizationRegistry`:
+
+- `register(target, heldValue [, unregisterToken])` - используется для регистрации объектов в реестре.
+
+ `target` - регистрируемый для отслеживания объект. Если `target` будет удалён сборщиком мусора, колбэк очистки будет вызван с `heldValue` в качестве аргумента.
+
+ Опциональный `unregisterToken` - токен отмены регистрации. Может быть передан для отмены регистрации до удаления объекта сборщиком мусора. Обычно в качестве `unregisterToken` используется объект `target`, что является стандартной практикой.
+- `unregister(unregisterToken)` - метод `unregister` используется для отмены регистрации объекта в реестре. Он принимает один аргумент - `unregisterToken` (токен отмены регистрации, который был получен при регистрации объекта).
+
+Теперь перейдём к простому примеру. Воспользуемся уже известным нам объектом `user` и создадим экземпляр `FinalizationRegistry`:
+
+```js
+let user = { name: "John" };
+
+const registry = new FinalizationRegistry((heldValue) => {
+ console.log(`${heldValue} был собран сборщиком мусора.`);
+});
+```
+
+Затем зарегистрируем объект, для которого требуется колбэк очистки, вызвав метод `register`:
+
+```js
+registry.register(user, user.name);
+```
+
+Реестр не хранит сильную ссылку на регистрируемый объект, так как это бы противоречило его предназначению. Если бы реестр сохранял сильную ссылку, то объект никогда бы не был очищен сборщиком мусора.
+
+Если же объект удаляется сборщиком мусора, наш колбэк очистки может быть вызван в какой-то момент в будущем, с переданным ему `heldValue`:
+
+```js
+// Когда объект user удалится сборщиком мусора, в консоль будет выведено сообщение:
+"John был собран сборщиком мусора."
+```
+
+Также существуют ситуации, когда даже в реализациях, где используется колбэк очистки, есть вероятность, что он не будет вызван.
+
+Например:
+- Когда программа полностью завершает свою работу (например, при закрытии вкладки в браузере).
+- Когда сам экземпляр `FinalizationRegistry` больше не доступен для JavaScript кода.
+ Если объект, создающий экземпляр `FinalizationRegistry`, выходит из области видимости или удаляется, то колбэки очистки, зарегистрированные в этом реестре, также могут быть не вызваны.
+
+## Кеширование с FinalizationRegistry
+
+Возвращаясь к нашему примеру *слабого* кеша, мы можем заметить следующее:
+- Несмотря на то, что значения, обёрнутые в `WeakRef`, были собраны сборщиком мусора, всё ещё актуальна проблема "утечки памяти" в виде оставшихся ключей, значения которых были собраны сборщиком мусора.
+
+Вот улучшенный пример кеширования, в котором используется `FinalizationRegistry`:
+
+```js
+function fetchImg() {
+ // абстрактная функция для загрузки изображений...
+}
+
+function weakRefCache(fetchImg) {
+ const imgCache = new Map();
+
+ *!*
+ const registry = new FinalizationRegistry((imgName) => { // (1)
+ const cachedImg = imgCache.get(imgName);
+ if (cachedImg && !cachedImg.deref()) imgCache.delete(imgName);
+ });
+ */!*
+
+ return (imgName) => {
+ const cachedImg = imgCache.get(imgName);
+
+ if (cachedImg?.deref()) {
+ return cachedImg?.deref();
+ }
+
+ const newImg = fetchImg(imgName);
+ imgCache.set(imgName, new WeakRef(newImg));
+ *!*
+ registry.register(newImg, imgName); // (2)
+ */!*
+
+ return newImg;
+ };
+}
+
+const getCachedImg = weakRefCache(fetchImg);
+```
+
+1. Для управления очисткой "мёртвых" записей в кеше, когда связанные с ними объекты `WeakRef` собираются сборщиком мусора, создаём реестр очистки `FinalizationRegistry`.
+
+ Важным моментом здесь является то, что в колбэке очистки должно проверяться, была ли запись удалена сборщиком мусора и не была ли добавлена заново, чтобы не удалить "живую" запись.
+2. После загрузки и установки нового значения (изображения) в кеш, регистрируем его в реестре финализатора для отслеживания объекта `WeakRef`.
+
+Данная реализация содержит только актуальные или "живые" пары ключ/значение.
+В этом случае каждый объект `WeakRef` зарегистрирован в `FinalizationRegistry`.
+А после того, как объекты будут очищены сборщиком мусора, колбэк очистки удалит все значения `undefined`.
+
+Вот визуальное представление обновлённого кода:
+
+
+
+Ключевым аспектом в обновлённой реализации является то, что финализаторы позволяют создавать параллельные процессы между "основной" программой и колбэками очистки. В контексте JavaScript, "основная" программа - это наш JavaScript-код, который запускается и выполняется в нашем приложении или на веб-странице.
+
+Следовательно, с момента, когда объект помечается для удаления сборщиком мусора, до фактического выполнения колбэка очистки, может возникнуть определённый промежуток времени. Важно понимать, что в этом временном интервале основная программа может внести любые изменения в объект или даже вернуть его обратно в память.
+
+Поэтому, в колбэке очистки мы должны проверить, не была ли запись добавлена обратно в кеш основной программой, чтобы избежать удаления "живых" записей. Аналогично, при поиске ключа в кеше существует вероятность того, что значение было удалено сборщиком мусора, но колбэк очистки ещё не был выполнен.
+
+Такие ситуации требуют особого внимания, если вы работаете с `FinalizationRegistry`.
+
+## Использование WeakRef и FinalizationRegistry на практике
+
+Переходя от теории к практике, представьте себе реальный сценарий, когда пользователь синхронизирует свои фотографии на мобильном устройстве
+с каким-либо облачным сервисом (таким как [iCloud](https://ru.wikipedia.org/wiki/ICloud) или [Google Photos](https://ru.wikipedia.org/wiki/Google_Фото)), и хочет просматривать их с других устройств. Подобные сервисы помимо основного функционала просмотра фотографий, предлагают массу дополнительных возможностей, например:
+
+- Редактирование фотографий и видео эффекты.
+- Создание "воспоминаний" и альбомов.
+- Монтаж видео из серии фотографий.
+- ...и многое другое.
+
+В качестве примера здесь мы будем использовать достаточно примитивную реализацию подобного сервиса. Основная суть — показать возможный сценарий совместного использования `WeakRef` и `FinalizationRegistry` в реальной жизни.
+
+Вот как это выглядит:
+
+
+
+В левой части находится облачная библиотека фотографий (они отображаются в виде миниатюр). Мы можем выбрать нужные нам изображения и создать коллаж, нажав на кнопку "Create collage" в правой части страницы. Затем, получившийся результат можно будет скачать в виде изображения.
+
+Для увеличения скорости загрузки страницы разумно будет загружать и показывать миниатюры фотографий именно в *сжатом* качестве. Но, для создания коллажа из выбранных фотографий, загружать и использовать их в *полноразмерном* качестве.
+
+Ниже мы видим, что внутренний размер миниатюр составляет 240×240 пикселей. Размер был выбран специально для увеличения скорости загрузки. Кроме того, нам не нужны полноразмерные фотографии в режиме предпросмотра.
+
+
+
+Предположим, что нам нужно создать коллаж из 4 фотографий: мы выбираем их, после чего нажимаем кнопку "Create collage".
+На этом этапе уже известная нам функция weakRefCache проверяет, есть ли нужное изображение в кеше. Если нет, то скачивает его из облака и помещает в кеш для возможности дальнейшего использования. И так происходит для каждого выбранного изображения:
+
+
+
+Обратив внимание на вывод в консоли можно увидеть, какие из фотографий были загружены из облака - на это указывает FETCHED_IMAGE. Так как это первая попытка создания коллажа, это означает, что на данном этапе "слабый кеш" ещё был пуст, а все фотографии были скачаны из облака и помещены в него.
+
+Но, наряду с процессом загрузки изображений, происходит ещё и процесс очистки памяти сборщиком мусора. Это означает, что хранящийся в кеше объект, на который мы ссылаемся используя слабую ссылку, удаляется сборщиком мусора. И наш финализатор выполняется успешно, тем самым удаляя ключ, по которому изображение хранилось в кеше. Об этом нас уведомляет CLEANED_IMAGE:
+
+
+
+Далее мы понимаем, что нам не нравится получившийся коллаж, и решаем изменить одно из изображений и создать новый. Для этого достаточно снять выделение с ненужного изображения, выбрать другое, и ещё раз нажать на кнопку "Create collage":
+
+
+
+Но, на этот раз не все изображения были скачаны из сети, и одно из них было взято из слабого кеша: об этом нам говорит сообщение CACHED_IMAGE. Это означает, что на момент создания коллажа сборщик мусора ещё не удалил наше изображение, и мы смело взяли его из кеша,
+тем самым сократив количество сетевых запросов и ускорив общее время процесса создания коллажа:
+
+
+
+Давайте ещё немного "поиграем", заменив одно из изображений ещё раз и создав новый коллаж:
+
+
+
+На этот раз результат ещё более внушительный. Из 4 выбранных изображений, 3 из них были взяты из слабого кеша, и только одно пришлось скачать из сети.
+Снижение нагрузки на сеть составило около 75%. Впечатляет, не правда ли?
+
+
+
+Конечно, не следует забывать, что такое поведение не является гарантированным, и зависит от конкретной реализации и работы сборщика мусора.
+
+Исходя из этого, сразу же возникает вполне логичный вопрос: почему бы нам не использовать обычный кеш, где мы можем сами управлять его сущностями, а не полагаться на сборщик мусора? Всё верно, в большинстве случаев нет необходимости использовать `WeakRef` и `FinalizationRegistry`.
+
+Здесь мы просто продемонстрировали альтернативную реализацию подобного функционала, используя нетривиальный подход с интересными особенностями языка. Всё же, мы не можем полагаться на этот пример, если нам необходим постоянный и предсказуемый результат.
+
+Вы можете [открыть данный пример в песочнице](sandbox:weakref-finalizationregistry).
+
+## Итого
+
+`WeakRef` - предназначен для создания слабых ссылок на объекты, что позволяет им быть удалёнными из памяти сборщиком мусора, если на них больше нет сильных ссылок. Это полезно для решения проблемы чрезмерного использования памяти и оптимизации использования системных ресурсов в приложениях.
+
+`FinalizationRegistry` - это средство регистрации колбэков, которые выполняются при уничтожении объектов, на которые больше нет сильных ссылок. Это позволяет освобождать связанные с объектом ресурсы или выполнять другие необходимые операции перед удалением объекта из памяти.
diff --git a/1-js/99-js-misc/09-weakref-finalizationregistry/google-chrome-developer-tools.png b/1-js/99-js-misc/09-weakref-finalizationregistry/google-chrome-developer-tools.png
new file mode 100644
index 0000000000..0216373425
Binary files /dev/null and b/1-js/99-js-misc/09-weakref-finalizationregistry/google-chrome-developer-tools.png differ
diff --git a/1-js/99-js-misc/09-weakref-finalizationregistry/weakref-dom.view/index.css b/1-js/99-js-misc/09-weakref-finalizationregistry/weakref-dom.view/index.css
new file mode 100644
index 0000000000..f6df812d07
--- /dev/null
+++ b/1-js/99-js-misc/09-weakref-finalizationregistry/weakref-dom.view/index.css
@@ -0,0 +1,49 @@
+.app {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.start-messages {
+ width: fit-content;
+}
+
+.window {
+ width: 100%;
+ border: 2px solid #464154;
+ overflow: hidden;
+}
+
+.window__header {
+ position: sticky;
+ padding: 8px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #736e7e;
+}
+
+.window__title {
+ margin: 0;
+ font-size: 24px;
+ font-weight: 700;
+ color: white;
+ letter-spacing: 1px;
+}
+
+.window__button {
+ padding: 4px;
+ background: #4f495c;
+ outline: none;
+ border: 2px solid #464154;
+ color: white;
+ font-size: 16px;
+ cursor: pointer;
+}
+
+.window__body {
+ height: 250px;
+ padding: 16px;
+ overflow: scroll;
+ background-color: #736e7e33;
+}
\ No newline at end of file
diff --git a/1-js/99-js-misc/09-weakref-finalizationregistry/weakref-dom.view/index.html b/1-js/99-js-misc/09-weakref-finalizationregistry/weakref-dom.view/index.html
new file mode 100644
index 0000000000..c4adde9866
--- /dev/null
+++ b/1-js/99-js-misc/09-weakref-finalizationregistry/weakref-dom.view/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+ Photo Library Collage
+
+
+ `;
+
+ thumbnail.addEventListener("click", (e) => handleSelection(e, img));
+
+ thumbnailsContainerEl.appendChild(thumbnail);
+});
+// Render layouts select.
+LAYOUTS.forEach((layout) => {
+ const option = document.createElement("option");
+ option.value = JSON.stringify(layout);
+ option.innerHTML = layout.name;
+ selectEl.appendChild(option);
+});
+
+const handleStateChange = (state) => {
+ if (state.loading) {
+ selectEl.disabled = true;
+ createCollageBtn.disabled = true;
+ startOverBtn.disabled = true;
+ downloadBtn.disabled = true;
+ previewContainerEl.classList.add("previewContainer--disabled");
+ spinnerContainerEl.classList.remove("spinnerContainer--hidden");
+ spinnerTextEl.innerText = "Loading...";
+ canvasEl.classList.remove("canvas--ready");
+ } else if (!state.loading) {
+ selectEl.disabled = false;
+ createCollageBtn.disabled = false;
+ startOverBtn.disabled = false;
+ downloadBtn.disabled = false;
+ previewContainerEl.classList.remove("previewContainer--disabled");
+ spinnerContainerEl.classList.add("spinnerContainer--hidden");
+ canvasEl.classList.add("canvas--ready");
+ }
+
+ if (!state.selectedImages.size) {
+ createCollageBtn.disabled = true;
+ document.querySelectorAll(".badge").forEach((item) => item.remove());
+ } else if (state.selectedImages.size && !state.loading) {
+ createCollageBtn.disabled = false;
+ }
+
+ if (!state.collageRendered) {
+ downloadBtn.disabled = true;
+ } else if (state.collageRendered) {
+ downloadBtn.disabled = false;
+ }
+};
+handleStateChange(state);
+
+const handleSelection = (e, imgName) => {
+ const imgEl = e.currentTarget;
+
+ imgEl.classList.toggle("thumbnail-item--selected");
+
+ if (state.selectedImages.has(imgName)) {
+ state.selectedImages.delete(imgName);
+ state.selectedImages = new Set(state.selectedImages);
+ imgEl.querySelector(".badge")?.remove();
+ } else {
+ state.selectedImages = new Set(state.selectedImages.add(imgName));
+
+ const badge = document.createElement("div");
+ badge.classList.add("badge");
+ badge.innerHTML = `
+
+ `;
+ imgEl.prepend(badge);
+ }
+};
+
+// Make a wrapper function.
+let getCachedImage;
+(async () => {
+ getCachedImage = await weakRefCache(loadImage);
+})();
+
+const calculateGridRows = (blobsLength) =>
+ Math.ceil(blobsLength / state.currentLayout.columns);
+
+const drawCollage = (images) => {
+ state.drawing = true;
+
+ let context = canvasEl.getContext("2d");
+
+ /**
+ * Calculate canvas dimensions based on the current layout.
+ * */
+ context.canvas.width =
+ state.currentLayout.itemWidth * state.currentLayout.columns;
+ context.canvas.height =
+ calculateGridRows(images.length) * state.currentLayout.itemHeight;
+
+ let currentRow = 0;
+ let currentCanvasDx = 0;
+ let currentCanvasDy = 0;
+
+ for (let i = 0; i < images.length; i++) {
+ /**
+ * Get current row of the collage.
+ * */
+ if (i % state.currentLayout.columns === 0) {
+ currentRow += 1;
+ currentCanvasDx = 0;
+
+ if (currentRow > 1) {
+ currentCanvasDy += state.currentLayout.itemHeight;
+ }
+ }
+
+ context.drawImage(
+ images[i],
+ 0,
+ 0,
+ images[i].width,
+ images[i].height,
+ currentCanvasDx,
+ currentCanvasDy,
+ state.currentLayout.itemWidth,
+ state.currentLayout.itemHeight,
+ );
+
+ currentCanvasDx += state.currentLayout.itemWidth;
+ }
+
+ state.drawing = false;
+ state.collageRendered = true;
+};
+
+const createCollage = async () => {
+ state.loading = true;
+
+ const images = [];
+
+ for (const image of state.selectedImages.values()) {
+ const blobImage = await getCachedImage(image.img);
+
+ const url = URL.createObjectURL(blobImage);
+ const img = await createImageFile(url);
+
+ images.push(img);
+ URL.revokeObjectURL(url);
+ }
+
+ state.loading = false;
+
+ drawCollage(images);
+};
+
+/**
+ * Clear all settled data to start over.
+ * */
+const startOver = () => {
+ state.selectedImages = new Set();
+ state.collageRendered = false;
+ const context = canvasEl.getContext("2d");
+ context.clearRect(0, 0, canvasEl.width, canvasEl.height);
+
+ document
+ .querySelectorAll(".thumbnail-item--selected")
+ .forEach((item) => item.classList.remove("thumbnail-item--selected"));
+
+ loggerContainerEl.innerHTML = '