Нека да поговорим за запетая в JavaScript

Да ги използваш или да не ги използваш ...

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

Пуснах анкета в Twitter, за да тествам водите, и открих много поддръжници с точка и запетая:

След като използвах точки и запетая в продължение на години, през есента на 2017 г. реших да се опитам да ги избягвам, когато мога. Настроих Prettier да премахва автоматично точки и запетаи от кода ми, освен ако няма конкретна конструкция на код, която да ги изисква.

Сега намирам за естествено да избягвам точка и запетая и мисля, че кодът изглежда по-добре и е по-чист за четене.

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

Това се нарича автоматично вмъкване на точка и запетая .

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

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

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

  1. когато следващият ред започва с код, който прекъсва текущия (кодът може да се появи на няколко реда)
  2. когато следващият ред започва с a }, затваряйки текущия блок
  3. когато е достигнат края на файла с изходния код
  4. когато има returnизявление на собствена линия
  5. когато има breakизявление на собствена линия
  6. когато има throwизявление на собствена линия
  7. когато има 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 = 1const b = 2const c = a + b(a + b).toString()

Вместо това създава 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.