/* ... */, он не будет исполняться.
+Содержимое комментария игнорируется, поэтому, если мы поместим код внутри /* ... */, он не будет исполняться.
Это бывает удобно для временного отключения участка кода:
@@ -135,7 +133,7 @@ alert('Мир');
```
```smart header="Используйте горячие клавиши!"
-В большинстве редакторов строку кода можно закомментировать, нажав комбинацию клавиш `key:Ctrl+/` для однострочного комментария и что-то, вроде `key:Ctrl+Shift+/` -- для многострочных комментариев (выделите кусок кода и нажмите комбинацию клавиш). В системе Mac попробуйте `key:Cmd` вместо `key:Ctrl`.
+В большинстве редакторов строку кода можно закомментировать, нажав комбинацию клавиш `key:Ctrl+/` для однострочного комментария и что-то вроде `key:Ctrl+Shift+/` -- для многострочных комментариев (выделите кусок кода и нажмите комбинацию клавиш). В системе Mac попробуйте `key:Cmd` вместо `key:Ctrl` и `key:Option` вместо `key:Shift`.
```
````warn header="Вложенные комментарии не поддерживаются!"
diff --git a/1-js/02-first-steps/03-strict-mode/article.md b/1-js/02-first-steps/03-strict-mode/article.md
index 7199addb1e..15290f9dd4 100644
--- a/1-js/02-first-steps/03-strict-mode/article.md
+++ b/1-js/02-first-steps/03-strict-mode/article.md
@@ -4,7 +4,7 @@
Преимуществом данного подхода было то, что существующий код продолжал работать. А недостатком -- что любая ошибка или несовершенное решение, принятое создателями JavaScript, застревали в языке навсегда.
-Так было до 2009 года, когда появился ECMAScript 5 (ES5). Он добавил новые возможности в язык и изменил некоторые из существующих. Чтобы старый код работал, большинство таких модификаций по умолчанию отключены. Вы должны явно включить их с помощью специальной директивы: `"use strict"`.
+Так было до 2009 года, когда появился ECMAScript 5 (ES5). Он добавил новые возможности в язык и изменил некоторые из существующих. Чтобы устаревший код работал, как и раньше, по умолчанию подобные изменения не применяются. Поэтому нам нужно явно их активировать с помощью специальной директивы: `"use strict"`.
## "use strict"
@@ -19,7 +19,7 @@
...
```
-Позже мы изучим функции (способ группировки команд). Забегая вперёд, заметим, что вместо всего скрипта `"use strict"` можно поставить в начале большинства видов функций. Это позволяет включить строгий режим только в конкретной функции. Но обычно люди используют его для всего файла.
+Совсем скоро мы начнём изучать функции (способ группировки команд), поэтому заранее отметим, что в начале большинства видов функций можно поставить `"use strict"`. Это позволяет включить строгий режим только в конкретной функции. Но обычно люди используют его для всего файла.
````warn header="Убедитесь, что \"use strict\" находится в начале"
@@ -40,17 +40,19 @@ alert("some code");
````
```warn header="Нет никакого способа отменить `use strict`"
-Нет директивы типа `"no use strict"`, которая возвращает движок к старому поведению.
+Нет директивы типа `"no use strict"`, которая возвращала бы движок к старому поведению.
Как только мы входим в строгий режим, отменить это невозможно.
```
## Консоль браузера
-В будущем, когда вы будете использовать консоль браузера для тестирования функций, обратите внимание, что `use strict` по умолчанию в ней выключен.
+В дальнейшем, когда вы будете использовать [консоль браузера](info:devtools) для тестирования функций, обратите внимание, что `use strict` по умолчанию в ней выключен.
Иногда, когда `use strict` имеет значение, вы можете получить неправильные результаты.
+Итак, как можно включить `use strict` в консоли?
+
Можно использовать `key:Shift+Enter` для ввода нескольких строк и написать в верхней строке `use strict`:
```js
@@ -61,7 +63,7 @@ alert("some code");
В большинстве браузеров, включая Chrome и Firefox, это работает.
-В старых браузерах консоль не учитывает такой `use strict`, там можно "оборачивать" код в функцию, вот так:
+Если этого не происходит, например, в старом браузере, есть некрасивый, но надежный способ обеспечить `use strict`. Поместите его в следующую обёртку:
```js
(function() {
@@ -71,15 +73,18 @@ alert("some code");
})()
```
-## Всегда используйте "use strict"
+## Всегда ли нужно использовать "use strict"?
+
+Вопрос кажется риторическим, но это не так.
+
+Кто-то посоветует начинать каждый скрипт с `"use strict"`... Но есть способ покруче.
+
+Современный JavaScript поддерживает "классы" и "модули" — продвинутые структуры языка (и мы, конечно, до них доберёмся), которые автоматически включают строгий режим. Поэтому в них нет нужды добавлять директиву `"use strict"`.
-Нам ещё предстоит рассмотреть различия между строгим режимом и режимом "по умолчанию".
+**Подытожим: пока очень желательно добавлять `"use strict";` в начале ваших скриптов. Позже, когда весь ваш код будет состоять из классов и модулей, директиву можно будет опускать.**
-В следующих главах, изучая особенности языка, мы будем отмечать различия между строгим и стандартным режимами. К счастью, их не так много, и они действительно делают нашу жизнь лучше.
+Пока мы узнали о `use strict` только в общих чертах.
-На данный момент достаточно иметь общее понимание об этом режиме:
+В следующих главах, по мере расширения знаний о возможностях языка, мы яснее увидим отличия между строгим и стандартным режимом. К счастью, их не так много, и все они делают жизнь разработчика лучше.
-1. Директива `"use strict"` переключает движок в "современный" режим, изменяя поведение некоторых встроенных функций. Позже в учебнике мы увидим подробности.
-2. Строгий режим включается путём размещения `"use strict"` в начале скрипта или функции. Некоторые функции языка, такие как "классы" и "модули", автоматически включают строгий режим.
-3. Строгий режим поддерживается всеми современными браузерами.
-4. Мы рекомендуем всегда начинать скрипты с `"use strict"`. Все примеры в этом руководстве предполагают строгий режим, если (очень редко) не указано иное.
+Все примеры в этом учебнике подразумевают исполнение в строгом режиме, за исключением случаев (очень редких), когда оговорено иное.
diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
index bfb027d285..d9da22ea3b 100644
--- a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
+++ b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
@@ -1,4 +1,4 @@
-## Переменная для названия нашей планеты.
+## Переменная для названия нашей планеты
Например:
diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md
index 930ea33403..b1bdebc933 100644
--- a/1-js/02-first-steps/04-variables/article.md
+++ b/1-js/02-first-steps/04-variables/article.md
@@ -1,7 +1,7 @@
# Переменные
JavaScript-приложению обычно нужно работать с информацией. Например:
-1. Интернет магазин -- информация может включать продаваемые товары и корзину покупок.
+1. Интернет-магазин -- информация может включать продаваемые товары и корзину покупок.
2. Чат -- информация может включать пользователей, сообщения и многое другое.
Переменные используются для хранения этой информации.
@@ -10,21 +10,21 @@ JavaScript-приложению обычно нужно работать с ин
[Переменная](https://ru.wikipedia.org/wiki/%D0%9F%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)) -- это "именованное хранилище" для данных. Мы можем использовать переменные для хранения товаров, посетителей и других данных.
-Для создания переменной в JavaScript, используйте ключевое слово `let`.
+Для создания переменной в JavaScript используйте ключевое слово `let`.
-Приведённая ниже инструкция создаёт (другими словами: *объявляет* или *определяет*) переменную с именем "message":
+Приведённая ниже инструкция создаёт (другими словами, *объявляет*) переменную с именем "message":
```js
let message;
```
-Теперь можно поместить в неё данные, используя оператор присваивания `=`:
+Теперь можно поместить в неё данные (другими словами, *определить переменную*), используя оператор присваивания `=`:
```js
let message;
*!*
-message = 'Hello'; // сохранить строку
+message = 'Hello'; // сохранить строку 'Hello' в переменной с именем message
*/!*
```
@@ -53,8 +53,7 @@ alert(message); // Hello!
let user = 'John', age = 25, message = 'Hello';
```
-Такой способ может показаться короче, но мы не рекомендуем его.
-Для лучшей читаемости объявляйте каждую переменную на новой строке.
+Такой способ может показаться короче, но мы не рекомендуем его. Для лучшей читаемости объявляйте каждую переменную на новой строке.
Многострочный вариант немного длиннее, но легче для чтения:
@@ -65,6 +64,7 @@ let message = 'Hello';
```
Некоторые люди также определяют несколько переменных в таком вот многострочном стиле:
+
```js no-beautify
let user = 'John',
age = 25,
@@ -81,7 +81,6 @@ let user = 'John'
В принципе, все эти варианты работают одинаково. Так что это вопрос личного вкуса и эстетики.
-
````smart header="`var` вместо `let`"
В старых скриптах вы также можете найти другое ключевое слово: `var` вместо `let`:
@@ -91,21 +90,21 @@ let user = 'John'
Ключевое слово `var` - *почти* то же самое, что и `let`. Оно объявляет переменную, но немного по-другому, "устаревшим" способом.
-Есть тонкие различия между `let` и `var`, но они пока не имеют для нас значения.
-Мы подробно рассмотрим их в этой главе (253-1) (т. е. `9007199254740991`) или меньшими, чем -(253-1) для отрицательных чисел.
+
+Если говорить совсем точно, то, технически, тип `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, чтобы дать возможность работать с целыми числами произвольной длины.
+
+Чтобы создать значение типа `BigInt`, необходимо добавить `n` в конец числового литерала:
+
+```js
+// символ "n" в конце означает, что это BigInt
+const bigInt = 1234567890123456789012345678901234567890n;
+```
+
+Так как необходимость в использовании `BigInt`--чисел появляется достаточно редко, мы рассмотрим их в отдельной главе ±(253-1).
+ - `bigint` для целых чисел произвольной длины.
+ - `string` для строк. Строка может содержать ноль или больше символов, нет отдельного символьного типа.
+ - `boolean` для `true`/`false`.
+ - `null` для неизвестных значений -- отдельный тип, имеющий одно значение `null`.
+ - `undefined` для неприсвоенных значений -- отдельный тип, имеющий одно значение `undefined`.
+ - `symbol` для уникальных идентификаторов.
+- И один не является «примитивным» и стоит особняком:
+ - `object` для более сложных структур данных.
Оператор `typeof` позволяет нам увидеть, какой тип данных сохранён в переменной.
diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md
similarity index 100%
rename from 1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/solution.md
rename to 1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/solution.md
diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md b/1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md
similarity index 100%
rename from 1-js/02-first-steps/09-alert-prompt-confirm/1-simple-page/task.md
rename to 1-js/02-first-steps/06-alert-prompt-confirm/1-simple-page/task.md
diff --git a/1-js/02-first-steps/09-alert-prompt-confirm/article.md b/1-js/02-first-steps/06-alert-prompt-confirm/article.md
similarity index 60%
rename from 1-js/02-first-steps/09-alert-prompt-confirm/article.md
rename to 1-js/02-first-steps/06-alert-prompt-confirm/article.md
index 1931b522b4..6a0bce1713 100644
--- a/1-js/02-first-steps/09-alert-prompt-confirm/article.md
+++ b/1-js/02-first-steps/06-alert-prompt-confirm/article.md
@@ -1,19 +1,10 @@
# Взаимодействие: alert, prompt, confirm
-В этой части учебника мы разбираем "собственно JavaScript", без привязки к браузеру или другой среде выполнения.
-
-Но, так как мы будем использовать браузер как демо-среду, нам нужно познакомиться по крайней мере с несколькими функциями его интерфейса, а именно: `alert`, `prompt` и `confirm`.
-
+Так как мы будем использовать браузер как демо-среду, нам нужно познакомиться с несколькими функциями его интерфейса, а именно: `alert`, `prompt` и `confirm`.
## alert
-Синтаксис:
-
-```js
-alert(message);
-```
-
-Этот код отобразит окно в браузере и приостановит дальнейшее выполнение скриптов до тех пор, пока пользователь не нажмёт кнопку "OK".
+С этой функцией мы уже знакомы. Она показывает сообщение и ждёт, пока пользователь нажмёт кнопку "ОК".
Например:
@@ -21,7 +12,7 @@ alert(message);
alert("Hello");
```
-Это небольшое окно с сообщением называется *модальным окном*. Понятие *модальный* означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока взаимодействует с окном. В данном случае -- пока не будет нажата кнопка "OK".
+Это небольшое окно с сообщением называется *модальным окном*. Понятие *модальное* означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока взаимодействует с окном. В данном случае -- пока не будет нажата кнопка "OK".
## prompt
@@ -39,9 +30,13 @@ result = prompt(title, [default]);
`default`
: Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.
-Пользователь может напечатать что-либо в поле ввода и нажать OK. Он также может отменить ввод нажатием на кнопку "Отмена" или нажав на клавишу `key:Esc`.
+```smart header="Квадратные скобки в синтаксисе `[...]`"
+Квадратные скобки вокруг `default` в описанном выше синтаксисе означают, что параметр факультативный, необязательный.
+```
+
+Пользователь может напечатать что-либо в поле ввода и нажать OK. Введённый текст будет присвоен переменной `result`. Пользователь также может отменить ввод нажатием на кнопку "Отмена" или нажав на клавишу `key:Esc`. В этом случае значением `result` станет `null`.
-Вызов `prompt` вернёт текст, указанный в поле для ввода, или `null`, если ввод отменён пользователем.
+Вызов `prompt` возвращает текст, указанный в поле для ввода, или `null`, если ввод отменён пользователем.
Например:
@@ -52,7 +47,7 @@ alert(`Тебе ${age} лет!`); // Тебе 100 лет!
```
````warn header="Для IE: всегда устанавливайте значение по умолчанию"
-Второй параметр не обязательный, но если не указать его, то Internet Explorer установит значение `"undefined"` в поле для ввода.
+Второй параметр является необязательным, но если не указать его, то Internet Explorer вставит строку `"undefined"` в поле для ввода.
Запустите код в Internet Explorer и посмотрите на результат:
@@ -77,14 +72,14 @@ result = confirm(question);
Функция `confirm` отображает модальное окно с текстом вопроса `question` и двумя кнопками: OK и Отмена.
-Результат `true`, если нажата кнопка OK. В других случаях `false`.
+Результат -- `true`, если нажата кнопка OK. В других случаях -- `false`.
Например:
```js run
let isBoss = confirm("Ты здесь главный?");
-alert( isBoss ); // true если нажата OK
+alert( isBoss ); // true, если нажата OK
```
## Итого
@@ -95,16 +90,16 @@ alert( isBoss ); // true если нажата OK
: показывает сообщение.
`prompt`
-: показывает сообщение и запрашивает ввод текста от пользователя. Возвращает напечатанный текст в поле ввода или `null`, если была нажата кнопка "Отмена" или `key:Esc` с клавиатуры.
+: показывает сообщение и запрашивает ввод текста от пользователя. Возвращает напечатанный в поле ввода текст или `null`, если была нажата кнопка "Отмена" или `key:Esc` с клавиатуры.
`confirm`
-: показывает сообщение и ждёт, пока пользователь нажмёт OK или Отмена. Возвращает `true`, если нажата OK и `false`, если нажата кнопка "Отмена" или `key:Esc` с клавиатуры.
+: показывает сообщение и ждёт, пока пользователь нажмёт OK или Отмена. Возвращает `true`, если нажата OK, и `false`, если нажата кнопка "Отмена" или `key:Esc` с клавиатуры.
Все эти методы являются модальными: останавливают выполнение скриптов и не позволяют пользователю взаимодействовать с остальной частью страницы до тех пор, пока окно не будет закрыто.
-На все указанные методы распространяется два ограничения:
+На все указанные методы распространяются два ограничения:
1. Расположение окон определяется браузером. Обычно окна находятся в центре.
2. Визуальное отображение окон зависит от браузера, и мы не можем изменить их вид.
-Такова цена простоты. Есть другие способы показать более приятные глазу окна с богатым функционалом для взаимодействия с пользователем, но если "навороты" не имеют значения, то данные методы работают отлично.
+Такова цена простоты. Есть другие способы показать более приятные глазу окна с богатой функциональностью для взаимодействия с пользователем, но если "навороты" не имеют значения, то данные методы работают отлично.
diff --git a/1-js/02-first-steps/06-type-conversions/article.md b/1-js/02-first-steps/07-type-conversions/article.md
similarity index 64%
rename from 1-js/02-first-steps/06-type-conversions/article.md
rename to 1-js/02-first-steps/07-type-conversions/article.md
index 71f77ed8a9..bd413fa539 100644
--- a/1-js/02-first-steps/06-type-conversions/article.md
+++ b/1-js/02-first-steps/07-type-conversions/article.md
@@ -1,13 +1,15 @@
# Преобразование типов
-Чаще всего, операторы и функции автоматически приводят переданные им значения к нужному типу.
+Чаще всего операторы и функции автоматически приводят переданные им значения к нужному типу.
-Например, `alert` автоматически преобразует любое значение к строке. Математические операторы преобразуют значения к числам.
+Например, `alert` автоматически преобразует любое значение к строке. Математические операторы преобразуют значения к числам.
Есть также случаи, когда нам нужно явно преобразовать значение в ожидаемый тип.
```smart header="Пока что мы не говорим об объектах"
-В этой главе мы не касаемся объектов. Сначала мы разберём преобразование примитивных значений. Мы разберём преобразование объектов позже, в главе true / false | `1` / `0` |
-| `string` | Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то `0`, иначе из непустой строки "считывается" число. При ошибке результат `NaN`.|
+| `string` | Пробельные символы (пробелы, знаки табуляции `\t`, знаки новой строки `\n` и т. п.) по краям обрезаются. Далее, если остаётся пустая строка, то получаем `0`, иначе из непустой строки "считывается" число. При ошибке результат `NaN`.|
Примеры:
```js run
alert( Number(" 123 ") ); // 123
-alert( Number("123z") ); // NaN (ошибка чтения числа в "z")
+alert( Number("123z") ); // NaN (ошибка чтения числа на месте символа "z")
alert( Number(true) ); // 1
alert( Number(false) ); // 0
```
Учтите, что `null` и `undefined` ведут себя по-разному. Так, `null` становится нулём, тогда как `undefined` приводится к `NaN`.
-````smart header="Сложение '+' объединяет строки"
-Почти все математические операторы выполняют численное преобразование. Исключение составляет `+`. Если одно из слагаемых является строкой, тогда и все остальные приводятся к строкам.
-
-Тогда они конкатенируются (присоединяются) друг к другу:
-
-```js run
-alert( 1 + '2' ); // '12' (строка справа)
-alert( '1' + 2 ); // '12' (строка слева)
-```
-
-Так происходит, только если хотя бы один из аргументов является строкой. Во всех остальных случаях значения складываются как числа.
-````
+Большинство математических операторов также производит данное преобразование, как мы увидим в следующей главе.
## Логическое преобразование
Логическое преобразование самое простое.
-Происходит в логических операторах (позже мы познакомимся с подобными конструкциями), но также может быть выполнено явно с помощью функции `Boolean(value)`.
+Происходит в логических операциях (позже мы познакомимся с условными проверками и подобными конструкциями), но также может быть выполнено явно с помощью функции `Boolean(value)`.
Правило преобразования:
-- Значения, которые интуитивно "пустые", вроде `0`, пустой строки, `null`, `undefined`, и `NaN`, становятся `false`.
+- Значения, которые интуитивно "пустые", вроде `0`, пустой строки, `null`, `undefined` и `NaN`, становятся `false`.
- Все остальные значения становятся `true`.
Например:
@@ -115,7 +106,7 @@ alert( Boolean("Привет!") ); // true
alert( Boolean("") ); // false
```
-````warn header="Заметим, что строчка с нулём `\"0\"` это `true`"
+````warn header="Заметим, что строка с нулём `\"0\"` — это `true`"
Некоторые языки (к примеру, PHP) воспринимают строку `"0"` как `false`. Но в JavaScript, если строка не пустая, то она всегда `true`.
```js run
@@ -124,12 +115,11 @@ alert( Boolean(" ") ); // пробел это тоже true (любая непу
```
````
-
## Итого
-Существует 3 наиболее широко используемых преобразований: строковое, численное и логическое.
+Существует 3 наиболее широко используемых преобразования: строковое, численное и логическое.
-**`Строковое`** -- Происходит, когда там нужно что-то вывести. Может быть вызвано с помощью `String(value)`. Для примитивных значений работает очевидным образом.
+**`Строковое`** -- Происходит, когда нам нужно что-то вывести. Может быть вызвано с помощью `String(value)`. Для примитивных значений работает очевидным образом.
**`Численное`** -- Происходит в математических операциях. Может быть вызвано с помощью `Number(value)`.
@@ -140,9 +130,9 @@ alert( Boolean(" ") ); // пробел это тоже true (любая непу
|`undefined`|`NaN`|
|`null`|`0`|
|true / false | `1 / 0` |
-| `string` | Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то `0`, иначе из непустой строки "считывается" число. При ошибке результат `NaN`.|
+| `string` | Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то получаем `0`, иначе из непустой строки "считывается" число. При ошибке результат `NaN`.|
-**`Логическое`** -- Происходит в логических операторах. Может быть вызвано с помощью `Boolean(value)`.
+**`Логическое`** -- Происходит в логических операциях. Может быть вызвано с помощью `Boolean(value)`.
Подчиняется правилам:
@@ -155,6 +145,6 @@ alert( Boolean(" ") ); // пробел это тоже true (любая непу
Большую часть из этих правил легко понять и запомнить. Особые случаи, в которых часто допускаются ошибки:
- `undefined` при численном преобразовании становится `NaN`, не `0`.
-- `"0"` и строки с одними пробелами вроде `" "` при логическом преобразовании всегда `true`.
+- `"0"` и строки из одних пробелов типа `" "` при логическом преобразовании всегда `true`.
В этой главе мы не говорили об объектах. Мы вернёмся к ним позже, в главе a > b, a < b.
- Больше/меньше или равно: a >= b, a <= b.
-- Равно: `a == b`. Обратите внимание, для сравнения используется двойной знак равенства `=`. Один знак равенства `a = b` означал бы присваивание.
-- Не равно. В математике обозначается символом ≠. В JavaScript записывается как знак равенства с предшествующим ему восклицательным знаком: a != b.
+- Равно: `a == b`. Обратите внимание, для сравнения используется двойной знак равенства `==`. Один знак равенства `a = b` означал бы присваивание.
+- Не равно. В математике обозначается символом ≠, но в JavaScript записывается как a != b.
+
+В этом разделе мы больше узнаем про то, какие бывают сравнения, как язык с ними работает и к каким неожиданностям мы должны быть готовы.
+
+В конце вы найдёте хороший рецепт того, как избегать "причуд" сравнения в JavaScript.
## Результат сравнения имеет логический тип
-Операторы сравнения, как и другие операторы, возвращают значение. Это значение имеет логический тип.
+Все операторы сравнения возвращают значение логического типа:
- `true` -- означает "да", "верно", "истина".
- `false` -- означает "нет", "неверно", "ложь".
@@ -39,23 +45,23 @@ alert( result ); // true
```js run
alert( 'Я' > 'А' ); // true
-alert( 'Кот' > 'Код' ); // true
+alert( 'Коты' > 'Кода' ); // true
alert( 'Сонный' > 'Сон' ); // true
```
Алгоритм сравнения двух строк довольно прост:
1. Сначала сравниваются первые символы строк.
-2. Если первый символ первой строки больше (меньше), чем первый символ второй, то первая строка больше (меньше) второй.
+2. Если первый символ первой строки больше (меньше), чем первый символ второй, то первая строка больше (меньше) второй. Сравнение завершено.
3. Если первые символы равны, то таким же образом сравниваются уже вторые символы строк.
4. Сравнение продолжается, пока не закончится одна из строк.
5. Если обе строки заканчиваются одновременно, то они равны. Иначе, большей считается более длинная строка.
-В примерах выше сравнение `'Я' > 'А'` завершится на первом шаге, тогда как строки `"Кот"` и `"Код"` будут сравниваться посимвольно:
+В примерах выше сравнение `'Я' > 'А'` завершится на первом шаге, тогда как строки `'Коты'` и `'Кода'` будут сравниваться посимвольно:
1. `К` равна `К`.
2. `о` равна `о`.
-3. `т` больше чем `д`. На этом сравнение заканчивается. Первая строка больше.
+3. `т` больше, чем `д`. На этом сравнение заканчивается. Первая строка больше.
```smart header="Используется кодировка Unicode, а не настоящий алфавит"
Приведённый выше алгоритм сравнения похож на алгоритм, используемый в словарях и телефонных книгах, но между ними есть и различия.
@@ -65,7 +71,7 @@ alert( 'Сонный' > 'Сон' ); // true
## Сравнение разных типов
-При сравнении значений разных типов, JavaScript приводит каждое из них к числу.
+При сравнении значений разных типов JavaScript приводит каждое из них к числу.
Например:
@@ -134,11 +140,11 @@ alert( 0 === false ); // false, так как сравниваются разн
Ещё есть оператор строгого неравенства `!==`, аналогичный `!=`.
-Оператор строгого равенства дольше писать, но он делает код более очевидным и оставляет меньше мест для ошибок.
+Оператор строгого равенства дольше писать, но он делает код более очевидным и оставляет меньше места для ошибок.
## Сравнение с null и undefined
-Поведение `null` и `undefined` при сравнении с другими значениями - особое:
+Поведение `null` и `undefined` при сравнении с другими значениями — особое:
При строгом равенстве `===`
: Эти значения различны, так как различны их типы.
@@ -175,7 +181,7 @@ alert( null >= 0 ); // (3) *!*true*/!*
С другой стороны, для нестрогого равенства `==` значений `undefined` и `null` действует особое правило: эти значения ни к чему не приводятся, они равны друг другу и не равны ничему другому. Поэтому (2) `null == 0` ложно.
-### Несравнимое значение undefined
+### Несравненное значение undefined
Значение `undefined` несравнимо с другими значениями:
@@ -190,20 +196,19 @@ alert( undefined == 0 ); // false (3)
На это есть следующие причины:
- Сравнения `(1)` и `(2)` возвращают `false`, потому что `undefined` преобразуется в `NaN`, а `NaN` – это специальное числовое значение, которое возвращает `false` при любых сравнениях.
-- Нестрогое равенство `(3)` возвращает `false`, потому что `undefined` равно только `null` и ни чему больше.
+- Нестрогое равенство `(3)` возвращает `false`, потому что `undefined` равно только `null`, `undefined` и ничему больше.
### Как избежать проблем
-Зачем мы рассмотрели все эти примеры? Должны ли мы постоянно помнить обо всех этих особенностях? Не обязательно. Со временем, все они станут вам знакомы, но можно избежать проблем, если следовать простому правилу.
-
-Просто относитесь к любому сравнению с `undefined/null`, кроме строгого равенства `===`, с осторожностью.
+Зачем мы рассмотрели все эти примеры? Должны ли мы постоянно помнить обо всех этих особенностях? Необязательно. Со временем все они станут вам знакомы, но можно избежать проблем, если следовать надёжным правилам:
-Не используйте сравнения `>= > < <=` с переменными, которые могут принимать значения `null/undefined`, если вы не уверены в том, что делаете. Если переменная может принимать эти значения, то добавьте для них отдельные проверки.
+- Относитесь очень осторожно к любому сравнению с `undefined/null`, кроме случаев строгого равенства `===`.
+- Не используйте сравнения `>= > < <=` с переменными, которые могут принимать значения `null/undefined`, разве что вы полностью уверены в том, что делаете. Если переменная может принимать эти значения, то добавьте для них отдельные проверки.
## Итого
- Операторы сравнения возвращают значения логического типа.
- Строки сравниваются посимвольно в лексикографическом порядке.
- Значения разных типов при сравнении приводятся к числу. Исключением является сравнение с помощью операторов строгого равенства/неравенства.
-- Значения `null` и `undefined` равны `==` друг другу и не равны любому другому.
-- Будьте осторожны при использовании операторов сравнений `>` и `<` с переменными, которые могут принимать значения `null/undefined`. Хорошей идеей будет сделать отдельную проверку на `null/undefined`.
+- Значения `null` и `undefined` равны `==` друг другу и не равны любому другому значению.
+- Будьте осторожны при использовании операторов сравнений вроде `>` и `<` с переменными, которые могут принимать значения `null/undefined`. Хорошей идеей будет сделать отдельную проверку на `null/undefined`.
diff --git a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.svg b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.svg
index 6e44c9b4e9..2ef4442c7b 100644
--- a/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.svg
+++ b/1-js/02-first-steps/10-ifelse/2-check-standard/ifelse_task2.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md b/1-js/02-first-steps/10-ifelse/4-rewrite-if-question/solution.md
similarity index 100%
rename from 1-js/02-first-steps/10-ifelse/5-rewrite-if-question/solution.md
rename to 1-js/02-first-steps/10-ifelse/4-rewrite-if-question/solution.md
diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md b/1-js/02-first-steps/10-ifelse/4-rewrite-if-question/task.md
similarity index 55%
rename from 1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md
rename to 1-js/02-first-steps/10-ifelse/4-rewrite-if-question/task.md
index 78302e5ce0..eadd6aa5a1 100644
--- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md
+++ b/1-js/02-first-steps/10-ifelse/4-rewrite-if-question/task.md
@@ -4,7 +4,7 @@ importance: 5
# Перепишите 'if' в '?'
-Перепишите `if` с использованием условного оператора `'?'`:
+Перепишите конструкцию `if` с использованием условного оператора `'?'`:
```js
let result;
diff --git a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-else-question/solution.md
similarity index 100%
rename from 1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/solution.md
rename to 1-js/02-first-steps/10-ifelse/5-rewrite-if-else-question/solution.md
diff --git a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-else-question/task.md
similarity index 100%
rename from 1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md
rename to 1-js/02-first-steps/10-ifelse/5-rewrite-if-else-question/task.md
diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md
index 6b0b2e48b5..598a1d25b5 100644
--- a/1-js/02-first-steps/10-ifelse/article.md
+++ b/1-js/02-first-steps/10-ifelse/article.md
@@ -1,17 +1,17 @@
-# Условные операторы: if, '?'
+# Условное ветвление: if, '?'
Иногда нам нужно выполнить различные действия в зависимости от условий.
-Для этого мы можем использовать оператор `if` и условный оператор `?`, который также называют "оператор вопросительный знак".
+Для этого мы можем использовать инструкцию `if` и условный оператор `?`, который также называют оператором "вопросительный знак".
-## Оператор "if"
+## Инструкция "if"
-Оператор `if(...)` вычисляет условие в скобках и, если результат `true`, то выполняет блок кода.
+Инструкция `if(...)` вычисляет условие в скобках и, если результат `true`, то выполняет блок кода.
Например:
```js run
-let year = prompt('В каком году появилась спецификация ECMAScript-2015?', '');
+let year = prompt('В каком году была опубликована спецификация ECMAScript-2015?', '');
*!*
if (year == 2015) alert( 'Вы правы!' );
@@ -29,11 +29,11 @@ if (year == 2015) {
}
```
-Мы рекомендуем использовать фигурные скобки `{}` всегда, когда вы используете оператор `if`, даже если выполняется только одна команда. Это улучшает читабельность кода.
+Мы рекомендуем использовать фигурные скобки `{}` всегда, когда вы используете инструкцию `if`, даже если выполняется только одна команда. Это улучшает читаемость кода.
## Преобразование к логическому типу
-Оператор `if (…)` вычисляет выражение в скобках и преобразует результат к логическому типу.
+Инструкция `if (…)` вычисляет выражение в скобках и преобразует результат к логическому типу.
Давайте вспомним правила преобразования типов из главы Если оно вычислится в `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/13-switch/1-rewrite-switch-if-else/solution.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md similarity index 100% rename from 1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/solution.md rename to 1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md diff --git a/1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/task.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md similarity index 100% rename from 1-js/02-first-steps/13-switch/1-rewrite-switch-if-else/task.md rename to 1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md diff --git a/1-js/02-first-steps/13-switch/2-rewrite-if-switch/solution.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md similarity index 100% rename from 1-js/02-first-steps/13-switch/2-rewrite-if-switch/solution.md rename to 1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md diff --git a/1-js/02-first-steps/13-switch/2-rewrite-if-switch/task.md b/1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md similarity index 100% rename from 1-js/02-first-steps/13-switch/2-rewrite-if-switch/task.md rename to 1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md diff --git a/1-js/02-first-steps/13-switch/article.md b/1-js/02-first-steps/14-switch/article.md similarity index 99% rename from 1-js/02-first-steps/13-switch/article.md rename to 1-js/02-first-steps/14-switch/article.md index 551d990f8f..7f356dc2da 100644 --- a/1-js/02-first-steps/13-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/14-function-basics/1-if-else-required/solution.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/1-if-else-required/solution.md rename to 1-js/02-first-steps/15-function-basics/1-if-else-required/solution.md diff --git a/1-js/02-first-steps/14-function-basics/1-if-else-required/task.md b/1-js/02-first-steps/15-function-basics/1-if-else-required/task.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/1-if-else-required/task.md rename to 1-js/02-first-steps/15-function-basics/1-if-else-required/task.md diff --git a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/solution.md rename to 1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md diff --git a/1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/2-rewrite-function-question-or/task.md rename to 1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md diff --git a/1-js/02-first-steps/14-function-basics/3-min/solution.md b/1-js/02-first-steps/15-function-basics/3-min/solution.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/3-min/solution.md rename to 1-js/02-first-steps/15-function-basics/3-min/solution.md diff --git a/1-js/02-first-steps/14-function-basics/3-min/task.md b/1-js/02-first-steps/15-function-basics/3-min/task.md similarity index 100% rename from 1-js/02-first-steps/14-function-basics/3-min/task.md rename to 1-js/02-first-steps/15-function-basics/3-min/task.md diff --git a/1-js/02-first-steps/14-function-basics/4-pow/solution.md b/1-js/02-first-steps/15-function-basics/4-pow/solution.md similarity index 92% rename from 1-js/02-first-steps/14-function-basics/4-pow/solution.md rename to 1-js/02-first-steps/15-function-basics/4-pow/solution.md index 4375dab037..a374abc83e 100644 --- a/1-js/02-first-steps/14-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/14-function-basics/4-pow/task.md b/1-js/02-first-steps/15-function-basics/4-pow/task.md similarity index 77% rename from 1-js/02-first-steps/14-function-basics/4-pow/task.md rename to 1-js/02-first-steps/15-function-basics/4-pow/task.md index de3b84475f..e4e513c313 100644 --- a/1-js/02-first-steps/14-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/14-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md similarity index 83% rename from 1-js/02-first-steps/14-function-basics/article.md rename to 1-js/02-first-steps/15-function-basics/article.md index 3665281087..4f3bacf687 100644 --- a/1-js/02-first-steps/14-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/15-function-expressions-arrows/article.md b/1-js/02-first-steps/16-function-expressions/article.md similarity index 51% rename from 1-js/02-first-steps/15-function-expressions-arrows/article.md rename to 1-js/02-first-steps/16-function-expressions/article.md index 0dc084d6ef..795217fc39 100644 --- a/1-js/02-first-steps/15-function-expressions-arrows/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -1,4 +1,4 @@ -# Function Expression и функции-стрелки +# Function Expression Функция в JavaScript - это не магическая языковая структура, а особого типа значение. @@ -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)` с тремя параметрами: @@ -104,7 +115,7 @@ let sayHi = function() { : Текст вопроса `yes` -: Функция, которая будет вызваться, если ответ будет "Yes" +: Функция, которая будет вызываться, если ответ будет "Yes" `no` : Функция, которая будет вызываться, если ответ будет "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, могут быть вызваны раньше своих определений. Например, так будет работать: @@ -223,7 +234,7 @@ function sayHi(name) { Функция `sayHi` была создана, когда движок JavaScript подготавливал скрипт к выполнению, и такая функция видна повсюду в этом скрипте. -...Если бы это было Function Expression, то такой код вызовет ошибку: +...Если бы это было Function Expression, то такой код вызвал бы ошибку: ```js run refresh untrusted *!* @@ -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,122 +365,17 @@ welcome(); // теперь всё в порядке Также функции вида `function f(…) {…}` чуть более заметны в коде, чем `let f = function(…) {…}`. Function Declaration легче "ловятся глазами". -...Но если Function Declaration нам не подходит по какой-то причине (мы рассмотрели это в примере выше), то можно использовать объявление при помощи Function Expression. -``` - - -## Функции-стрелки [#arrow-functions] - -Существует ещё более простой и краткий синтаксис для создания функций, который часто лучше, чем синтаксис Function Expression. Он называется "функции-стрелки" или "стрелочные функции" (arrow functions), т.к. выглядит следующим образом: - - -```js -let func = (arg1, arg2, ...argN) => expression -``` - -...Такой код создаёт функцию `func` с аргументами `arg1..argN` и вычисляет `expression` с правой стороны с их использованием, возвращая результат. - -Другими словами, это почти то же самое, что и: - -```js -let func = function(arg1, arg2, ...argN) { - return expression; -}; -``` - -...но гораздо короче. - -Давайте взглянем на пример: - -```js run -let sum = (a, b) => a + b; - -/* Функция-стрелка более краткая форма для: - -let sum = function(a, b) { - return a + b; -}; -*/ - -alert( sum(1, 2) ); // 3 - -``` - -Если у нас только один аргумент, то круглые скобки вокруг параметров можно опустить, сделав запись ещё короче: - -```js run -// тоже что и -// let double = function(n) { return n * 2 } -*!* -let double = n => n * 2; -*/!* - -alert( double(3) ); // 6 -``` - -Если нет аргументов, используются пустые круглые скобки (их указывать обязательно): - -```js run -let sayHi = () => alert("Hello!"); - -sayHi(); -``` - -Функции-стрелки могут быть использованы так же, как и Function Expression. - -Например, вот переписанный пример уже знакомой нам функции `welcome()`: - -```js run -let age = prompt("Сколько Вам лет?", 18); - -let welcome = (age < 18) ? - () => alert('Привет') : - () => alert("Здравствуйте!"); - -welcome(); // теперь всё в порядке -``` - -Поначалу функции-стрелки могут показаться необычными и трудночитаемыми, но это быстро пройдёт, как только глаза привыкнут к этим конструкциям. - -Они очень удобны для простых однострочных действий, когда лень писать много букв. - -```smart header="Многострочные стрелочные функции" -В примерах выше аргументы использовались слева от `=>`, а справа вычислялось выражение с их значениями. - -Порой нам нужно кое-что более сложное, возможно, несколько выражений или инструкций. Это также возможно, но мы должны заключать такие выражения в фигурные скобки с использованием директивы `return` внутри них, как в обычной функции. - -Например: - -```js run -let sum = (a, b) => { // фигурная скобка, открывающая тело многострочной функции - let result = a + b; -*!* - return result; // при фигурных скобках нужен return, чтобы вернуть результат -*/!* -}; - -alert( sum(1, 2) ); // 3 -``` - -```smart header="Кое-что ещё" -Здесь мы рассмотрели функции-стрелки как способ писать меньше букв. Но это далеко не всё! Стрелочные функции обладают другими интересными особенностями. Мы вернёмся к ним позже в главе
(253-1) или менее чем -(253-1). Так как `BigInt` числа нужны достаточно редко, мы рассмотрим их в отдельной главе func`string`. Автоматически вызываемая функция `func` получает строку и встроенные в неё выражения и может их обработать. Подробнее об этом можно прочитать в [документации](mdn:/JavaScript/Reference/Template_literals#Tagged_templates). Если перед строкой есть выражение, то шаблонная строка называется "теговым шаблоном". Это позволяет использовать свою шаблонизацию для строк, но на практике теговые шаблоны применяются редко.
+Обратные кавычки также позволяют задавать "шаблонную функцию" перед первой обратной кавычкой. Используемый синтаксис: func`string`. Автоматически вызываемая функция `func` получает строку и встроенные в неё выражения и может их обработать. Подробнее об этом можно прочитать в [документации](mdn:/JavaScript/Reference/template_strings#%D0%A2%D0%B5%D0%B3%D0%BE%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%8B). Если перед строкой есть выражение, то шаблонная строка называется "теговым шаблоном". Это позволяет использовать свою шаблонизацию для строк, но на практике теговые шаблоны применяются редко.
## Спецсимволы
@@ -78,29 +79,13 @@ alert(str1 == str2); // true
| Символ | Описание |
|-----------|-------------|
|`\n`|Перевод строки|
-|`\r`|Возврат каретки: самостоятельно не используется. В текстовых файлах Windows для перевода строки используется комбинация символов `\r\n`. |
-|`\'`, `\"`|Кавычки|
+|`\r`|В текстовых файлах Windows для перевода строки используется комбинация символов `\r\n`, а на других ОС это просто `\n`. Это так по историческим причинам, ПО под Windows обычно понимает и просто `\n`. |
+|`\'`, `\"`, \\`|Кавычки|
|`\\`|Обратный слеш|
|`\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"
```
## Получение подстроки
@@ -410,9 +398,10 @@ alert( "Widget".endsWith("get") ); // true, "get" — окончание "Widget
```
`str.substring(start [, end])`
-: Возвращает часть строки *между* `start` и `end`.
+: Возвращает часть строки *между* `start` и `end` (не включая) `end`.
- Это — почти то же, что и `slice`, но можно задавать `start` больше `end`.
+ Это — почти то же, что и `slice`, но можно задавать `start` больше `end`.
+ Если `start` больше `end`, то метод `substring` сработает так, как если бы аргументы были поменяны местами.
Например:
@@ -450,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="Какой метод выбрать?"
@@ -505,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
@@ -534,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), обеспечивающий правильное сравнение строк на разных языках с учётом их правил.
Для этого есть соответствующий метод.
@@ -558,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 7f9769a60f..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,29 +4,32 @@ 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()` слишком ресурсоёмкая, чтобы делать это при каждом микродвижении. Да и нет смысла делать обновление чаще, чем один раз в 100 мс.
+...Но функция обновления `update()` слишком ресурсоёмкая, чтобы делать это при каждом микродвижении. Да и нет смысла делать обновление чаще, чем один раз в 1000 мс.
-Поэтому мы обернём вызов в декоратор: будем использовать `throttle(update, 100)` как функцию, которая будет запускаться при каждом перемещении указателя вместо оригинальной `update()`. Декоратор будет вызываться часто, но передавать вызов в `update()` максимум раз в 100 мс.
+Поэтому мы обернём вызов в декоратор: будем использовать `throttle(update, 1000)` как функцию, которая будет запускаться при каждом перемещении указателя вместо оригинальной `update()`. Декоратор будет вызываться часто, но передавать вызов в `update()` максимум раз в 1000 мс.
Визуально это будет выглядеть вот так:
1. Для первого движения указателя декорированный вариант сразу передаёт вызов в `update`. Это важно, т.к. пользователь сразу видит нашу реакцию на его перемещение.
-2. Затем, когда указатель продолжает движение, в течение 100 мс ничего не происходит. Декорированный вариант игнорирует вызовы.
-3. По истечению 100 мс происходит ещё один вызов `update` с последними координатами.
-4. Затем, наконец, указатель где-то останавливается. Декорированный вариант ждёт, пока не истечёт 100 мс, и затем вызывает `update` с последними координатами. В итоге окончательные координаты указателя тоже обработаны.
+2. Затем, когда указатель продолжает движение, в течение 1000 мс ничего не происходит. Декорированный вариант игнорирует вызовы.
+3. По истечению 1000 мс происходит ещё один вызов `update` с последними координатами.
+4. Затем, наконец, указатель где-то останавливается. Декорированный вариант ждёт, пока не истечёт 1000 мс, и затем вызывает `update` с последними координатами. В итоге окончательные координаты указателя тоже обработаны.
Пример кода:
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 f481024e36..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
@@ -1,4 +1,4 @@
-# Декораторы и переадресация вызова, сall/apply
+# Декораторы и переадресация вызова, call/apply
JavaScript предоставляет исключительно гибкие возможности по работе с функциями: они могут быть переданы в другие функции, использованы как объекты, и сейчас мы рассмотрим, как *перенаправлять* вызовы между ними и как их декорировать.
@@ -45,7 +45,7 @@ alert( "Again: " + slow(2) ); // возвращаем из кеша
В коде выше `cachingDecorator` -- это *декоратор*, специальная функция, которая принимает другую функцию и изменяет её поведение.
-Идея состоит в том, что мы можем вызвать `cachingDecorator` с любой функцией, в результате чего мы получим кеширующую обёртку. Это здорово, т.к. у нас может быть множество функций, использующих такой функционал, и всё, что нам нужно сделать - это применить к ним `cachingDecorator`.
+Идея состоит в том, что мы можем вызвать `cachingDecorator` с любой функцией, в результате чего мы получим кеширующую обёртку. Это здорово, т.к. у нас может быть множество функций, использующих такую функциональность, и всё, что нам нужно сделать - это применить к ним `cachingDecorator`.
Отделяя кеширующий код от основного кода, мы также сохраняем чистоту и простоту последнего.
@@ -62,7 +62,7 @@ alert( "Again: " + slow(2) ); // возвращаем из кеша
- При необходимости мы можем объединить несколько декораторов (речь об этом пойдёт позже).
-## Применение "func.call" для передачи контекста.
+## Применение "func.call" для передачи контекста
Упомянутый выше кеширующий декоратор не подходит для работы с методами объектов.
@@ -151,8 +151,8 @@ let user = { name: "John" };
let admin = { name: "Admin" };
// используем 'call' для передачи различных объектов в качестве 'this'
-sayHi.call( user ); // this = John
-sayHi.call( admin ); // this = Admin
+sayHi.call( user ); // John
+sayHi.call( admin ); // Admin
```
Здесь мы используем `call` для вызова `say` с заданным контекстом и фразой:
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg
index ccf55d88d5..3d8428b273 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/decorator-makecaching-wrapper.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
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/06-advanced-functions/12-arrow-functions/article.md b/1-js/06-advanced-functions/12-arrow-functions/article.md
index 088c58b287..ab10c47396 100644
--- a/1-js/06-advanced-functions/12-arrow-functions/article.md
+++ b/1-js/06-advanced-functions/12-arrow-functions/article.md
@@ -79,7 +79,7 @@ group.showList();
## Стрелочные функции не имеют "arguments"
-У стрелочных функции также нет переменной `arguments`.
+У стрелочных функций также нет переменной `arguments`.
Это отлично подходит для декораторов, когда нам нужно пробросить вызов с текущими `this` и `arguments`.
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 7eb9378f98..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`) иногда предустановлен для некоторых встроенных объектов и свойств.
-Неконфигурируемое свойство не может быть удалено или изменено с помощью `defineProperty`.
+Неконфигурируемое свойство не может быть удалено, его атрибуты не могут быть изменены.
Например, свойство `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 5388614b82..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() {
@@ -92,12 +94,7 @@ alert(user.name); // Alice
alert(user.surname); // Cooper
```
-В итоге мы получили "виртуальное" свойство `fullName`. Его можно прочитать и изменить, но по факту его не существует.
-
-```smart header="Нет поддержки для `delete`"
-При попытке удалить свойство-аксессор оператором `delete` будет ошибка.
-```
-
+В итоге мы получили "виртуальное" свойство `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 d2390c82ef..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,12 +124,26 @@ alert(longEar.jumps); // true (из rabbit)
+Теперь, если мы прочтём что-нибудь из `longEar`, и оно будет отсутствовать, JavaScript будет искать его в `rabbit`, а затем в `animal`.
+
Есть только два ограничения:
1. Ссылки не могут идти по кругу. JavaScript выдаст ошибку, если мы попытаемся назначить `__proto__` по кругу.
2. Значение `__proto__` может быть объектом или `null`. Другие типы игнорируются.
-Это вполне очевидно, но всё же: может быть только один `[[Prototype]]`. Объект не может наследовать от двух других объектов.
+Это вполне очевидно, но всё же: может быть только один `[[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` и другие - игнорируют унаследованные свойства.
@@ -323,7 +331,7 @@ for(let prop in rabbit) {
## Итого
- В JavaScript все объекты имеют скрытое свойство `[[Prototype]]`, которое является либо другим объектом, либо `null`.
-- Мы можем использовать `obj.__ proto__` для доступа к нему (исторически обусловленный геттер/сеттер, есть другие способы, которые скоро будут рассмотрены).
+- Мы можем использовать `obj.__proto__` для доступа к нему (исторически обусловленный геттер/сеттер, есть другие способы, которые скоро будут рассмотрены).
- Объект, на который ссылается `[[Prototype]]`, называется "прототипом".
- Если мы хотим прочитать свойство `obj` или вызвать метод, которого не существует у `obj`, тогда JavaScript попытается найти его в прототипе.
- Операции записи/удаления работают непосредственно с объектом, они не используют прототип (если это обычное свойство, а не сеттер).
diff --git a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg
index dc53f56636..982f2e4c17 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/object-prototype-empty.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg
index 3e81f262b5..4bf580ae77 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-chain.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg
index 3cf5c4c78e..838c78395b 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-2.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg
index acd4206319..e994331dab 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk-3.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg
index ebdef95877..b324710286 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit-walk.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg
index 735e1f2b36..4f3c1bc0ec 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-animal-rabbit.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg
index 433bc613f9..bf0baf013a 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/proto-user-admin.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg
index d32585b431..32a9858f83 100644
--- a/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg
+++ b/1-js/08-prototypes/01-prototype-inheritance/rabbit-animal-object.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
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/02-function-prototype/function-prototype-constructor.svg b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg
index 35cdc61f1d..1fced82b39 100644
--- a/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg
+++ b/1-js/08-prototypes/02-function-prototype/function-prototype-constructor.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg
index 3489ecdd8c..ede4e1227e 100644
--- a/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg
+++ b/1-js/08-prototypes/02-function-prototype/proto-constructor-animal-rabbit.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg
index 3e11f275b0..2424ea648d 100644
--- a/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg
+++ b/1-js/08-prototypes/02-function-prototype/rabbit-prototype-constructor.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/article.md b/1-js/08-prototypes/03-native-prototypes/article.md
index efad27e4e2..7e365b3062 100644
--- a/1-js/08-prototypes/03-native-prototypes/article.md
+++ b/1-js/08-prototypes/03-native-prototypes/article.md
@@ -2,7 +2,7 @@
Свойство `"prototype"` широко используется внутри самого языка JavaScript. Все встроенные функции-конструкторы используют его.
-Сначала мы рассмотрим детали, а затем используем `"prototype"` для добавления встроенным объектам нового функционала.
+Сначала мы рассмотрим детали, а затем используем `"prototype"` для добавления встроенным объектам новой функциональности.
## Object.prototype
@@ -21,7 +21,7 @@ alert( obj ); // "[object Object]" ?
-Когда вызывается `new Object()` (или создаётся объект с помощью литерала `{...}`), свойство `[[Prototype]]` этого объекта устанавливается на `Object.prototype` по правилам, который мы обсуждали в предыдущей главе:
+Когда вызывается `new Object()` (или создаётся объект с помощью литерала `{...}`), свойство `[[Prototype]]` этого объекта устанавливается на `Object.prototype` по правилам, которые мы обсуждали в предыдущей главе:
@@ -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]]`:
@@ -124,7 +124,7 @@ String.prototype.show = function() {
```warn
Прототипы глобальны, поэтому очень легко могут возникнуть конфликты. Если две библиотеки добавляют метод `String.prototype.show`, то одна из них перепишет метод другой.
-Так что, в общем, изменение встроенных прототипов считается плохой идей.
+Так что, в общем, изменение встроенных прототипов считается плохой идеей.
```
**В современном программировании есть только один случай, в котором одобряется изменение встроенных прототипов. Это создание полифилов.**
diff --git a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg
index 35cdc61f1d..1fced82b39 100644
--- a/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg
+++ b/1-js/08-prototypes/03-native-prototypes/function-prototype-constructor.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg
index 770c908c5e..ebb4f32051 100644
--- a/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg
+++ b/1-js/08-prototypes/03-native-prototypes/native-prototypes-array-tostring.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg
index 4989df56ba..4d6129e0a0 100644
--- a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg
+++ b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg
index 38c33cae16..9630e68e27 100644
--- a/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg
+++ b/1-js/08-prototypes/03-native-prototypes/object-prototype-1.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg
index 858f8317ee..9ccb342299 100644
--- a/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg
+++ b/1-js/08-prototypes/03-native-prototypes/object-prototype-null.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/object-prototype.svg b/1-js/08-prototypes/03-native-prototypes/object-prototype.svg
index 8d3d0beeec..024dd30213 100644
--- a/1-js/08-prototypes/03-native-prototypes/object-prototype.svg
+++ b/1-js/08-prototypes/03-native-prototypes/object-prototype.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg
index 3489ecdd8c..ede4e1227e 100644
--- a/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg
+++ b/1-js/08-prototypes/03-native-prototypes/proto-constructor-animal-rabbit.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg
index 3e11f275b0..2424ea648d 100644
--- a/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg
+++ b/1-js/08-prototypes/03-native-prototypes/rabbit-prototype-constructor.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
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/08-prototypes/04-prototype-methods/object-prototype-2.svg b/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg
index 86d09ae0de..cf4d3023f8 100644
--- a/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg
+++ b/1-js/08-prototypes/04-prototype-methods/object-prototype-2.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg b/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg
index 858f8317ee..9ccb342299 100644
--- a/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg
+++ b/1-js/08-prototypes/04-prototype-methods/object-prototype-null.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md
index db6ebb6de0..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
@@ -142,7 +142,7 @@ user.sayHi();
Однако есть важные отличия:
-1. Во-первых, функция, созданная с помощью `class`, помечена специальным внутренним свойством `[[FunctionKind]]:"classConstructor"`. Поэтому это не совсем то же самое, что создавать её вручную.
+1. Во-первых, функция, созданная с помощью `class`, помечена специальным внутренним свойством `[[IsClassConstructor]]: true`. Поэтому это не совсем то же самое, что создавать её вручную.
В отличие от обычных функций, конструктор класса не может быть вызван без `new`:
@@ -165,14 +165,14 @@ user.sayHi();
```
2. Методы класса являются неперечислимыми.
- Определение класса устанавливает флаг `enumerable` в` false` для всех методов в `"prototype"`.
+ Определение класса устанавливает флаг `enumerable` в `false` для всех методов в `"prototype"`.
И это хорошо, так как если мы проходимся циклом `for..in` по объекту, то обычно мы не хотим при этом получать методы класса.
3. Классы всегда используют `use strict`.
Весь код внутри класса автоматически находится в строгом режиме.
-Также в дополнение к основному, описанному выше, функционалу, синтаксис `class` даёт ряд других интересных возможностей, с которыми мы познакомимся чуть позже.
+Также в дополнение к основной, описанной выше, функциональности, синтаксис `class` даёт ряд других интересных возможностей, с которыми мы познакомимся чуть позже.
## Class Expression
diff --git a/1-js/09-classes/01-class/class-user.svg b/1-js/09-classes/01-class/class-user.svg
index 5ac0146a6c..418d71d187 100644
--- a/1-js/09-classes/01-class/class-user.svg
+++ b/1-js/09-classes/01-class/class-user.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
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/animal-rabbit-extends.svg b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg
index 3412d9825c..203c59447a 100644
--- a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg
+++ b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/09-classes/02-class-inheritance/article.md b/1-js/09-classes/02-class-inheritance/article.md
index c6ba3f8386..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 {
@@ -11,62 +16,31 @@ class Animal {
this.name = name;
}
run(speed) {
- this.speed += speed;
+ this.speed = speed;
alert(`${this.name} бежит со скоростью ${this.speed}.`);
}
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,26 +54,30 @@ let rabbit = new Rabbit("Белый кролик");
rabbit.run(5); // Белый кролик бежит со скоростью 5.
rabbit.hide(); // Белый кролик прячется!
```
-Теперь код `Rabbit` стал короче, так как используется конструктор класса `Animal` по умолчанию и кролик может использовать метод `run` как и все животные.
-На самом деле ключевое слово `extends` добавляет ссылку на `[[Prototype]]` из `Rabbit.prototype` в `Animal.prototype`:
+Объект класса `Rabbit` имеет доступ как к методам `Rabbit`, таким как `rabbit.hide()`, так и к методам `Animal`, таким как `rabbit.run()`.
+
+Внутри ключевое слово `extends` работает по старой доброй механике прототипов. Оно устанавливает `Rabbit.prototype.[[Prototype]]` в `Animal.prototype`. Таким образом, если метода не оказалось в `Rabbit.prototype`, JavaScript берет его из `Animal.prototype`.
-Если метод не найден в `Rabbit.prototype`, JavaScript возьмёт его из `Animal.prototype`.
+Например, чтобы найти метод `rabbit.run`, движок проверяет (снизу вверх на картинке):
+1. Объект `rabbit` (не имеет `run`).
+2. Его прототип, то есть `Rabbit.prototype` (имеет `hide`, но не имеет `run`).
+3. Его прототип, то есть (вследствие `extends`) `Animal.prototype`, в котором, наконец, есть метод `run`.
-Как мы помним из главы Сообщения: Logger: Logger:localeMatcher Алгоритм подбора локали
- lookup,best fit
+
lookup, best fit
- best fit
+
best fit
@@ -221,8 +221,7 @@ var formatter = new Intl.DateTimeFormat([locales, [options]])
- second
-
+ secondСекунды
2-digit, numeric
@@ -245,32 +244,32 @@ var formatter = new Intl.DateTimeFormat([locales, [options]])
- month, day
- hour, minute, second
-Если указанный формат не поддерживается, то настройка `formatMatcher` задаёт алгоритм подбора наиболее близкого формата: `basic` -- по [стандартным правилам](http://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher) и `best fit` -- по умолчанию, на усмотрение окружения (браузера).
+Если указанный формат не поддерживается, то настройка `formatMatcher` задаёт алгоритм подбора наиболее близкого формата: `basic` -- по [стандартным правилам](https://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher) и `best fit` -- по умолчанию, на усмотрение окружения (браузера).
Использование:
```js
-var dateString = formatter.format(date);
+let dateString = formatter.format(date);
```
Например:
```js run
-var date = new Date(2014, 11, 31, 12, 30, 0);
+let date = new Date(2014, 11, 31, 12, 30, 0);
-var formatter = new Intl.DateTimeFormat("ru");
-alert( formatter.format(date) ); // 31.12.2014
+let formatter1 = new Intl.DateTimeFormat("ru");
+alert( formatter1.format(date) ); // 31.12.2014
-var formatter = new Intl.DateTimeFormat("en-US");
-alert( formatter.format(date) ); // 12/31/2014
+let formatter2 = new Intl.DateTimeFormat("en-US");
+alert( formatter2.format(date) ); // 12/31/2014
```
Длинная дата, с настройками:
```js run
-var date = new Date(2014, 11, 31, 12, 30, 0);
+let date = new Date(2014, 11, 31, 12, 30, 0);
-var formatter = new Intl.DateTimeFormat("ru", {
+let formatter = new Intl.DateTimeFormat("ru", {
weekday: "long",
year: "numeric",
month: "long",
@@ -283,9 +282,9 @@ alert( formatter.format(date) ); // среда, 31 декабря 2014 г.
Только время:
```js run
-var date = new Date(2014, 11, 31, 12, 30, 0);
+let date = new Date(2014, 11, 31, 12, 30, 0);
-var formatter = new Intl.DateTimeFormat("ru", {
+let formatter = new Intl.DateTimeFormat("ru", {
hour: "numeric",
minute: "numeric",
second: "numeric"
@@ -294,14 +293,14 @@ var formatter = new Intl.DateTimeFormat("ru", {
alert( formatter.format(date) ); // 12:30:00
```
-## Числа: Intl.NumberFormat
+## Числа, Intl.NumberFormat
Форматтер `Intl.NumberFormat` умеет красиво форматировать не только числа, но и валюту, а также проценты.
Синтаксис:
```js
-var formatter = new Intl.NumberFormat([locales[, options]]);
+let formatter = new Intl.NumberFormat([locales[, options]]);
formatter.format(number); // форматирование
```
@@ -332,7 +331,7 @@ formatter.format(number); // форматирование
currency Алфавитный код валюты
- См. [Список кодов валюты](http://www.currency-iso.org/en/home/tables/table-a1.html), например
+ USD См. Список кодов валюты, например
USD
@@ -351,7 +350,7 @@ formatter.format(number); // форматирование
@@ -378,21 +377,21 @@ formatter.format(number); // форматирование
minimumIntegerDigitsМинимальное количество цифр целой части
- от `1` до `21`
+ от
1 до 21
21maximumSignificantDigitsМаксимальное количество значимых цифр
от
- 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 = '
`?
-- Напишите код, который получит второй `
`?
+- второй `