Kultainen koodi

.NET-osaajan ajatuksia paremmasta koodailusta

Kuinka ujutan lokituksen JavaScriptin nuolifunktioon

Sain eteeni JavaScript frontin, joka on toteutettu ES6 + React Redux Forms -pinolla. Huomasin kaipaavani pientä lokitusta, eli perinteistä console.log(myProperty) -settiä, jotta näen toimiiko koodi siten, kuin aiempi kehittäjä sen tarkoitti.

Löysin seuraavanlaisen funktion, olen vähän yksinkertaistanut sitä esimerkin vuoksi:

const UiComponent = (locale) => (
  <CustomComponent locale="locale">
    {childern}
  </CustomCompnent>
);

Halusin tietää locale:n arvon kun se annetaan komponentille. No, omassa ongelmassani kyse oli eri sisällöstä, mutta locale toimii paremmin esimerkkinä.

Yritin itse ensin kirjoittaa koodin oikein, onnistumatta. JavaScriptille kun ei ole näppärää editoria, joka osaa kertoa miltä funktion pitäisi näyttää. Puhumattakaan VS Codesta, jota käytän.

Onneksi työkaverini osasi kertoa ratkaisun. Se kesti alle minuutin.

Ensimmäiseksi kirjoitetaan nuolen jälkeen return, että funktio palauttaa sen mitä haluat => return( ja ympäröidään koko paketti kaarisuluilla. Tadaa!

Laitoin vielä sisälle console.log:n jotta sain näkymään annetun parametrin arvon.

const UiComponent = (locale) => {
  console.log(locale);
  return (
    <CustomComponent locale="locale">
      {childern}
    </CustomCompnent> 
  );
}

Löydettyäni bugin perinteisen console.log-arvon avulla sain korjattua ongelman.

Nuolifunktioista voi lukea lisää vaikka Wes Bos:lta

 

Mainokset

Single Post Navigation

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out /  Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out /  Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out /  Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out /  Muuta )

Muodostetaan yhteyttä palveluun %s

%d bloggers like this: