Să le folosești sau să nu le folosești …

Punctele și virgulele în JavaScript împart comunitatea. Unii preferă să le folosească întotdeauna, indiferent de ce. Altora le place să le evite.

Am lansat un sondaj pe Twitter pentru a testa apele și am găsit o mulțime de susținători de punct și virgulă:

După ce am folosit punct și virgulă ani de zile, în toamna anului 2017 am decis să încerc să le evit când am putut. Am înființat Mai frumoasă pentru a elimina automat punctele și virgulele din codul meu, cu excepția cazului în care exista un anumit construct de cod care le cerea.

Acum mi se pare natural să evit punct și virgulă și cred că codul arată mai bine și este mai curat de citit.

Acest lucru este posibil, deoarece JavaScript nu necesită strict punct și virgulă. Când există un loc unde este necesar un punct și virgulă, acesta îl adaugă în culise.

Aceasta se numește Inserare automată de punct și virgulă.

Este important să cunoașteți regulile care alimentează punctele și virgulele. Acest lucru vă va permite să evitați scrierea codului care va genera erori înainte ca acesta să nu se comporte așa cum vă așteptați.

Regulile de inserare automată a punctului și virgulă JavaScript

Analizorul JavaScript va adăuga automat un punct și virgulă atunci când, în timpul analizei codului sursă, găsește aceste situații particulare:

  1. când următoarea linie începe cu cod care o rupe pe cea curentă (codul poate apărea pe mai multe linii)
  2. când următoarea linie începe cu a }, închiderea blocului curent
  3. când se ajunge la sfârșitul fișierului cod sursă
  4. când există o return declarație pe propria sa linie
  5. când există o break declarație pe propria sa linie
  6. când există o throw declarație pe propria sa linie
  7. când există o continue declarație pe propria sa linie

Exemple de cod care nu fac ceea ce credeți

Pe baza acestor reguli, iată câteva exemple.

Ia asta:

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

Veți primi eroarea Uncaught TypeError: Cannot read property 'forEach' of undefined deoarece pe baza regulii 1, JavaScript încearcă să interpreteze codul ca

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

Această bucată de cod:

(1 + 2).toString()

imprimeuri "3".

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

În schimb, ridică o TypeError: b is not a function excepție, deoarece JavaScript încearcă să o interpreteze ca fiind

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

Un alt exemplu bazat pe regula 4:

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

Vă așteptați ca valoarea returnată a acestei funcții invocate imediat să fie un obiect care conține color proprietate, dar nu este. În schimb, este undefined, deoarece JavaScript introduce un punct și virgulă după return.

În schimb, ar trebui să puneți suportul de deschidere imediat după return:

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

Ați crede că acest cod arată „0” într-o alertă:

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

dar arată în schimb 2, deoarece JavaScript (conform regulii 1) îl interpretează ca:

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

Concluzie

Aveți grijă – unii oameni sunt foarte opiniați cu privire la punct și virgulă. Nu-mi pasă, sincer. Instrumentul ne oferă opțiunea de a nu-l folosi, astfel încât să putem evita punctele și virgulele dacă dorim.

Nu sugerez nimic de o parte sau de cealaltă. Luează-ți propria decizie în funcție de ceea ce funcționează pentru tine.

Indiferent, trebuie doar să acordăm puțină atenție, chiar dacă de cele mai multe ori aceste scenarii de bază nu apar niciodată în codul dvs.

Alegeți câteva reguli:

  • Ai grija cu return declarații. Dacă returnați ceva, adăugați-l pe aceeași linie ca returul (la fel pentru break, throw, continue)
  • Nu porniți niciodată o linie cu paranteze, deoarece acestea ar putea fi concatenate cu linia anterioară pentru a forma un apel funcțional sau o referință a elementului matricei

Și, în cele din urmă, testați întotdeauna codul dvs. pentru a vă asigura că face ceea ce doriți.

Public 1 tutorial gratuit de programare pe zi pe flaviocopes.com, verifică!

Publicat inițial la flaviocopes.com.