article.md

Структура коду

Спочатку розглянемо "будівельні блоки" коду.

Інструкції

Інструкції – це синтаксичні конструкції та команди, які виконують дії.

Ми вже бачили інструкцію alert('Привіт, світ!'), яка показує повідомлення "Привіт, світ!".

Можна писати стільки інструкцій, скільки завгодно. Інструкції можна розділяти крапкою з комою.

Наприклад, тут ми розділити "Привіт, світ" на два виклики alert:

alert('Привіт'); alert('Світ');

Зазвичай кожну інструкцію пишуть з нового рядка, щоби код було легше читати:

alert('Привіт');
alert('Світ');

Крапка з комою [#semicolon]

Здебільшого крапку з комою можна пропустити, якщо є перенесення на новий рядок.

Такий код буде працювати:

alert('Привіт')
alert('Світ')

У цьому разі JavaScript інтерпретує перенесення рядка як "неявну" крапку з комою. Це називається автоматичне вставлення крапки з комою.

Переважно новий рядок означає крапку з комою. Але "переважно" не означає "завжди"!

У деяких випадках новий рядок не означає крапку з комою. Наприклад:

alert(3 +
1
+ 2);

Код виведе 6, тому що JavaScript не вставить тут крапку з комою. Інтуїтивно зрозуміло, що, якщо рядок закінчується плюсом "+", то це "незакінчений вираз", тому крапка з комою не потрібна. І в цьому випадку все працює як задумано.

Але є ситуації, коли JavaScript "забуває" вставити крапку з комою там, де це дійсно потрібно.

Помилки, які виникають у таких ситуаціях, досить важко виявити й виправити.

Якщо хочете побачити конкретний приклад такої помилки, зверніть увагу на цей код:

```js run
alert("Привіт");

[1, 2].forEach(alert);
```

Поки що не задумуйтеся, що означають квадратні дужки `[]` і `forEach`. Ми вивчимо їх пізніше. Зараз просто запам'ятайте результат виконання коду: спочатку виведеться `Привіт`, далі `1`, а потім `2`.

А тепер видалимо крапку з комою після першого `alert`:

```js run no-beautify
alert("Привіт")
 
[1, 2].forEach(alert);
```

Різниця з кодом вище лише в одному символі: крапка з комою, яку ми видалити в кінці першого рядка.

Якщо ми запустимо цей код, виведеться лише `Привіт` (а потім виникне помилка, яку можна побачити в консолі). Числа більше не виводяться.

Це тому що JavaScript не вставляє крапку з комою перед квадратними дужками `[...]`. Оскільки крапка з комою автоматично не вставиться, код у цьому прикладі виконається як одна інструкція.

Ось як рушій побачить її:

```js run no-beautify
alert("Привіт")[1, 2].forEach(alert);
```

Виглядає дивно, чи не так? У цьому випадку таке об'єднання неправильне. Щоби код правильно працював, нам потрібно поставити крапку з комою після `alert`.

Це може статися в інших випадках.

Ми рекомендуємо ставити крапку з комою між інструкціями, навіть якщо вони розділені новими рядками. Це правило широко використовується в спільноті розробників. Варто повторити ще раз -- здебільшого можна пропускати крапки з комою. Але безпечніше -- особливо для новачка -- використовувати їх.

Коментарі [#code-comments]

З часом програми стають все складнішими та складнішими. Виникає потреба додавати коментарі, які будуть описувати що робить код і чому.

Коментарі можна писати в будь-якому місці скрипту. Вони не впливають на його виконання, тому що рушій просто ігнорує коментарі.

Однорядкові коментарі починаються з подвійної косої риски //.

Частина рядка після // вважається коментарем. Такий коментар може займати весь рядок, або міститися після інструкції.

Ось так:

// Цей коментар займає весь рядок
alert('Привіт');

alert('Світ'); // Цей коментар міститься після інструкції

Багаторядкові коментарі починаються з косої риски з зірочкою /* і закінчується зірочкою з косою рискою */.

Ось так:

/* Приклад із двома повідомленнями.
Це багаторядковий коментар.
*/
alert('Привіт');
alert('Світ');

Вміст коментаря ігнорується, тому, якщо ми напишемо всередині /* ... */ код, він не виконається.

Деколи виникає необхідність тимчасово вимкнути частину коду:

/* Закоментований код
alert('Привіт');
*/
alert('Світ');

У більшості редакторів рядок коду можна закоментувати, натиснувши комбінацію клавіш `key:Ctrl+/`, а щоби закоментувати декілька рядків – виділіть потрібні рядки та натисніть комбінацію клавіш `key:Ctrl+Shift+/`. У macOS потрібно натискати клавішу `key:Cmd` замість `key:Ctrl` і клавішу `key:Option` замість `key:Shift`.

Не може бути `/*...*/` всередині `/*...*/`.

Такий код "помре" з помилкою:

```js run no-beautify
/*
  /* вкладений коментар ?!? */
*/
alert( 'Світ' );
```

Будь ласка, не вагайтесь коментувати ваш код.

Коментарі збільшують розмір коду, але це не проблема. Є багато інструментів, які мініфікують код перед публікацією на робочий сервер. Вони видалять коментарі, тому їх не буде в робочих скриптах. Отже, коментарі жодним чином не впливають на робочий код.

Пізніше в посібнику буде розділ info:code-quality, який пояснить, як краще писати коментарі.