ЭТОТ ПОСТ БЫЛ ИЗНАЧАЛЬНО ПУБЛИКУЕТСЯ НА НАШЕМ СОБСТВЕННОМ БЛОГ-САЙТЕ CHECK IT OUT, ЧТОБЫ УВИДЕТЬ БОЛЬШЕ ПОХОЖИХ ПОСТОВ!

Содержание

Давайте начнем с двух основных, но очень важных идей: 1) JavaScript — гибкий язык, и 2) некоторые точки с запятой в JavaScript нужны больше, чем другие. JavaScript иногда дает нам так много свободы, что некоторые приемы оказываются «необязательными», и примером этого является использование — или неиспользование — определенных точек с запятой.

Чтобы еще больше упростить идею, обычно отсутствующая точка с запятой не нарушает ваш код JavaScript, как это было бы в другом языке программирования, таком как Java или семейство C, но есть одна загвоздка: иногда вы можете сломать свой код javascript из-за отсутствия точки с запятой. в правильных (или неправильных, может быть?) условиях.

Как работает JavaScript

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

Скомпилированные и интерпретированные

Существует два типа языков программирования: компилируемые и интерпретируемые. Компилируемые языки нуждаются в компиляторе для преобразования написанного кода в машинный код, который будет выполняться позже. Некоторыми классическими примерами этого являются такие языки, как C, C++ и Haskell. С другой стороны, интерпретируемые языки, такие как Python или PHP (freecodecamp.org, 2020), интерпретируются во время выполнения. Затем у нас есть JavaScript… язык, который мы не можем однозначно классифицировать как ни компилируемый, ни интерпретируемый.

JavaScript не поддается классификации, потому что на очень техническом уровне он компилируется перед интерпретацией браузером построчно. Это может быть сложно понять и согласиться; некоторые классифицируют JavaScript как интерпретируемый язык. Например, в этой статье из Стэнфордского университета прямо говорится, что JavaScript — это интерпретируемый язык, а не компилируемый язык, и даже в той же статье с сайта freecodecamp.org, на которую мы ссылались выше, JavaScript классифицируется как интерпретируемый язык. Однако не будем забывать, что код, интерпретируемый браузером, был сначала скомпилирован стоящим за ним движком. Если мы хотим проверить эту информацию, мы можем сослаться на официальный блог V8, в котором говорится следующее:

Благодаря Ignition (интерпретатору внутри V8) V8 компилирует функции JavaScript в краткий байт-код, размер которого составляет от 50% до 25% размера эквивалентного базового машинного кода. Затем этот байт-код выполняется высокопроизводительным интерпретатором, который обеспечивает скорость выполнения на реальных веб-сайтах, близкую к скорости кода, сгенерированного существующим базовым компилятором V8. (Официальный блог V8, 2016).

V8 — это движок Google JavaScript для некоторых браузеров, таких как Google Chrome (V8.dev), но если у нас все еще есть какие-то мысли по поводу всего этого процесса компиляции и интерпретации, мы можем взглянуть на эту иллюстрацию:

Наконец, как мы можем видеть на иллюстрации, во время компиляции также происходит то, что называется анализом, процессом, который отвечает за анализ и преобразование программы во внутренний формат, который может фактически выполняться средой выполнения ( MDN Docs, 2021), или другими словами, это перевод того, что у нас есть, в то, что нам нужно, чтобы это работало в браузере. Знание шага синтаксического анализа во время компиляции необходимо для того, чтобы вы точно понимали, какая часть выполнения связана с отсутствующими точками с запятой.

Автоматическая вставка точки с запятой (ASI)

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

Этот процесс вставляет точки с запятой в некоторые операторы в коде JavaScript, когда мы не делаем этого сами. Если быть более точным, это заявления, которые будут обновлены ASI (MDN Docs, 2021):

  • Пустое заявление
  • Оператор переменной
  • Импорт Экспорт
  • Операторы выражений
  • Отладчик
  • Продолжить, сломать, бросить и вернуться

Чтобы немного прояснить эту идею, мы можем взглянуть на следующую иллюстрацию с несколькими простыми строками, где мы можем увидеть до и после ASI в нашем коде:

В архитектуре JavaScript есть три явных правила для автоматической вставки точки с запятой (ECMAScript, 2021), о которых следует помнить:

  1. Когда есть недопустимый терминатор строки.
  2. Когда синтаксический анализатор не может проанализировать следующую строку.
  3. Когда у нас есть ++, –, continue, break, return, yield, yield* и module.

Опять же, как мы видим в документации (ECMAScript, 2021), это простой способ представить и понять, когда ASI работает, а когда нет:

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

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

Когда использовать точку с запятой

Теперь, когда мы знаем, что JavaScript автоматически добавляет точки с запятой к определенным операторам с некоторыми ограничениями и правилами, мы можем — в качестве лучшей практики — использовать точки с запятой после завершения операторов, таких как объявление переменной с помощью var, let или const, при вызове функции, используя ++ или –, а при использовании return прерывать или продолжать.

Давайте завершим тему «точки с запятой в JavaScript» несколькими наглядными примерами того, когда ваш код не работает из-за отсутствия точки с запятой.

Пример 1:

В этом случае отсутствие точки с запятой в объявлении переменной c нарушает следующую функцию toString, поскольку ее значение распознается как необъявленная функция. Мы можем исправить эту ошибку точкой с запятой в объявлении последней переменной. (Флавио Копес, 2018)

Пример 2:

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

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

Последние мысли

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

Важно помнить еще о двух вещах: во-первых, возможны ошибки, если вы не используете точку с запятой в своем файле JavaScript и пытаетесь минимизировать или уменьшить его. Во-вторых, точки с запятой не будут существенно влиять на производительность и размер вашего файла (Fullstack Academy, 2017).

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