From 698358afafbb90f85d729e9980392f765ca2d472 Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Thu, 27 Feb 2025 15:52:06 +0300 Subject: [PATCH] add js-base, functions --- docs/javascript/base/01-strict.md | 13 ++ docs/javascript/base/02-variables.md | 49 +++++ docs/javascript/base/03-type-conversion.md | 49 +++++ docs/javascript/base/04-operators.md | 39 ++++ docs/javascript/base/05-compare-ops.md | 43 +++++ docs/javascript/base/06-conditions-logic.md | 177 ++++++++++++++++++ docs/javascript/base/07-cycles.md | 38 ++++ docs/javascript/base/_category_.json | 7 + docs/javascript/classes/_category_.json | 7 + docs/javascript/{ => classes}/index.md | 0 docs/javascript/data-types/_category_.json | 7 + docs/javascript/data-types/index.md | 0 docs/javascript/functions/01-intro.md | 45 +++++ .../functions/02-func-declaration.md | 39 ++++ .../functions/03-func-expression.md | 81 ++++++++ docs/javascript/functions/04-arrow-func.md | 58 ++++++ docs/javascript/functions/_category_.json | 7 + docs/javascript/generators/_category_.json | 7 + docs/javascript/generators/index.md | 0 docs/javascript/modules/_category_.json | 7 + docs/javascript/modules/index.md | 0 docs/javascript/object-properties/.gitkeep | 1 - docs/javascript/objects/_category_.json | 7 + docs/javascript/objects/index.md | 0 docs/javascript/others/_category_.json | 7 + docs/javascript/others/index.md | 0 docs/javascript/promises/_category_.json | 7 + docs/javascript/promises/index.md | 0 docs/javascript/prototypes/_category_.json | 7 + docs/javascript/prototypes/index.md | 0 docs/javascript/try-catch/_category_.json | 7 + docs/javascript/try-catch/index.md | 0 docusaurus.config.ts | 4 +- 33 files changed, 710 insertions(+), 3 deletions(-) create mode 100644 docs/javascript/base/01-strict.md create mode 100644 docs/javascript/base/02-variables.md create mode 100644 docs/javascript/base/03-type-conversion.md create mode 100644 docs/javascript/base/04-operators.md create mode 100644 docs/javascript/base/05-compare-ops.md create mode 100644 docs/javascript/base/06-conditions-logic.md create mode 100644 docs/javascript/base/07-cycles.md create mode 100644 docs/javascript/base/_category_.json create mode 100644 docs/javascript/classes/_category_.json rename docs/javascript/{ => classes}/index.md (100%) create mode 100644 docs/javascript/data-types/_category_.json create mode 100644 docs/javascript/data-types/index.md create mode 100644 docs/javascript/functions/01-intro.md create mode 100644 docs/javascript/functions/02-func-declaration.md create mode 100644 docs/javascript/functions/03-func-expression.md create mode 100644 docs/javascript/functions/04-arrow-func.md create mode 100644 docs/javascript/functions/_category_.json create mode 100644 docs/javascript/generators/_category_.json create mode 100644 docs/javascript/generators/index.md create mode 100644 docs/javascript/modules/_category_.json create mode 100644 docs/javascript/modules/index.md delete mode 100644 docs/javascript/object-properties/.gitkeep create mode 100644 docs/javascript/objects/_category_.json create mode 100644 docs/javascript/objects/index.md create mode 100644 docs/javascript/others/_category_.json create mode 100644 docs/javascript/others/index.md create mode 100644 docs/javascript/promises/_category_.json create mode 100644 docs/javascript/promises/index.md create mode 100644 docs/javascript/prototypes/_category_.json create mode 100644 docs/javascript/prototypes/index.md create mode 100644 docs/javascript/try-catch/_category_.json create mode 100644 docs/javascript/try-catch/index.md diff --git a/docs/javascript/base/01-strict.md b/docs/javascript/base/01-strict.md new file mode 100644 index 0000000..5d74376 --- /dev/null +++ b/docs/javascript/base/01-strict.md @@ -0,0 +1,13 @@ +--- +sidebar_position: 1 +--- + +# Строгий режим — "use strict" + +Появился с 2009 года в редакции ECMAScript 5 (ES5). +Чтобы устаревший код работал, как и раньше, по умолчанию подобные изменения не применяются. Поэтому нам нужно явно их активировать с помощью специальной директивы: "use strict". + +Нет никакого способа отменить use strict +Use strict по умолчанию выключен в консоли браузера + +Современный JavaScript поддерживает «классы» и «модули» — продвинутые структуры языка (и мы, конечно, до них доберёмся), которые автоматически включают строгий режим. \ No newline at end of file diff --git a/docs/javascript/base/02-variables.md b/docs/javascript/base/02-variables.md new file mode 100644 index 0000000..bb3fc55 --- /dev/null +++ b/docs/javascript/base/02-variables.md @@ -0,0 +1,49 @@ +--- +sidebar_position: 2 +--- + +# Переменные + +**Переменная** – это «именованное хранилище» для данных. + +Можно объявить при помощи: + +- let +- const (константа, т.е. изменению не подлежит) +- var (устаревший способ, подробности позже) + +``` +let message; + +message = 'Hello'; // сохранить строку 'Hello' в переменной с именем message + +let user = 'John', age = 25, message = 'Hello'; + +let user = 'John', +age = 25, +message = 'Hello'; +``` + +Имя переменной может включать: +- Буквы и цифры, однако цифра не может быть первым символом. +- Символы $ и _ используются наряду с буквами. +- Иероглифы и символы нелатинского алфавита также допустимы, но обычно не используются. + +Переменные типизируются динамически. В них могут храниться любые значения. + +Всего существует 8 типов данных: + +- number для целых и вещественных чисел, +- bigint для работы с целыми числами произвольной длины, +- string для строк, +- boolean для логических значений истинности или ложности: true/false, +- null – тип с единственным значением null, т.е. «пустое значение» или «значение не существует», +- undefined – тип с единственным значением undefined, т.е. «значение не задано», +- object и symbol – сложные структуры данных и уникальные идентификаторы; их мы ещё не изучили. + +Оператор typeof возвращает тип значения переменной, с двумя исключениями: + +``` +typeof null == "object" // ошибка в языке +typeof function(){} == "function" // именно для функций +``` \ No newline at end of file diff --git a/docs/javascript/base/03-type-conversion.md b/docs/javascript/base/03-type-conversion.md new file mode 100644 index 0000000..5bce62b --- /dev/null +++ b/docs/javascript/base/03-type-conversion.md @@ -0,0 +1,49 @@ +--- +sidebar_position: 3 +--- + +# Преобразование типов + +## Строковое преобразование +**String(value)** +``` +alert(typeof value); // string +``` + +## Численное преобразование +**Number(str)** +``` +let num = Number(str); // становится числом 123 +``` +| Значение | Преобразуется в… | +|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| undefined | NaN | +| null | 0 | +| true / false | 1 / 0 | +| string | Пробельные символы (пробелы, знаки табуляции \t, знаки новой строки \n и т. п.) по краям обрезаются. Далее, если остаётся пустая строка, то получаем 0, иначе из непустой строки «считывается» число. При ошибке результат NaN. | + +``` +alert( Number(" 123 ") ); // 123 +alert( Number("123z") ); // NaN (ошибка чтения числа на месте символа "z") +alert( Number(true) ); // 1 +alert( Number(false) ); // 0 +``` +## Логическое преобразование +**Boolean(value)**\ +Происходит в логических операциях, но также может быть выполнено явно с помощью функции Boolean(value). + +Правило преобразования: +- Значения, которые интуитивно «пустые», вроде 0, пустой строки, null, undefined и NaN, становятся false. +- Все остальные значения становятся true. + +| Значение | Становится… | +|-----------------------------|-------------| +| 0, null, undefined, NaN, "" | false | +| любое другое значение | true | + +``` +alert( Boolean(1) ); // true +alert( Boolean(0) ); // false +alert( Boolean("Привет!") ); // true +alert( Boolean("") ); // false +``` \ No newline at end of file diff --git a/docs/javascript/base/04-operators.md b/docs/javascript/base/04-operators.md new file mode 100644 index 0000000..4229891 --- /dev/null +++ b/docs/javascript/base/04-operators.md @@ -0,0 +1,39 @@ +--- +sidebar_position: 4 +--- + +# Базовые операторы, математика + +Термины: «унарный», «бинарный», «операнд» +- Операнд – то, к чему применяется оператор. Например, в умножении 5 * 2 есть два операнда: левый операнд равен 5, а правый операнд равен 2. Иногда их называют «аргументами» вместо «операндов». (5 * 2) +- Унарным называется оператор, который применяется к одному операнду. Например, оператор унарный минус "-" меняет знак числа на противоположный: (-x) +- Бинарным называется оператор, который применяется к двум операндам. Тот же минус существует и в бинарной форме: (y - x) + +## Поддерживаются следующие математические операторы: +- Сложение +, +- Вычитание -, +- Умножение *, +- Деление /, +- Взятие остатка от деления %, +- Возведение в степень **. + +## Инкремент/декремент +- Инкремент counter++ увеличивает переменную на 1 +- Декремент counter-- уменьшает переменную на 1 + +## Побитовые операторы +- AND(и) ( & ) +- OR(или) ( | ) +- XOR(побитовое исключающее или) ( ^ ) +- NOT(не) ( ~ ) +- LEFT SHIFT(левый сдвиг) ( ≺≺ ) +- RIGHT SHIFT(правый сдвиг) ( ≻≻ ) +- ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) ( ≻≻≻ ) + +## Оператор «запятая» +Оператор «запятая» предоставляет нам возможность вычислять несколько выражений, разделяя их запятой ,. Каждое выражение выполняется, но возвращается результат только последнего. +``` +let a = (1 + 2, 3 + 4); \ +alert( a ); // 7 (результат вычисления 3 + 4) \ +``` +❗ ***Запятая имеет очень низкий приоритет*** \ No newline at end of file diff --git a/docs/javascript/base/05-compare-ops.md b/docs/javascript/base/05-compare-ops.md new file mode 100644 index 0000000..c2ef0af --- /dev/null +++ b/docs/javascript/base/05-compare-ops.md @@ -0,0 +1,43 @@ +--- +sidebar_position: 5 +--- + +# Операторы сравнения +***Результат сравнения имеет логический тип*** +- Больше/меньше: a \> b, a \< b. +- Больше/меньше или равно: a \>= b, a \<= b. +- Равно: a == b. Обратите внимание, для сравнения используется двойной знак равенства ==. Один знак равенства a = b означал бы присваивание. +- Не равно. В математике обозначается символом ≠, но в JavaScript записывается как a != b. + +## Сравнение строк +Чтобы определить, что одна строка больше другой, JavaScript использует «алфавитный» или «лексикографический» порядок.\ +Другими словами, строки сравниваются посимвольно. + +❗ ***Используется кодировка Unicode, а не настоящий алфавит*** + +Алгоритм сравнения двух строк довольно прост: +- Сначала сравниваются первые символы строк. +- Если первый символ первой строки больше (меньше), чем первый символ второй, то первая строка больше (меньше) второй. Сравнение завершено. +- Если первые символы равны, то таким же образом сравниваются уже вторые символы строк. +- Сравнение продолжается, пока не закончится одна из строк. +- Если обе строки заканчиваются одновременно, то они равны. Иначе, большей считается более длинная строка. + +## Сравнение разных типов +Использование обычного сравнения **==** может вызывать проблемы. +Это происходит из-за того, что операнды разных типов преобразуются оператором **==** к числу. В итоге, и пустая строка, и false становятся нулём. + +**Оператор строгого равенства === проверяет равенство без приведения типов.** + +## Сравнение с null и undefined + +Поведение **null** и **undefined** при сравнении с другими значениями — особое: + +При строгом равенстве **===** \ +Эти значения различны, так как различны их типы. + +При нестрогом равенстве **==** \ +Эти значения равны друг другу и не равны никаким другим значениям. Это специальное правило языка. + +При использовании математических операторов и других операторов сравнения \< \> \<= \>= +Значения null/undefined преобразуются к числам: **null** становится 0, а **undefined** – NaN. + diff --git a/docs/javascript/base/06-conditions-logic.md b/docs/javascript/base/06-conditions-logic.md new file mode 100644 index 0000000..8c3fb7b --- /dev/null +++ b/docs/javascript/base/06-conditions-logic.md @@ -0,0 +1,177 @@ +--- +sidebar_position: 6 +--- + +# Условия и логические операторы + +## Условное ветвление: if, '?' + +Инструкция if(...) вычисляет условие в скобках и, если результат true, то выполняет блок кода. + +***Несколько условий: «else if»*** + +## Конструкция "switch" +``` +let a = 2 + 2; + +switch (a) { + case 3: + alert( 'Маловато' ); + break; + case 4: + alert( 'В точку!' ); + break; + case 5: + alert( 'Перебор' ); + break; + default: + alert( "Нет таких значений" ); +} +``` +## Условный оператор „?“ (тернарный) +``` +let result = условие ? значение1 : значение2; +``` +## Логические операторы + +В JavaScript есть семь логических операторов: + +- || (ИЛИ) +- ||= (Оператор логического присваивания ИЛИ) +- && (И) +- &&= (Оператор логического присваивания И) +- ! (НЕ) +- ?? (Оператор нулевого слияния) +- ??= (Оператор нулевого присваивания) + +### || (ИЛИ) +``` +( true || true ); // true +( false || true ); // true +( true || false ); // true +( false || false ); // false +``` +### ИЛИ "||" находит первое истинное значение +``` +( 1 || 0 ); // 1 (1 - истинное значение) +( true || 'какая-то строка' ); // true +( null || 1 ); // 1 (первое истинное значение) +( null || 0 || 1 ); // 1 (первое истинное значение) +( undefined || null || 0 ); // 0 (поскольку все ложно, возвращается последнее значение) +``` + +### ||= (Логическое присваивание ИЛИ) +``` +a ||= b; +``` +Оператор **||=** принимает два операнда и выполняет следующие действия: + +- Вычисляет операнды слева направо. +- Конвертирует ***a*** в логическое значение. +- Если ***a*** ложно, присваивает ***a*** значение ***b***. + +### && (И) +``` +( true && true ); // true +( false && true ); // false +( true && false ); // false +( false && false ); // false +``` +#### И «&&» находит первое ложное значение +``` +result = value1 && value2 && value3; +``` +Оператор **&&** выполняет следующие действия: + +- Вычисляет операнды слева направо. +- Каждый операнд преобразует в логическое значение. Если результат **false**, останавливается и возвращает исходное + значение этого операнда. +- Если все операнды были истинными, возвращается последний. + +Другими словами, **И** возвращает первое ложное значение. Или последнее, если ничего не найдено. + +Вышеуказанные правила схожи с поведением **ИЛИ**. Разница в том, что **И** возвращает первое ложное значение, а **ИЛИ** +первое истинное. + +❗ ***Приоритет оператора && больше, чем у ||*** \ +Приоритет оператора **И &&** больше, чем **ИЛИ ||**, так что он выполняется раньше. + +Таким образом, код **a && b || c && d** по существу такой же, +как если бы выражения **&&** были в круглых скобках: **(a && b) || (c && d)** + +❗ ***Не заменяйте if на || или &&*** \ +Несмотря на то, что вариант с && кажется более коротким, if более нагляден и, как правило, более читабелен. + +### &&= (Логическое присваивание И) +``` +a &&= b; +``` +Принцип действия **&&=** практически такой же, как и у оператора логического присваивания **ИЛИ ||=**. \ +Единственное отличие заключается в том, что **&&=** присвоит **a** значение **b** только в том случае, если **a** +истинно. + +### ! (НЕ) + +``` +result = !value; +``` + +Оператор принимает один аргумент и выполняет следующие действия: + +1. Сначала приводит аргумент к логическому типу **true/false**. +2. Затем возвращает противоположное значение. + +❗ Приоритет **НЕ !** является наивысшим из всех логических операторов, поэтому он всегда выполняется первым, перед **&& +** или **||**. + +### Оператор нулевого слияния (??) + +Результат выражения **a ?? b** будет следующим: + +- если **a** определено, то **a**, +- если **a** не определено, то **b**. + +Иначе говоря, оператор **??** возвращает первый аргумент, если он не **null/undefined**, иначе второй. + +#### Сравнение с || + +Важное различие между ними заключается в том, что: + +- || возвращает первое истинное значение. +- ?? возвращает первое определённое значение. + +Приоритет оператора ?? такой же, как и у ||. Они оба равны 3 в таблице на MDN. + +#### Использование ?? вместе с && или || + +По соображениям безопасности JavaScript запрещает использование оператора **??** вместе с **&&** и **||**, если +приоритет явно не указан при помощи круглых скобок. +``` +let x = 1 && 2 ?? 3; // Синтаксическая ошибка +``` + +Используйте скобки, чтобы обойти это ограничение: +``` +let x = (1 && 2) ?? 3; // Работает без ошибок +``` +### Оператор нулевого присваивания (??=) + +Предположим, нам необходимо проверить, равна ли переменная null или undefined, и если это так — присвоить этой +переменной какое-либо другое значение. +``` +let userAge = null; + +if (userAge === null || userAge === undefined) { + userAge = 18; +} +``` + +Выглядит громоздко, правда? Существует оператор, более подходящий для подобных задач. +```x ??= y``` + +Оператор **??=** присвоит **x** значение **y** только в том случае, если **x** не определено (null/undefined). +``` +let userAge = null; +userAge ??= 18; +alert(userAge) // 18 +``` \ No newline at end of file diff --git a/docs/javascript/base/07-cycles.md b/docs/javascript/base/07-cycles.md new file mode 100644 index 0000000..04342c4 --- /dev/null +++ b/docs/javascript/base/07-cycles.md @@ -0,0 +1,38 @@ +--- +sidebar_position: 7 +--- + +# Циклы while и for + +⚡ ***Циклы for…of и for…in*** +- **for…in** для перебора свойств объекта. +- **for…of** для перебора массивов и перебираемых объектов. + +## Цикл «while» +``` +while (condition) { + // код + // также называемый "телом цикла" +} +``` +## Цикл «do…while» +``` +do { + // тело цикла +} while (condition); +``` +## Цикл «for» +``` +for (let i = 0; i < 3; i++) { + alert(i); +} +// выведет 0, затем 1, затем 2 +``` + +## Прерывание цикла: «break» +Вообще, сочетание «бесконечный цикл + break» – отличная штука для тех ситуаций, когда условие, по которому нужно прерваться, находится не в начале или конце цикла, а посередине или даже в нескольких местах его тела. + +## Переход к следующей итерации: continue +❗ Нельзя использовать break/continue справа от оператора „?“ \ +Обратите внимание, что эти синтаксические конструкции не являются выражениями и не могут быть использованы с тернарным оператором ?. В частности, использование таких директив, как **break/continue**, вызовет ошибку. +> (i > 5) ? alert(i) : continue; // continue здесь приведёт к ошибке \ No newline at end of file diff --git a/docs/javascript/base/_category_.json b/docs/javascript/base/_category_.json new file mode 100644 index 0000000..9262443 --- /dev/null +++ b/docs/javascript/base/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Основа", + "position": 1, + "link": { + "type": "generated-index" + } +} diff --git a/docs/javascript/classes/_category_.json b/docs/javascript/classes/_category_.json new file mode 100644 index 0000000..93426fa --- /dev/null +++ b/docs/javascript/classes/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Классы", + "position": 6, + "link": { + "type": "generated-index" + } +} diff --git a/docs/javascript/index.md b/docs/javascript/classes/index.md similarity index 100% rename from docs/javascript/index.md rename to docs/javascript/classes/index.md diff --git a/docs/javascript/data-types/_category_.json b/docs/javascript/data-types/_category_.json new file mode 100644 index 0000000..a0cfcee --- /dev/null +++ b/docs/javascript/data-types/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Типы данных", + "position": 3, + "link": { + "type": "generated-index" + } +} diff --git a/docs/javascript/data-types/index.md b/docs/javascript/data-types/index.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/javascript/functions/01-intro.md b/docs/javascript/functions/01-intro.md new file mode 100644 index 0000000..4867473 --- /dev/null +++ b/docs/javascript/functions/01-intro.md @@ -0,0 +1,45 @@ +--- +sidebar_position: 1 +--- + +# Введение + +#### Function Declaration: функция в основном потоке кода +``` +function sum(a, b) { + let result = a + b; + + return result; +} +``` + +#### Function Expression: функция как часть выражения +``` +let sum = function(a, b) { + let result = a + b; + + return result; +}; +``` + +#### Стрелочные функции: +``` +// выражение в правой части +let sum = (a, b) => a + b; + +// многострочный код в фигурных скобках { ... }, здесь нужен return: +let sum = (a, b) => { + // ... + return a + b; +} + +// без аргументов +let sayHi = () => alert("Привет"); + +// с одним аргументом +let double = n => n * 2; +``` + +- У функций могут быть локальные переменные: т.е. объявленные в теле функции. Такие переменные видимы только внутри функции. +- У параметров могут быть значения по умолчанию: function sum(a = 1, b = 2) \{...\}. +- Функции всегда что-нибудь возвращают. Если нет оператора return, результатом будет undefined. \ No newline at end of file diff --git a/docs/javascript/functions/02-func-declaration.md b/docs/javascript/functions/02-func-declaration.md new file mode 100644 index 0000000..2966c02 --- /dev/null +++ b/docs/javascript/functions/02-func-declaration.md @@ -0,0 +1,39 @@ +--- +sidebar_position: 2 +--- + +# Function Declaration + +Function Declaration (Объявление Функции): +``` +function имя(параметры, через, запятую) { + ...тело, код функции... +} +``` +Переменные, объявленные внутри функции, видны только внутри этой функции. + +Функция обладает полным доступом к внешним переменным и может изменять их значение. + +#### 💥 Глобальные переменные +> Переменные, объявленные снаружи всех функций, называются глобальными. +> +> Глобальные переменные видимы для любой функции (если только их не перекрывают одноимённые локальные переменные). +> +> Желательно сводить использование глобальных переменных к минимуму. В современном коде обычно мало или совсем нет глобальных переменных. Хотя они иногда полезны для хранения важнейших «общепроектовых» данных. + +#### Параметры +Мы можем передать внутрь функции любую информацию, используя параметры. +Значение, передаваемое в качестве параметра функции, также называется аргументом. + +Другими словами: + +- **Параметр** – это переменная, указанная в круглых скобках в объявлении функции. +- **Аргумент** – это значение, которое передаётся функции при её вызове. + +Если при вызове функции аргумент не был указан, то его значением становится **undefined**. + +Функция может вернуть результат, который будет передан в вызвавший её код c помощью **return**\ +Возможно использовать **return** и без значения. Это приведёт к немедленному выходу из функции. + +❗ ***Результат функции с пустым return или без него – undefined*** \ +❌ Никогда не добавляйте перевод строки между return и его значением \ No newline at end of file diff --git a/docs/javascript/functions/03-func-expression.md b/docs/javascript/functions/03-func-expression.md new file mode 100644 index 0000000..068d432 --- /dev/null +++ b/docs/javascript/functions/03-func-expression.md @@ -0,0 +1,81 @@ +--- +sidebar_position: 3 +--- + +# Function Expression + +**Function Declaration (Объявление Функции):** + +``` +function sayHi() { + alert( "Привет" ); +} +``` + +**Function Expression (Функциональное Выражение).** + +``` +let sayHi = function() { + alert( "Привет" ); +}; +``` + +## Функция – это значение + +Давайте повторим: независимо от того, как создаётся функция – она является значением. В обоих приведённых выше примерах +функция хранится в переменной sayHi. + +``` +function sayHi() { + alert( "Привет" ); +} + +alert( sayHi ); // выведет код функции +``` + +## Функции-«колбэки» + +Ключевая идея в том, что мы передаём функцию и ожидаем, что она вызовется обратно (от англ. «call back» – обратный +вызов) когда-нибудь позже, если это будет необходимо. + +## Function Expression в сравнении с Function Declaration + +- Function Declaration: функция объявляется отдельной конструкцией «function…» в основном потоке кода. +- Function Expression: функция, созданная внутри другого выражения или синтаксической конструкции. В данном случае + функция создаётся в правой части «выражения присваивания» **=** + +#### 💥 Более тонкое отличие состоит в том, когда создаётся функция движком JavaScript. + +***Function Declaration может быть вызвана раньше, чем она объявлена.*** + +``` +sayHi("Вася"); // Привет, Вася + +function sayHi(name) { + alert( `Привет, ${name}` ); +} +``` + +***Function Expression создаётся, когда выполнение доходит до него, и затем уже может использоваться.*** +``` +sayHi("Вася"); // ошибка! + +let sayHi = function(name) { // (*) магии больше нет + alert( `Привет, ${name}` ); +}; +``` + +Ещё одна важная особенность Function Declaration заключается в их блочной области видимости. + +В строгом режиме, когда Function Declaration находится в блоке \{...\}, функция доступна везде внутри блока. Но не +снаружи него. + +- Функции – это значения. Они могут быть присвоены, скопированы или объявлены в любом месте кода. +- Если функция объявлена как отдельная инструкция в основном потоке кода, то это “Function Declaration”. +- Если функция была создана как часть выражения, то это “Function Expression”. +- Function Declaration обрабатываются перед выполнением блока кода. Они видны во всём блоке. +- Функции, объявленные при помощи Function Expression, создаются только когда поток выполнения достигает их. + +В большинстве случаев, когда нам нужно объявить функцию, Function Declaration предпочтительнее, т.к функция будет видна +до своего объявления в коде. Это даёт нам больше гибкости в организации кода, и, как правило, делает его более +читабельным. \ No newline at end of file diff --git a/docs/javascript/functions/04-arrow-func.md b/docs/javascript/functions/04-arrow-func.md new file mode 100644 index 0000000..0a55e17 --- /dev/null +++ b/docs/javascript/functions/04-arrow-func.md @@ -0,0 +1,58 @@ +--- +sidebar_position: 4 +--- + +# Стрелочные функции + +Существует ещё один очень простой и лаконичный синтаксис для создания функций, который часто лучше, чем Function Expression. + +``` let sum = (a, b) => a + b;``` + +## У стрелочных функций нет «this» +Если происходит обращение к this, его значение берётся снаружи. + +❗ ***Стрелочные функции нельзя использовать с new*** +> Отсутствие this естественным образом ведёт к другому ограничению: стрелочные функции не могут быть использованы как конструкторы. Они не могут быть вызваны с new. + +Стрелочные функции VS bind +Существует тонкая разница между стрелочной функцией => и обычной функцией, вызванной с .bind(this): + +- .bind(this) создаёт «связанную версию» функции. +- Стрелка => ничего не привязывает. У функции просто нет this. При получении значения this – оно, как обычная переменная, берётся из внешнего лексического окружения. + +## Стрелочные функции не имеют «arguments» + +Это отлично подходит для декораторов, когда нам нужно пробросить вызов с текущими this и arguments. +``` +function defer(f, ms) { + return function() { + setTimeout(() => f.apply(this, arguments), ms) + }; +} + +function sayHi(who) { + alert('Hello, ' + who); +} + +let sayHiDeferred = defer(sayHi, 2000); +sayHiDeferred("John"); // выводит "Hello, John" через 2 секунды` +``` + +То же самое без стрелочной функции выглядело бы так: + +``` +function defer(f, ms) { + return function(...args) { + let ctx = this; + setTimeout(function() { + return f.apply(ctx, args); + }, ms); + }; +} +``` + +#### Стрелочные функции: +- Не имеют this. +- Не имеют arguments. +- Не могут быть вызваны с new. +- У них также нет super. \ No newline at end of file diff --git a/docs/javascript/functions/_category_.json b/docs/javascript/functions/_category_.json new file mode 100644 index 0000000..49f6555 --- /dev/null +++ b/docs/javascript/functions/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Работа с функциями", + "position": 4, + "link": { + "type": "generated-index" + } +} diff --git a/docs/javascript/generators/_category_.json b/docs/javascript/generators/_category_.json new file mode 100644 index 0000000..431e599 --- /dev/null +++ b/docs/javascript/generators/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Генераторы, продвинутая итерация", + "position": 9, + "link": { + "type": "generated-index" + } +} diff --git a/docs/javascript/generators/index.md b/docs/javascript/generators/index.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/javascript/modules/_category_.json b/docs/javascript/modules/_category_.json new file mode 100644 index 0000000..c415dca --- /dev/null +++ b/docs/javascript/modules/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Модули", + "position": 10, + "link": { + "type": "generated-index" + } +} diff --git a/docs/javascript/modules/index.md b/docs/javascript/modules/index.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/javascript/object-properties/.gitkeep b/docs/javascript/object-properties/.gitkeep deleted file mode 100644 index 7b4d68d..0000000 --- a/docs/javascript/object-properties/.gitkeep +++ /dev/null @@ -1 +0,0 @@ -empty \ No newline at end of file diff --git a/docs/javascript/objects/_category_.json b/docs/javascript/objects/_category_.json new file mode 100644 index 0000000..4758c2c --- /dev/null +++ b/docs/javascript/objects/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Объекты", + "position": 2, + "link": { + "type": "generated-index" + } +} diff --git a/docs/javascript/objects/index.md b/docs/javascript/objects/index.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/javascript/others/_category_.json b/docs/javascript/others/_category_.json new file mode 100644 index 0000000..7c52a2b --- /dev/null +++ b/docs/javascript/others/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Разное", + "position": 11, + "link": { + "type": "generated-index" + } +} diff --git a/docs/javascript/others/index.md b/docs/javascript/others/index.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/javascript/promises/_category_.json b/docs/javascript/promises/_category_.json new file mode 100644 index 0000000..b8286c9 --- /dev/null +++ b/docs/javascript/promises/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Промисы, async-await", + "position": 8, + "link": { + "type": "generated-index" + } +} diff --git a/docs/javascript/promises/index.md b/docs/javascript/promises/index.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/javascript/prototypes/_category_.json b/docs/javascript/prototypes/_category_.json new file mode 100644 index 0000000..20ec4f9 --- /dev/null +++ b/docs/javascript/prototypes/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Прототипы, наследование", + "position": 5, + "link": { + "type": "generated-index" + } +} diff --git a/docs/javascript/prototypes/index.md b/docs/javascript/prototypes/index.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/javascript/try-catch/_category_.json b/docs/javascript/try-catch/_category_.json new file mode 100644 index 0000000..a3a1ff6 --- /dev/null +++ b/docs/javascript/try-catch/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Обработка ошибок", + "position": 7, + "link": { + "type": "generated-index" + } +} diff --git a/docs/javascript/try-catch/index.md b/docs/javascript/try-catch/index.md new file mode 100644 index 0000000..e69de29 diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 1ca7093..4663c2d 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -78,7 +78,7 @@ const config: Config = { type: 'docSidebar', sidebarId: 'tutorialSidebar', position: 'left', - label: 'Tutorial', + label: 'Questions', }, // {to: '/blog', label: 'Blog', position: 'left'}, { @@ -95,7 +95,7 @@ const config: Config = { title: 'Docs', items: [ { - label: 'Tutorial', + label: 'Questions', to: '/docs/intro', }, {