Точка с запятой в JavaScript: Действительно ли она вам нужна? [Руководство 2022]

В 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:

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 добавляет точку с запятой в любом из следующих случаев:

1. Следующая строка кода начинается с кода, который явно прерывает текущую строку кода.

2. Когда следующая строка кода начинается с '}'.

3. При достижении конца файла.

4. Если любой из следующих операторов встречается в виде отдельной строки 

• 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 <anonymous>: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% случаев. Кроме того, в некоторых ситуациях вы просто обязаны использовать точку с запятой. Иначе код не будет работать.

Использовать точки с запятой или нет - полностью зависит от вас. На мой взгляд, пользы от использования точек с запятой больше, чем от их отсутствия. Но ваше мнение может отличаться.

Спасибо за прочтение. Надеюсь, вы нашли это полезным. Удачного кодинга!

В заключение хочу порекомендовать бесплатный вебинар в OTUS, на котором сверстаем одностраничный сайт о компании или персоне, который можно будет использовать далее. Разберём современные подходы к созданию HTML-страниц, их оформлению и расположению элементов на экране. Записаться можно на странице специализации Fullstack Developer.