Puhutaan puolipisteistä JavaScriptissä

Voit käyttää niitä tai olla käyttämättä niitä…

JavaScriptin puolipisteet jakavat yhteisön. Jotkut haluavat käyttää niitä aina, ei väliä mitä. Toiset haluavat välttää niitä.

Laitin Twitterissä kyselyn vesien testaamiseksi, ja löysin paljon puolipisteitä kannattajia:

Käytettyään puolipisteitä vuosia syksyllä 2017 päätin yrittää välttää niitä, kun voisin. Asetin Prettierin poistamaan puolipisteet automaattisesti koodistani, ellei niitä tarvita tiettyä koodirakennetta.

Minusta on luonnollista välttää puolipisteitä, ja mielestäni koodi näyttää paremmalta ja on puhtaampaa lukea.

Tämä on kaikki mahdollista, koska JavaScript ei vaadi ehdottomasti puolipisteitä. Kun on paikka, jossa tarvitaan puolipiste, se lisää sen kulissien taakse.

Tätä kutsutaan automaattiseksi puolipisteen lisäykseksi .

On tärkeää tietää säännöt, jotka ohjaavat puolipisteitä. Tämän avulla voit välttää virheitä tuottavan koodin kirjoittamisen ennen kuin se ei toimi odotetulla tavalla.

JavaScriptin automaattisen puolipisteen lisäyksen säännöt

JavaScript-jäsennin lisää puolipisteen automaattisesti, kun se löytää lähdekoodin jäsentämisen aikana seuraavat erityistilanteet:

  1. kun seuraava rivi alkaa koodilla, joka rikkoo nykyisen (koodi voi kuttua usealle riville)
  2. kun seuraava rivi alkaa a: lla }, sulkee nykyisen lohkon
  3. kun lähdekooditiedoston loppu on saavutettu
  4. kun returnomalla rivillään on lause
  5. kun breakomalla rivillään on lause
  6. kun throwomalla rivillään on lause
  7. kun continueomalla rivillään on lause

Esimerkkejä koodista, joka ei tee sitä mitä luulet

Näiden sääntöjen perusteella tässä on joitain esimerkkejä.

Ota tämä:

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

Saat virheen, Uncaught TypeError: Cannot read property 'forEach' of undefinedkoska 1JavaScript yrittää säännön perusteella tulkita koodin

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

Tämä koodi:

(1 + 2).toString()

tulosteita "3".

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

Sen sijaan se herättää TypeError: b is not a functionpoikkeuksen, koska JavaScript yrittää tulkita sitä

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

Toinen esimerkki sääntöön 4 perustuen:

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

Oletat, että tämän välittömästi kutsutun funktion palautusarvo on objekti, joka sisältää colorominaisuuden, mutta se ei ole. Sen sijaan se on undefined, koska JavaScript lisää puolipisteen jälkeen return.

Sen sijaan sinun tulisi laittaa avainkannatin heti return:

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

Luulisi, että tämä koodi näyttää '0' ilmoituksessa:

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

mutta se näyttää sen sijaan 2, koska JavaScript (sääntöä 1 kohti) tulkitsee sen seuraavasti:

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

Johtopäätös

Ole varovainen - jotkut ihmiset suhtautuvat hyvin puolipisteisiin. En välitä rehellisesti. Työkalu antaa meille mahdollisuuden olla käyttämättä sitä, joten voimme välttää puolipisteitä, jos haluamme.

En ehdota mitään toisella tai toisella puolella. Tee vain oma päätöksesi sen perusteella, mikä toimii sinulle.

Riippumatta meidän on vain kiinnitettävä vähän huomiota, vaikka suurimmaksi osaksi nuo perusskenaariot eivät koskaan näy koodissasi.

Valitse joitain sääntöjä:

  • Ole varovainen returnlausuntojen suhteen. Jos palaat jotain, lisää se samalla linjalla kuin tuotto (sama break, throw, continue)
  • Älä koskaan aloita riviä sulkeilla, koska ne saatetaan yhdistää edelliseen riviin funktiokutsun tai taulukkoelementtiviitteen muodostamiseksi

Ja viime kädessä, testaa koodisi aina varmistaaksesi, että se tekee mitä haluat.

Julkaisen yhden ilmaisen ohjelmointiopetus päivässä sivustolla flaviocopes.com, tarkista se!

Alun perin julkaistu osoitteessa flaviocopes.com.