x
 
Василий Половнёв
8 июня 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Руст!

Что думаешь про точки с запятой в Яваскрипте? Зачем их ставить?


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

Благодаря этому механизму, точки с запятой можно безболезненно выкинуть (с одним исключением). Но многие стайлгайды советуют ставить их везде вручную. Почему так?

В сети встречаются четыре аргумента в пользу ручной расстановки точки с запятой. Разберём их:

Безопасная минификация кода

Одна из фич минификаторов — удаление лишних пробельных символов, в том числе переносов строк. Если минификатор склеивал бы строки вслепую, то это бы действительно ломало код.

const a = 1
console.log(a)
Исходный код
const a = 1console.log(a)

Результат: SyntaxError

Но минификаторы знают об ASI и склеивают строки по-умному, не ломая код:

const a = 1
console.log(a)
Исходный код
const a = 1;console.log(a)

-

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

Return

В качестве иллюстрации проблемы автоматической расстановки точек с запятой часто приводят пример с ретёрном:

function multiply(a, b) {
  return
    a * b
}
Исходный код
function multiply(a, b) {
  return;
    a * b;
}
Код после автоматической расстановки точек с запятой. Видно, что функция всегда возвращает undefined

Это странный аргумент, потому что ручная расстановка тут не поможет:

function multiply(a, b) {
  return
    a * b;
}
Добавили точку с запятой
function multiply(a, b) {
  return;
    a * b;
}
Результат не изменился. Получаем undefined

Чтобы избежать таких ситуаций, лучше настроить правило no-unreachable в линтере.

Линтер ругается

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

Строка с оператором в начале

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

sum = 1 + 2
('hello' + 'world').length
Исходный код
sum = 1 + 2('hello' + 'world').length

Результат: TypeError: 2 is not a function

Этой проблемы можно избежать, добавив в линтер простое правило: «если строка начинается с опреатора, требовать перед ней точку с запятой». Получится так:

sum = 1 + 2
;('hello' + 'world').length
Исходный код
sum = 1 + 2;('hello' + 'world').length

Результат: 10

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

В популярном стайлгаде standard.js нет точек с запятой
P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Занятия с 27 августа. Мы напишем вам, когда будет открыт набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Можно ли применять вариативные шрифты в вебе Что за font-family? Где его взять? 2 Заметил, что сайт бюро перешел на HTTPS. Расскажите, как переходили? 1




Недавно всплыло

Илья, видео с переговорами прикольные, продолжайте :-) 2 2 Исследование Гугля: пользователям легче читать, когда подписи над полями 1 В таких разборах сразу видно, как теорию перекладывать на практику. Делайте, пожалуйста, побольше видео! :-) 1