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

• Минимум для работы с системой Git.
  Git - инструмент которым пользуется разработчик на любом языке. Без него сейчас не пишут ни программы для телефонов, ни разрабатывают операционные системы. На уроке мы поговорим для чего нужна система Git, какие операции чаще всего нужны разработчикам и как они используются на курсе. В результате занятия у вас будет возможность создать свой первый пуллреквест и попробуете базовый сценарий по выполнению домашних заданий. Занятие подойдет любому, кто работает с текстовыми документами.
  Зарегистрироваться.

• Основы Nuxt 3.
  Nuxt 3 - новая версия популярного решения для разработку универсальных и SPA приложений.
  Зарегистрироваться.