Крапка з комою в JavaScript: Чи дійсно вона вам потрібна?
У JavaScript крапки з комою є необов’язковими.
// Both statements work the same way
console.log("Hello")
console.log("Hello");
Однак є ситуації, в яких пропуск крапки з комою може призвести до небажаних наслідків. Тому немає однозначної відповіді на питання, чи слід використовувати крапку з комою, чи ні.
Використання крапок з комою завжди викликає суперечки у спільноті JavaScript. Існують вагомі аргументи на користь використання крапки з комою. Але також є вагомі причини, чому їх не слід застосовувати.
Це вичерпний посібник з використання крапок з комою в JavaScript.
Спочатку ми розглянемо правила використання крапок з комою у коді JavaScript. Потім ви дізнаєтеся, як працює автоматична вставка крапки з комою за кадром. І останнє, але не менш важливе: ви побачите список плюсів та мінусів використання крапок із комою.
Наприкінці цього посібника ви зможете вирішити, чи хочете ви використовувати крапки з комою чи ні.
Посібник з використання крапок з комою в JavaScript
Перш ніж обговорювати плюси та мінуси використання крапок із комою, необхідно зрозуміти, як вони взагалі використовуються.
Необхідне використання: Розділити два оператори в одному рядку
Якщо у вас є два оператори JavaScript в одному рядку, ви повинні поділити їх крапкою з комою. Можливо, найпоширенішим прикладом цього є цикл for.
Наприклад:
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
На виході:
1 2 3 4 5
Цикл for не буде працювати без крапки з комою, якщо його умова задається в одному рядку.
Необов’язкове використання: Крапки з комою як роздільники операторів
Крім поділу операторів для одного рядка, JavaScript немає інших обов’язкових випадків використання крапки з комою. Однак, за бажанням, ви можете використовувати крапки з комою для завершення оператора, навіть якщо були розриви рядків.
Ось кілька поширених прикладів операторів, які можна завершити крапкою з комою:
let i; // variable declaration
i = 5; // value assignment
let x = 9; // declaration and assignment
var fun = function() {...}; // function definition
alert("hi"); // function call
Пам’ятайте, що всі вищезгадані крапки з комою необов’язкові. Код працюватиме і без них.
Уникайте крапок із комою
Є ситуації, у яких слід уникати використання крапок із комою.
Уникайте крапок з комою після '}'. Не ставте крапку з комою після закриття фігурної дужки }.
Єдиним винятком є оператор присвоєння, наприклад, такий:
var data = {name: "Alice", age: 25};
У цьому випадку можна використовувати крапку з комою.
Ось кілька прикладів того, як не використовувати крапку з комою після фігурної дужки, що закриває:
if (...) {...} else {...}
for (...) {...}
while (...) {...}
function (arg) { /* actions */ }
Уникайте крапок з комою після ) в операторах if, for, while або switch.
У попередньому розділі ви дізналися, що не слід використовувати крапку з комою після закриття фігурної дужки. Однак якщо ви випадково це зробите, це буде просто проігноровано.
Жодної шкоди від цього не станеться. Але якщо ви поставите крапку з комою там, де її не повинно бути, то виникнуть проблеми.
Не додавайте крапку з комою після закриває дужки ) в:
- операторів
If - циклах
For - циклах
While - операторах
Switch
Давайте розглянемо приклад того, чому важливо пам’ятати.
Якщо ви напишете оператор if наступним чином:
if (0 > 1); { console.log("Hello") }
Це еквівалентно наступному:
if (0 < 1);
console.log("Hello")
У цьому випадку він виводить повідомлення на консоль, хоча явно не повинен цього робити. Це тому, що крапка з комою повністю завершує оператор if. Потім блок коду, що йде за оператором if, виконується як окремий. Тому будьте обережні та не зловживайте крапкою з комою!
Винятки при використанні крапки з комою
Раніше у цій статті ви бачили приклад циклу for з крапкою з комою. Це винятковий випадок використання крапки з комою.
Погляньте на цей простий цикл:
for (let i = 0; i < 10 ; i++) { } // Works
Як ви можете бачити, крапка з комою не ставиться відразу після i++ .
Насправді після третього оператора в циклі for не можна ставити крапку з комою.
Якщо ви так зробите, то виникне синтаксична помилка:
for (let i = 0; i < 10 ; i++;) { } // SyntaxError
Це все, що вам потрібно знати, коли йдеться про правила використання крапок з комою в JavaScript.
Тепер давайте коротко обговоримо, чому використання крапок з комою в JavaScript необов’язкове.
Автоматична вставка крапки з комою у JavaScript
JavaScript не вимагає крапок з комою (за винятком одного виключення, яке ви бачили раніше).
Це відбувається тому, що JavaScript досить розумний і може автоматично додавати крапки з комою там, де потрібно.
Все відбувається “за лаштунками”, і ви нічого не помітите.
Такий процес називається автоматичною вставкою крапок з комою ( Automatic Semicolon Insertion . ASI).
Правила ASI у JavaScript
Парсер JavaScript додає крапку з комою в будь-якому з наступних випадків:
- Наступний рядок коду починається з коду, який явно перериває поточний рядок коду.
- Коли наступний рядок коду починається з
}. - Досягши кінця файлу.
- Якщо будь-який з наступних операторів зустрічається у вигляді окремого рядка
return(повернення)break(перервати)throw(викинути [помилку])continue(продовжити)
Важливо розуміти, що ASI не завжди є коректним на 100%.
Крапка з комою використовується для поділу операторів на JavaScript, а не для їх завершення.
Це те, що ASI намагається зробити вас.
Якщо говорити простіше, то правила ASI можна сформулювати так:
Не кожне перенесення рядка вимагає крапки з комою. Однак розрив рядка, який не піддається парсингу без крапки з комою, потребує її використання.
Наприклад:
let x x = 10 console.log(x)
Цей фрагмент коду інтерпретується ASI як:
let x; x = 10; console.log(x);
В даному випадку ASI проробив відмінну роботу, зумівши розібратися в тому, як триває код між рядками 2-4.
Однак, іноді він може не знати, чого ми намагаємося досягти.
Наприклад, цей рядок коду призводить до помилки
const s = 'World' const ab = "Hello" + s [3].forEach(n => console.log(n))
В результаті виникає така помилка:
Uncaught TypeError: s[3].forEach is not a function
at :4:5
За описом помилки ви можете здогадатися, чому це відбувається.
Причина, через яку цей валідний фрагмент коду не працює, полягає в тому, що ASI не вставляє крапку з комою після другого рядка.
Натомість, він інтерпретує рядки 2 і 4 як продовження одного і того ж оператора наступним чином (відповідно до правила ASI номер 1):
const s = 'World'; const ab = "Hello" + s[3].forEach(n => console.log(n));
ASI думає, що s – це масив, і ви намагаєтеся отримати доступ до його 4 елемента за допомогою s [3] .
Але це не те, що ви плануєте здійснити.
Щоб змусити цей рядок працювати так, як очікується, необхідно вручну додати крапку з комою наприкінці другого рядка:
const s = 'World' const ab = "Hello" + s; [3].forEach(n => console.log(n)) // Prints '3'
Тепер код працює так, як передбачалося.
Інший приклад, коли ASI може викликати проблеми, – це оператори return.
Наприклад:
function getData() {
return
{
name: 'Bob'
}
}
console.log(getData())
На виході:
undefined
В результаті виводиться undefined, хоча малося на увазі, що з’явиться ім’я {name: 'Bob'}.
Так відбувається тому, що 4 правило ASI говорить, якщо оператор return зустрівся у вигляді окремого рядка, то ставиться крапка з комою.
Тому ASI бачить наведений вище код так:
function getData() {
return;
{
name: 'Bob'
}
}
console.log(getData())
Іншими словами, функція getData() нічого не повертає, а потім випадково створює об’єкт, з яким нічого не робить.
Таким чином, в консолі ви бачите undefined.
Для виправлення цього потрібно додати фігурну дужку, що відкриває, в той же рядок, що і оператор return:
function getData() {
return {
name: 'Bob'
}
}
console.log(getData())
На виході:
{
name: "Bob"
}
Тепер цей фрагмент коду працює як належить.
Завдяки цьому розділу ви навчилися бути обережними з ASI. Незважаючи на те, що в більшості випадків він діє правильно, іноді його інтерпретація ваших намірів може виявитися неправильною.
Далі перейдемо до найцікавішого, тобто до причин, з яких ви повинні або не повинні використовувати крапку з комою JavaScript.
Чому ви повинні використовувати крапку з комою: 5 причин
Використання або невикористання крапок із комою викликає спекотні суперечки серед веб-розробників.
Ось 5 причин, з яких ви повинні використовувати крапку з комою у своєму коді.
1. Іноді обов’язкова
Як було сказано раніше у цій статті, іноді необхідно використовувати крапку з комою.
Наприклад, якщо ви пишете цикл for, необхідно використовувати крапку з комою при вказівці параметра циклу та умов. В іншому випадку цикл не працюватиме.
Крім того, ASI (автоматична вставка крапки з комою) JavaScript не завжди відповідний на 100%.
Іноді він може неправильно витлумачити ваші наміри і не додати крапку з комою там, де вона потрібна. Це може призвести до появи непередбачених помилок у коді.
Один із таких прикладів ви також бачили раніше у цьому посібнику.
2. Ви звикли використовувати крапки з комою
Можливо, у процесі роботи ви звикли до використання крапок із комою в коді.
У деяких інших мовах широко використовуються крапки з комою, тому звикання до них є звичайною справою. Якщо ваш мозок не сприймає код JavaScript без крапок із комою, навіщо від них відмовлятися?
Не соромтеся використовувати крапки з комою, щоб зробити код більш зрозумілим для вас, якщо це те, що ви звикли робити.
3. Явно вказує на закінчення оператора
Крапка з комою – це простий спосіб чітко позначити закінчення оператора. При використанні крапки з комою немає місця для плутанини. Рядок коду закінчується на крапці з комою.
4. Менше приводів для занепокоєння
Якщо ви завжди використовуєте крапку з комою, то не варто переживати з приводу ASI. Це дає вам менше приводів для занепокоєння.
Після кожного рядка коду вам не потрібно замислюватися про те, чи зіпсує відсутність крапки з комою ситуацію чи ні. Однак ASI все одно може зіпсувати все, як ви бачили на прикладі оператора return .
5. ASI може бути змінено
Правила ASI можуть змінитися у майбутньому. Хоча це малоймовірно, але таке можливо. Таким чином, покладатися на правила ASI про вставку крапок з комою завжди за одним і тим же принципом надійно не на 100%.
Якщо ви пишете код з урахуванням поточного ASI, можете зіткнутися з деякими проблемами, якщо правила поміняються. Але майте на увазі, що у 99,9% випадків ASI виконує свою роботу коректно. Більше того, правила навряд чи зміняться найближчим часом.
Тепер, коли ви побачили безліч причин для використання крапок з комою, поговоримо про те, чому їх не слід використовувати.
Чому не слід використовувати крапки з комою: 3 причини
Зверніть увагу, що якщо ви чуєте, як хтось каже: “Ніколи не слід використовувати крапку з комою”, він помиляється. Це тому, що крапка з комою в окремих випадках обов’язкова.
У будь-якому випадку, поговоримо про мінуси крапок з комою, перерахувавши 3 причини, з яких їх не слід використовувати.
1. Крапки з комою вставляються автоматично
Як ви вже з’ясували, крапки з комою вставляються ASI. Таким чином, вам не потрібно писати те, що все одно буде проігноровано.
2. Менше написаного коду та менше шуму
Кожен символ коду впливає на читабельність та якість коду. Якщо ви не використовуєте крапки з комою, то цим заощадите символи в кожному написаному рядку коду.
3. Кілька операторів в одному рядку – погана практика
Використання крапок із комою дозволяє записувати по кілька операторів на одному рядку. Але це погана практика.
Ви ніколи не повинні писати оператори в одному рядку (якщо це не потрібно).
При використанні крапок з комою виникає ймовірність того, що у вас сформується ця погана звичка. Якщо ви не використовуєте крапки з комою, то можливості писати оператори в одному рядку у вас не буде.
Так використовувати крапки з комою чи ні?
Під час вивчення цієї статті ми обговорили причини, через які варто і не слід використовувати крапку з комою.
Як показує практика, є набагато більше причин для використання капок з комою, ніж для її відсутності. Таким чином, я рекомендую використовувати крапки з комою. Проте рішення лишається за вами.
Якщо ви працюєте в команді розробників програмного забезпечення, ви повинні дотримуватися загальноприйнятих правил. Якщо команда використовує крапки з комою, то і ви повинні їх застосовувати. Якщо команда цього не робить, то вам не слід їх ставити.
Також пам’ятайте, що потрібно бути послідовним у застосуванні крапок з комою та без них.
Якщо ви пропустили одну крапку з комою, то пропускайте їх усі (крім обов’язкових). Ви також можете налаштувати свій лінтер на автоматичне видалення крапок з комою.
Висновок
Сьогодні ви дізналися про використання крапок з комою у JavaScript. Нагадаємо, що крапки з комою не є обов’язковими у JavaScript. Водночас процес автоматичної вставки крапки з комою (ASI) додає крапки з комою там, де це необхідно.
Однак ASI не є правильним у 100% випадків. Крім того, у деяких ситуаціях ви просто зобов’язані використовувати крапку з комою. Інакше код не працюватиме.
Використовувати крапки з комою чи ні – повністю залежить від вас. На мій погляд, користі від використання крапок з комою більше, ніж від їхньої відсутності. Але ваша думка може відрізнятись.
Переклад статті “JavaScript Semicolon: Do You Really Need It? (Updated 2022)“