Yksi osa JavaScriptin kehitystä, jonka kanssa monet kehittäjät kamppailevat, on valinnaisten arvojen käsittely. Mitkä ovat parhaat strategiat virheiden minimoimiseksi, jotka voivat olla null, undefined tai muuten alustamattomia suorituksen aikana?

Joillakin kielillä on sisäänrakennetut varat näihin olosuhteisiin. Joillakin staattisesti kirjoitetuilla kielillä voit sanoa, että null ja undefined ovat laittomia arvoja, ja anna ohjelmointikielesi heittää TypeError käännösaikaan , mutta edes kyseisillä kielillä se ei voi estää tyhjien syötteiden virtaamista ohjelmaan ajon aikana.

Saadaksesi paremman käsityksen tästä ongelmasta, meidän on ymmärrettävä, mistä nämä arvot voivat tulla. ovat joitain yleisimpiä lähteitä:

• käyttäjän syöttö
• tietokanta- / verkkotietueet
• alustamaton tila
• toiminnot, jotka voisivat palauta mitään

Kun käsittelet käyttäjän syötteitä, vahvistus on ensimmäinen ja paras puolustuslinja. Luotan usein skeeman vahvistajiin auttaakseni tätä työtä. Katso esimerkiksi reaktio -jsonschema-lomake.

Tietueiden nesteytys syötteestä

Välitän aina verkosta, tietokannasta tai käyttäjän syötteistä saamani tulot hydratointitoiminnon kautta. Käytän esimerkiksi redux-toiminnan luojat, jotka pystyvät käsittelemään

arvot hydratoimaan käyttäjätietueita:

const setUser = ({ name = "Anonymous", avatar = "anon.png" } = {}) => ({
type: setUser.type,
payload: {
name,
avatar
}
});
setUser.type = "userReducer/setUser";

Joskus sinun on näytettävä erilaisia asioita nykyisestä tilasta riippuen tietoja. Jos sivu on mahdollista näyttää ennen kuin kaikki tiedot on alustettu, saatat joutua tällaiseen tilanteeseen. Esimerkiksi kun näytät rahasaldoja käyttäjälle, voit vahingossa näyttää 0 dollarin saldon ennen tietojen lataamista. Olen nähnyt tämän järkyttävän käyttäjiä useita kertoja. Voit luoda mukautettuja tietotyyppejä, jotka tuottavat erilaisia ulostuloja nykyisen tilan perusteella:

Yllä oleva koodi on tilakone, joka tekee mahdottomaksi näyttää virheellisiä tiloja. Kun luot ensin saldon, se asetetaan tilaan uninitialized. Jos yrität näyttää tasapainon tilan ollessa uninitialized, saat sen sijaan aina paikkamerkki-arvon (”--”).

Tämän muuttamiseksi sinun on määritettävä arvo nimenomaisesti kutsumalla .set -metodi tai setBalance -pikakuvake määritimme alla createBalance -tehtaan.

Itse tila on koteloitu suojaamaan sitä ulkopuolisilta häiriöiltä varmistaakseen, että muut toiminnot eivät voi tarttua siihen ja asettaa sen virheelliseen tilaan.

Huomaa: Jos ihmettelet, miksi käytämme merkkijonoja numeroiden sijasta, se johtuu siitä, että edustan rahatyyppejä ison numeron merkkijonot, joissa on paljon desimaalitarkkuutta pyöristysvirheiden välttämiseksi ja salauksen valuuttatapahtumien arvojen tarkka esittäminen, joilla voi olla mielivaltainen merkittävä desimaalitarkkuus.

Jos Kun käytät Redux- tai Redux-arkkitehtuuria, voit ilmoittaa tilakoneet Redun avulla x-DSM.

Vältä nollien ja määrittelemättömien arvojen luomista

Omissa toiminnoissa voit välttää null tai undefined arvot aluksi. On olemassa muutama tapa tehdä se sisäänrakennettuna JavaScriptiin, joka tulee mieleen. Katso alla.

Vältä nollaa

En koskaan nimenomaisesti luo null -arvoja JavaScriptiin, koska en ole koskaan nähnyt järkeä, että sinulla olisi kaksi erilaista primitiiviset arvot, jotka tarkoittavat olennaisesti ”tätä arvoa ei ole”.

Vuodesta 2015 lähtien JavaScript on tukenut oletusarvoja, jotka täytetään, kun et anna arvoa kyseiselle argumentille tai ominaisuudelle. Nämä oletusasetukset eivät toimi null -arvojen kanssa. Se on yleensä vika kokemukseni mukaan. Välttääksesi tämän ansan, älä käytä null JavaScriptiä.

Jos haluat erikoistapauksia alustamattomille tai tyhjille arvoille, tilakoneet ovat parempi vaihtoehto. Katso yllä.

Uudet JavaScript-ominaisuudet

On olemassa muutamia ominaisuuksia, jotka voivat auttaa sinua käsittelemään null tai undefined -arvot. Molemmat ovat vaiheen 3 ehdotuksia tämän kirjoituksen aikaan, mutta jos luet tulevaisuudesta, saatat pystyä käyttämään niitä.

Tämän kirjoituksen jälkeen valinnainen ketjutus on vaiheen 3 ehdotus. Se toimii näin:

const foo = {};
// console.log(foo.bar.baz); // throws error
console.log(foo.bar?.baz) // undefined

Nullish Coalescing Operator

Myös erittelyyn lisättävä vaiheen 3 ehdotus, ”nullable coalescing operator ”On pohjimmiltaan hienostunut tapa sanoa” palautusarvon operaattori ”. Jos vasemmalla oleva arvo on undefined tai null, se arvioi oikealla oleva arvo.Se toimii näin:

Asynkroninen joko lupausten kanssa

Jos funktio ei välttämättä palaa arvolla, voi olla hyvä kääriä se kumpaankin. Toiminnallisessa ohjelmoinnissa Joko monad on erityinen abstrakti tietotyyppi, jonka avulla voit liittää kaksi erilaista koodipolua: onnistumis- tai epäonnistumispolku. Javascriptissa on sisäänrakennettu asynkroninen Joko monad-ish-tyyppinen tietotyyppi nimeltä Promise. Voit käyttää sitä ilmoittavien virheiden haaroittamiseen määrittelemättömille arvoille:

Voit kirjoittaa siitä synkronisen version, jos haluat, mutta en ole tarvinnut sitä paljon. Jätän sen sinulle harjoitukseksi. Jos sinulla on hyvä maadoitus funktoreissa ja monadeissa, prosessi on helpompaa. Jos se kuulostaa pelottavalta, älä huoli siitä. Käytä vain lupauksia. Ne ovat sisäänrakennettuja ja toimivat hyvin suurimman osan ajasta.

Maybes-taulukot

Matriisit toteuttavat map -menetelmän, joka vie funktio, jota käytetään ryhmän kaikkiin elementteihin. Jos taulukko on tyhjä, toimintoa ei koskaan kutsuta. Toisin sanoen JavaScript-taulukot voivat täyttää Maybesin roolin Haskellin kaltaisista kielistä.

Mikä on Ehkä?

Ehkä on erityinen abstrakti tietotyyppi, joka kapseloi valinnaisen arvon . Tietotyyppi on kahdessa muodossa:

• Just – A Ehkä, joka sisältää arvon
• Ei mitään – a Ehkä ilman arvoa

Tässä on idean ydin:

Tämä on vain esimerkki konseptin osoittamiseksi. Voit rakentaa kokonaisen hyödyllisten toimintojen kirjaston maybesin ympärille toteuttamalla muita toimintoja, kuten flatMap ja flat (esim. Välttää Just(Just(value)) kun kirjoitat useita ehkä palauttavia toimintoja). Mutta JavaScriptillä on jo tietotyyppi, joka toteuttaa paljon näitä ominaisuuksia valmiina, joten tavoittelen yleensä sen sijaan: Array.

Jos haluat luoda toiminnon, joka voi tai ei ei välttämättä tuota tulosta (varsinkin jos tuloksia voi olla useampi kuin yksi), matriisin palauttamiseen voi olla hyviä tapoja.

Mielestäni map ei kutsuta tyhjään luetteloon, joka on erittäin hyödyllinen null – ja undefined -arvojen välttämiseksi, mutta muista, jos taulukko sisältää null ja undefined arvoja, se kutsuu funktion näillä arvoilla, joten jos käynnistämäsi funktio voisi tuottaa null tai undefined, sinun on suodatettava ne pois palautetusta matriisista, kuten edellä on osoitettu. Tämä voi muuttaa kokoelma.

Haskellissa on funktio maybe, joka (kuten ) käyttää funktiota arvoon. Arvo on kuitenkin valinnainen ja se on kapseloitu Maybe. Voimme käyttää JavaScripti ”s Array -tietotyyppiä olennaisesti saman asian tekemiseen:

maybe vie palautusarvo , sitten toiminto, joka kartoittaa ehkä matriisin, sitten ehkä matriisin (matriisi, joka sisältää yhden arvon tai ei mitään), ja palauttaa joko funktion soveltamisen tuloksen matriisin sisältöön tai vara-arvon, jos matriisi on tyhjä.

Mukavuussyistä olen määrittänyt myös toMaybeArray -funktion ja kurannut maybe -funktion tekemään se on ilmeisintä tälle esittelylle.

Jos haluat tehdä jotain tällaista tuotantokoodissa, olen helpottanut luomalla yksikön testatun avoimen lähdekoodin kirjaston. Sitä kutsutaan Maybearrayiksi. Maybearrayn etu muihin JavaScript Ehkä kirjastoihin verrattuna on, että se käyttää alkuperäisiä JavaScript-taulukoita edustamaan arvoja, joten sinun ei tarvitse antaa heille mitään erityiskohtelua tai tehdä mitään erityistä muunnettaessa edestakaisin. Kun kohtaat Ehkä taulukoita virheenkorjauksessa, sinun ei tarvitse kysyä: ”mikä tämä outo tyyppi on?” Se on vain arvon taulukko tai tyhjä taulukko, ja olet nähnyt ne miljoona kertaa aiemmin.

Seuraavat vaiheet

EricElliottJS.com -sivustolla on paljon enemmän sisältöä, mukaan lukien paljon videoita, harjoituksia, nauhoitettuja kuvaruutuja ja pikavinkkejä. Jos et ole jäsen, nyt on hyvä aika nähdä, mitä olet kadottanut!