Beszéljünk a pontosvesszőkről a JavaScript-ben

Használni, vagy nem használni őket…

A JavaScript pontosvesszői megosztják a közösséget. Vannak, akik mindig szívesebben használják őket, nem számít mitől. Mások szeretik elkerülni őket.

A vizek tesztelésére a Twitteren készítettem egy közvélemény-kutatást, és rengeteg pontosvesszővel rendelkező támogatót találtam:

Miután pontosvesszőket használtam évekig, 2017 őszén úgy döntöttem, hogy megpróbálom elkerülni őket, amikor csak lehet. A Prettier-t úgy állítottam be, hogy automatikusan eltávolítsa a pontosvesszőket a kódomból, hacsak nem volt olyan speciális kódszerkezet, amely megkövetelte volna őket.

Most természetesnek tartom a pontosvesszők elkerülését, és úgy gondolom, hogy a kód jobban néz ki, és tisztábban olvasható.

Mindez azért lehetséges, mert a JavaScript nem igényel szigorúan pontosvesszőket. Ha van olyan hely, ahol pontosvesszőre van szükség, az hozzáadja a kulisszák mögé.

Ezt hívják automatikus pontosvessző beillesztésnek .

Fontos ismerni a pontosvesszőket szabályozó szabályokat. Ez lehetővé teszi, hogy elkerülje a hibákat generáló kód írását, mielőtt az nem úgy viselkedne, mint várta.

A JavaScript automatikus pontosvessző beillesztésének szabályai

A JavaScript elemző automatikusan pontosvesszőt ad hozzá, amikor a forráskód elemzése során a következő helyzeteket találja:

  1. amikor a következő sor olyan kóddal kezdődik, amely megszakítja az aktuálisat (a kód több sorra is képes ívni)
  2. amikor a következő sor a-val kezdődik }, bezárja az aktuális blokkot
  3. amikor elérjük a forráskód fájl végét
  4. amikor van egy returnállítás a saját vonalán
  5. amikor van egy breakállítás a saját vonalán
  6. amikor van egy throwállítás a saját vonalán
  7. amikor van egy continueállítás a saját vonalán

Példák olyan kódra, amely nem azt csinálja, amit gondol

Ezen szabályok alapján íme néhány példa.

Fogd:

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

Azért kapja a hibát, Uncaught TypeError: Cannot read property 'forEach' of undefinedmert a szabály alapján a 1JavaScript megpróbálja a kódot értelmezni

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

Ez a kóddarab:

(1 + 2).toString()

nyomatok "3".

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

Ehelyett TypeError: b is not a functionkivételt vet fel , mert a JavaScript megpróbálja ezt értelmezni

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

Egy másik példa a 4. szabály alapján:

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

Arra számíthat, hogy ennek az azonnal meghívott függvénynek a visszatérési értéke egy objektum, amely tartalmazza a colortulajdonságot, de nem az. Ehelyett undefinedazért, mert a JavaScript pontosvesszőt szúr be utána return.

Ehelyett azonnal tegye a nyitó zárójelet return:

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

Azt gondolhatja, hogy ez a kód a 0-t mutatja egy figyelmeztetésben:

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

de helyette 2-t mutat, mert a JavaScript (1. szabály szerint) a következőképpen értelmezi:

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

Következtetés

Legyen körültekintő - egyesek nagyon vélekednek a pontosvesszőkről. Nem érdekel, őszintén. Az eszköz lehetőséget ad arra, hogy ne használjuk, így ha akarjuk, elkerülhetjük a pontosvesszőket.

Nem javasolok semmit egyik vagy másik oldalon. Csak hozza meg saját döntését annak alapján, hogy mi működik Önnek.

Ettől függetlenül csak egy kicsit oda kell figyelnünk, még akkor is, ha ezek az alapvető forgatókönyvek legtöbbször soha nem jelennek meg a kódban.

Válasszon ki néhány szabályt:

  • Legyen óvatos a returnkijelentésekkel. Ha visszatér valamit, add hozzá ugyanabban a sorban, mint a visszatérő (ugyanaz break, throw, continue)
  • Soha ne indítson zárójeles sort, mivel ezek összefűzhetők az előző sorral függvényhívás vagy tömbelem hivatkozás létrehozására

Végül pedig mindig tesztelje a kódját, hogy megbizonyosodjon arról, hogy azt csinálja, amit szeretne.

Naponta 1 ingyenes programozási oktatóanyagot teszek közzé a flaviocopes.com oldalon, nézze meg!

Eredetileg a flaviocopes.com oldalon jelent meg.