Точки с запятой в JavaScript

Точки с запятой в JavaScript разделяют сообщество. Некоторые предпочитают использовать их всегда, несмотря ни на что. Другие предпочитают избегать их.

После использования точек с запятой в течение многих лет, осенью 2017 года я решил попробовать избегать их по мере необходимости, и я настроил Prettier для автоматического удаления точек с запятой из моего кода, если только не существует конкретной конструкции кода, которая их требует.

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

Все это возможно, потому что JavaScript строго не требует точек с запятой. Когда есть место, где нужна была точка с запятой, он добавляет ее за кулисами.

Процесс, который делает это, называется Автоматическая вставка точки с запятой .

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

Правила автоматической вставки точки с запятой в JavaScript

Анализатор JavaScript автоматически добавит точку с запятой, когда во время анализа исходного кода он обнаружит эти конкретные ситуации:

1. когда следующая строка начинается с кода, который прерывает текущую (код может появляться в нескольких строках)
2. когда следующая строка начинается с } , закрывающий текущий блок
3. когда будет достигнут конец файла исходного кода
4. когда в отдельной строке есть оператор return
5. когда в отдельной строке есть оператор break
6. когда в отдельной строке есть оператор throw
7. когда в отдельной строке есть оператор продолжить

Примеры кода, который не делает то, что ты думаешь

Основываясь на этих правилах, вот несколько примеров.

Возьми это:

const hey = 'hey'
const you = 'hey'
const heyYou = hey + ' ' + you

['h', 'e', 'y'].forEach((letter) => console.log(letter))

Вы получите сообщение об ошибке Неперехваченная ошибка типа: Не удается прочитать свойство "для каждого" неопределенного , поскольку основано на правиле 1 JavaScript пытается интерпретировать код как

const hey = 'hey';
const you = 'hey';
const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

Такой фрагмент кода:

(1 + 2).toString()

печатает "3" .

const a = 1
const b = 2
const c = a + b
(a + b).toString()

вместо этого возникает TypeError: b не является исключением функции , потому что JavaScript пытается интерпретировать его как

const a = 1
const b = 2
const c = a + b(a + b).toString()

Еще один пример, основанный на правиле 4:

(() => {
  return
  {
    color: 'white'
  }
})()

Можно было бы ожидать, что возвращаемое значение этой немедленно вызываемой функции будет объектом, содержащим свойство color , но это не так. Вместо этого это не определено , потому что JavaScript вставляет точку с запятой после возврата .

Вместо этого вы должны поставить открывающую скобку сразу после возврата :

(() => {
  return {
    color: 'white'
  }
})()

Можно подумать, что этот код показывает “0” в предупреждении:

1 + 1
-1 + 1 === 0 ? alert(0) : alert(2)

но вместо этого он показывает 2, потому что JavaScript в соответствии с правилом 1 интерпретирует его как:

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

Вывод

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

Я ничего не предлагаю, кроме как принять ваше собственное решение.

Нам просто нужно уделить немного внимания, даже если в большинстве случаев эти базовые сценарии никогда не появляются в вашем коде.

Выберите несколько правил:

• будьте осторожны с операторами return . Если вы что-то возвращаете, добавьте это в ту же строку, что и возврат (то же самое для break , throw , продолжить )
• никогда не начинайте строку со скобок, они могут быть объединены с предыдущей строкой для формирования вызова функции, или ссылка на элемент массива

И, в конечном счете, всегда проверяйте свой код, чтобы убедиться, что он работает чего ты хочешь

Оригинал: “https://flaviocopes.com/javascript-automatic-semicolon-insertion/”