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

davajte pogovorim o tochke s zapyatoj v javascript

Пользоваться ими или не использовать…

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

Я провел опрос в Twitter, чтобы проверить ситуацию, и нашел много поклонников точки с запятой.

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

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

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

Это называется Автоматическая вставка точки с запятой.

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

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

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

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

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

На основе этих правил приведем несколько примеров.

Принять это:

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

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

Вы получите ошибку Uncaught TypeError: Cannot read property 'forEach' of undefined потому что на основе правила 1JavaScript пытается интерпретировать код как

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()

Вместо этого он вызывает a TypeError: b is not a function исключение, поскольку JavaScript пытается интерпретировать это как

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

Другой пример, основанный на правиле 4:

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

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

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

(() => {
  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, continue)
  • Никогда не начинайте строку со скобок, поскольку они могут быть объединены с предыдущей строкой, чтобы создать вызов функции или ссылку на элемент массива

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

Я публикую 1 бесплатное руководство по программированию в день на flaviocopes.com, проверьте его!

Первоначально опубликовано на flaviocopes.com.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *