update(JS): web/javascript/reference/statements (#554)

* update(JS): web/javascript/reference/statements

* Apply suggestions from code review

Co-authored-by: Mykola Myslovskyi <[email protected]>

Co-authored-by: Mykola Myslovskyi <[email protected]>

files/uk/web/javascript/reference/statements/index.md

@@ -8,6 +8,7 @@ tags:
   - statements
 browser-compat: javascript.statements
 ---
+
 {{jsSidebar("Statements")}}
 
 JavaScript-застосунки складаються з інструкцій із певним синтаксисом. Єдина інструкція може простягатися на багато рядків. Декілька інструкцій можуть входити в єдиний рядок, за умови, що кожна інструкція відділена крапкою з комою. Інструкція — це не якесь ключове слово, а група таких слів.
@@ -18,24 +19,22 @@ JavaScript-застосунки складаються з інструкцій 
 
 ### Керування плином виконання
 
-- {{jsxref("Statements/block", "Блок","",1)}}
-  - : Блокова інструкція застосовується для об'єднання нуля чи більше інструкцій. Блок виділяється парою фігурних дужок.
+- {{jsxref("Statements/return", "return")}}
+  - : Вказує значення, яке буде повернено функцією.
 - {{jsxref("Statements/break", "break")}}
   - : Перериває поточну інструкцію циклу, перемикання чи мітки, і передає керування програмою до інструкції, що стоїть після перерваної.
 - {{jsxref("Statements/continue", "continue")}}
   - : Перериває виконання інструкцій поточної ітерації поточного циклу, або циклу з міткою, і продовжує виконання циклу з наступної ітерації.
-- {{jsxref("Statements/Empty", "Пустота","",1)}}
-  - : Порожня інструкція використовується, аби не передавати жодної інструкції там, де синтаксис JavaScript очікує інструкцію.
+- {{jsxref("Statements/throw", "throw")}}
+  - : Викидає виняток, визначений користувачем.
 - {{jsxref("Statements/if...else", "if...else")}}
   - : Виконує інструкцію, якщо наведена умова є істинною. Якщо умова є хибною — виконується інша інструкція.
 - {{jsxref("Statements/switch", "switch")}}
   - : Обчислює вираз, зіставляючи значення виразу з умовою випадку, і виконує інструкції, пов'язані зі цим випадком.
-- {{jsxref("Statements/throw", "throw")}}
-  - : Викидає виняток, визначений користувачем.
 - {{jsxref("Statements/try...catch", "try...catch")}}
   - : Позначає блок інструкцій, які програма спробує виконати, і задає реакцію на випадок викидання винятку.
 
-### Оголошення
+### Оголошення змінних
 
 - {{jsxref("Statements/var", "var")}}
   - : Оголошує змінну, опційно ініціалізуючи її значенням.
@@ -54,8 +53,6 @@ JavaScript-застосунки складаються з інструкцій 
   - : Оголошує асинхронну функцію зі вказаними параметрами.
 - {{jsxref("Statements/async_function*", "async function*")}}
   - : Асинхронні генераторні функції уможливлюють простіше написання асинхронних [ітераторів](/uk/docs/Web/JavaScript/Reference/Iteration_protocols).
-- {{jsxref("Statements/return", "return")}}
-  - : Вказує значення, яке буде повернено функцією.
 - {{jsxref("Statements/class", "class")}}
   - : Оголошує клас.
 
@@ -76,6 +73,10 @@ JavaScript-застосунки складаються з інструкцій 
 
 ### Інші
 
+- {{jsxref("Statements/Empty", "Пустота","",1)}}
+  - : Порожня інструкція використовується, аби не передавати жодної інструкції там, де синтаксис JavaScript очікує інструкцію.
+- {{jsxref("Statements/block", "Блок","",1)}}
+  - : Блокова інструкція застосовується для об'єднання нуля чи більше інструкцій. Блок виділяється парою фігурних дужок.
 - {{jsxref("Statements/debugger", "debugger")}}
   - : Викликає будь-яку наявну функціональність зневадження. Якщо немає жодної доступної функціональності зневадження — ця інструкція не робить нічого.
 - {{jsxref("Statements/export", "export")}}
@@ -87,6 +88,63 @@ JavaScript-застосунки складаються з інструкцій 
 - {{jsxref("Statements/with", "with")}}
   - : Розширює ланцюжок областей видимості для інструкції.
 
+## Відмінності між інструкціями та оголошеннями
+
+В цьому розділі змішані два різновиди конструкцій: [_інструкції_ (англ.)](https://tc39.es/ecma262/#prod-Statement) й [_оголошення_ (англ.)](https://tc39.es/ecma262/#prod-Declaration). Вони є двома непересічними наборами граматик. Ось оголошення:
+
+- {{jsxref("Statements/let", "let")}}
+- {{jsxref("Statements/const", "const")}}
+- {{jsxref("Statements/function", "function")}}
+- {{jsxref("Statements/function*", "function*")}}
+- {{jsxref("Statements/async_function", "async function")}}
+- {{jsxref("Statements/async_function*", "async function*")}}
+- {{jsxref("Statements/class", "class")}}
+- {{jsxref("Statements/export", "export")}} (Примітка: може з'являтися лише на зовнішньому рівні [модуля](/uk/docs/Web/JavaScript/Guide/Modules))
+- {{jsxref("Statements/import", "import")}} (Примітка: може з'являтися лише на зовнішньому рівні [модуля](/uk/docs/Web/JavaScript/Guide/Modules))
+
+Все решта в [списку вище](#instruktsii-ta-oholoshennia-za-katehoriiamy) – інструкції.
+
+Терміни "інструкція" й "оголошення" в формальному синтаксисі JavaScript мають чітко визначене значення, котре впливає на те, де вони можуть зустрічатися в коді. Наприклад, в більшості структур контролю виконання їх тіло приймає лише інструкції, як то дві гілки [`if...else`](/uk/docs/Web/JavaScript/Reference/Statements/if...else):
+
+```js
+<!-- markdownlint-disable-next-line -->
+if (condition) statement1; // інструкція
+else statement2; // інструкція
+```
+
+Якщо застосувати оголошення замість інструкції, це призведе до {{jsxref("SyntaxError")}}. Наприклад, оголошення [`let`](/uk/docs/Web/JavaScript/Reference/Statements/let) не є інструкцією, тож його не можна саме по собі використати як тіло інструкції `if`.
+
+```js example-bad
+if (condition)
+  let i = 0; // SyntaxError: Lexical declaration cannot appear in a single-statement context
+```
+
+З іншого боку, [`var`](/uk/docs/Web/JavaScript/Reference/Statements/var) є інструкцією, тож його можна використовувати саме по собі як тіло `if`.
+
+```js example-good
+if (condition) var i = 0;
+```
+
+Можна зустріти оголошення, що "прив'язують ідентифікатори до значень", й інструкції, що "виконують дії". Факт того, що `var` є інструкцією, а не оголошенням, є особливим випадком, тому що воно не відповідає звичним правилам лексичної області видимості й може породжувати побічні ефекти – у вигляді створення глобальних змінних, змін до наявних змінних, оголошених за допомогою `var`, і визначення змінних, що видимі поза своїм блоком (через те, що визначені `var` змінні не обмежені в своїй області видимості своїм блоком).
+
+Інакший приклад: [мітки](/uk/docs/Web/JavaScript/Reference/Statements/label) можуть бути приєднані лише до інструкцій.
+
+```js example-bad
+label: const a = 1; // SyntaxError: Lexical declaration cannot appear in a single-statement context
+```
+
+> **Примітка:** є успадкована граматика, котра дозволяє [оголошенням функцій мати мітки](/uk/docs/Web/JavaScript/Reference/Statements/label#poznacheni-oholoshennia-funktsii), але вона була стандартизована лише для відповідності реаліям Вебу.
+> Щоб це обійти, можна загорнути оголошення в фігурні дужки, тим самим зробивши його частиною [інструкції блока](/uk/docs/Web/JavaScript/Reference/Statements/block).
+
+```js example-good
+label: {
+  const a = 1;
+}
+if (condition) {
+  let i = 0;
+}
+```
+
 ## Сумісність із браузерами
 
 {{Compat}}