24 лютого 2024 р.

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

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

Інструкції

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

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

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

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

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

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

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

Крапка з комою

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

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

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

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

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

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

alert(3 +
1
+ 2);

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

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

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

Приклад такої помилки

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

alert("Привіт");

[1, 2].forEach(alert);

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

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

alert("Привіт")

[1, 2].forEach(alert);

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

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

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

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

alert("Привіт")[1, 2].forEach(alert);

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

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

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

Коментарі

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

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

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

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

Ось так:

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

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

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

Ось так:

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

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

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

/* Закоментований код
alert('Привіт');
*/
alert('Світ');
Використовуйте комбінації клавіш!

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

Вкладені коментарі не підтримуються!

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

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

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

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

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

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

Навчальна карта