{"id":232314,"date":"2023-01-12T11:33:00","date_gmt":"2023-01-12T08:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232314"},"modified":"2022-11-10T08:40:01","modified_gmt":"2022-11-10T05:40:01","slug":"5-huippuluokan-javascript-ominaisuutta-koodin-parantamiseksi","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/5-huippuluokan-javascript-ominaisuutta-koodin-parantamiseksi\/","title":{"rendered":"5 huippuluokan JavaScript-ominaisuutta koodin parantamiseksi"},"content":{"rendered":"\n

JavaScript-ominaisuudet kasvavat jatkuvasti ja saavat uusia, kuten operaattoreita, syntaksirakenteita, lausekkeita. Monet niist\u00e4 on otettu k\u00e4ytt\u00f6\u00f6n viime vuosina ja osa niist\u00e4 on jo toista luontoa, kuten rasvanuolilauseke =><\/code>tai objektin levi\u00e4misoperaattori ...<\/code>.<\/p>\n

JavaScript-ominaisuudet alkavat ehdotuksista<\/h2>\n

Kaikki n\u00e4m\u00e4 JavaScript-ominaisuudet alkavat TC 39:lle l\u00e4hetetyist\u00e4 ehdotuksista. Tekninen toimikunta 39<\/a> vastaa standardoinnista:<\/p>\n

\n

yleisk\u00e4ytt\u00f6inen, monialustainen, toimittajaneutraali ohjelmointikieli ECMAScript (JavaScript). T\u00e4m\u00e4 sis\u00e4lt\u00e4\u00e4 kielen syntaksin, semantiikan ja kielt\u00e4 tukevat kirjastot ja t\u00e4ydent\u00e4v\u00e4t tekniikat.<\/p>\n<\/blockquote>\n

JavaScript-k\u00e4\u00e4nt\u00e4j\u00e4n Babelin<\/a> ansiosta voimme aloittaa lukuisten JavaScript-ehdotusten lis\u00e4\u00e4misen jo t\u00e4n\u00e4\u00e4n. Jotkut niist\u00e4 tarjoavat enemm\u00e4n selkeytt\u00e4, kuten numeerinen erotin. Toiset, kuten do<\/code>lausekkeet, tarjoavat mahdollisuuden yhdist\u00e4\u00e4 monimutkaisia \u200b\u200behtoja React JSX -tunnisteiden kanssa.<\/p>\n

Katsotaanpa t\u00e4ss\u00e4 artikkelissa viitt\u00e4 JavaScript-ominaisuutta, jotka ovat viel\u00e4 ehdotusvaiheessa, mutta joita voimme k\u00e4ytt\u00e4\u00e4 Babelin kanssa ja jotka parantavat merkitt\u00e4v\u00e4sti koodauskokemustasi.<\/p>\n

Jokaisella on linkki sen Babel-sivulle, jossa voit n\u00e4hd\u00e4 kuinka Babel m\u00e4\u00e4ritet\u00e4\u00e4n k\u00e4ytt\u00e4m\u00e4\u00e4n sit\u00e4, vaikka t\u00e4ss\u00e4 kuvatut ehdotetut JavaScript-ominaisuudet sis\u00e4ltyv\u00e4t jo Babel 7:\u00e4\u00e4n. Jokaisessa osiossa on my\u00f6s linkki ehdotukseensa Ecma TC39<\/a> -organisaatiossa osoitteessa GitHub<\/a>.<\/p>\n

Tyhj\u00e4 yhdist\u00e4misoperaattori<\/h2>\n

\"5<\/a><\/p>\n

Ehdotus: https:\/\/github.com\/tc39\/proposal-nullish-coalescing<\/a><\/p>\n

Babel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-nullish-coalescing-operator.html<\/a><\/p>\n

T\u00e4m\u00e4 JavaScript-ehdotus kuvaa operaattorin, joka mahdollistaa vara-arvon tarjoamisen operaattorin oikealle puolelle, kun muuttuja tai objektin ominaisuus on m\u00e4\u00e4rittelem\u00e4t\u00f6n. Jos se ei ole m\u00e4\u00e4rittelem\u00e4t\u00f6n, se k\u00e4ytt\u00e4\u00e4 operaattorin vasenta puolta:<\/p>\n

const maybeUndef = undefined;\nconst val = maybeUndef ?? 2021; <\/code><\/pre>\n
T\u00e4m\u00e4 on samanlainen kuin sen kirjoittaminen kolmiosaisena operaattorina:<\/p>\n
const maybeUndef = undefined;\nconst val = maybeUndef? maybeUndef: 2021; <\/code><\/pre>\n
Huomaa, ett\u00e4 t\u00e4m\u00e4 operaattori ei tarkista, ett\u00e4 muuttujaa ei ole olemassa. T\u00e4m\u00e4 antaa virheilmoituksen:<\/p>\n
const val = maybeUndef ?? 2021;  <\/code><\/pre>\n
Mutta varovainen, t\u00e4m\u00e4 operaattori ei ole 100 % kuin kolmiosainen operaattori, joka palauttaa ensimm\u00e4isen puolen, jos arvioitu ehto on tosi. Se ei arvioi arvoja, jotka ovat tavallisesti v\u00e4\u00e4ri\u00e4 JavaScriptiss\u00e4<\/a>, arvoon false<\/code>. Esimerkiksi tyhj\u00e4\u00e4 merkkijonoa ei oteta huomioon false<\/code>:<\/p>\n
const someEmptyString = '';\nconst val = someEmptyString ?? 'fallback'; <\/code><\/pre>\n
Toisin kuin t\u00e4m\u00e4 nullish coalescing -operaattori, kolmiosainen operaattori olisi heitt\u00e4nyt fallback<\/code>t\u00e4m\u00e4n arvioinnin tuloksena.<\/p>\n
Valinnainen ketjutusoperaattori<\/h2>\n
\"5<\/a><\/p>\n
Ehdotus: https:\/\/github.com\/tc39\/proposal-optional-chaining<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-optional-chaining.html<\/a><\/p>\n
T\u00e4m\u00e4 operaattori toimii my\u00f6s muuttujien ja objektien ominaisuuksien kanssa: se tarkistaa, ovatko l\u00e4pik\u00e4ymi\u00e4mme sis\u00e4kk\u00e4isi\u00e4 ominaisuuksia olemassa vai eiv\u00e4t. Ilman t\u00e4t\u00e4 operaattoria meid\u00e4n on tarkistettava jokainen sis\u00e4kk\u00e4inen ominaisuus:<\/p>\n
const val = anObj && anObj.aProp && anObj.aProp.aNestedProp<\/code><\/pre>\n
Uuden valinnaisen ketjutusoperaattorin avulla voimme tehd\u00e4 jotain seuraavista:<\/p>\n
const val = anObj.aProp?.aNestedProp<\/code><\/pre>\n
T\u00e4m\u00e4 n\u00e4ytt\u00e4\u00e4 paljon selke\u00e4mm\u00e4lt\u00e4 ja sit\u00e4 on lyhyempi kirjoittaa. T\u00e4m\u00e4 operaattori toimii my\u00f6s numeeristen taulukoiden kanssa, joten kokoelmien kanssa on hyv\u00e4 ty\u00f6skennell\u00e4:<\/p>\n
const val = anObj.anArray[0]?.someProp<\/code><\/pre>\n
Ja voimme pinota useita operaattoreita:<\/p>\n
const val = anObj.anArray[0]?.someProp?.aNestedProp<\/code><\/pre>\n
Ent\u00e4 jos yhdist\u00e4mme t\u00e4m\u00e4n edelliseen, tyhj\u00e4\u00e4n yhteenliitt\u00e4miseen? Saamme syntaksin, joka tarkistaa, ett\u00e4 jokainen l\u00e4pik\u00e4ynyt omaisuus on olemassa, ja jos ei ole, tarjoaa varaarvon:<\/p>\n
const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'<\/code><\/pre>\n
Jos jotakin arvoista ei ole olemassa, se palauttaa someDefaultValue<\/code>. N\u00e4iden kahden operaattorin yhdist\u00e4minen on loistava tapa korvata lodash’s get -toiminto<\/a>.<\/p>\n
Putkilinjan operaattori<\/h2>\n
\"5<\/a><\/p>\n
Ehdotus: https:\/\/github.com\/tc39\/proposal-pipeline-operator<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-pipeline-op<\/a> e<\/a> rator<\/a><\/p>\n
T\u00e4m\u00e4 operaattori on osa useita kokeellisia JavaScript-ominaisuuksia, ja t\u00e4m\u00e4 tarjoaa paremman luettavuuden ketjutettaessa useita toimintoja yhteen. Harkitse seuraavaa toimintoa:<\/p>\n
const reverseWords = \n      str => str\n        .split( ' ') .reduce( (revStr, word) => [ word, ...revStr ], []) .join( ' ' );\n\nconsole.log( reverseWords( 'this is fun') ); <\/code><\/pre>\n
Jos meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 uudelleen n\u00e4it\u00e4 yhteen ketjutettuja osittaisia \u200b\u200bmuunnoksia, voimme jakaa ne eri funktioihin ja muodostaa sitten tuloksen niiden avulla:<\/p>\n
const splitBySpace = str => str.split( ' ' );\nconst reverseArray = arr => arr.reduce( (acc, cur) => [ cur, ...acc ], [] );\nconst joinWithSpace = arr => arr.join( ' ' );\n\nconst reverseWords =\n    str => joinWithSpace(\n        reverseArray(\n            splitBySpace(\n                str)) );\n\nconsole.log( reverseWords( 'this is fun') ); <\/code><\/pre>\n
Outoa t\u00e4ss\u00e4 on se, ett\u00e4 meid\u00e4n on aloitettava t\u00e4m\u00e4n lukeminen alhaalta, splitBySpace<\/code>rivilt\u00e4 yl\u00f6s, ymm\u00e4rt\u00e4\u00e4ksemme merkkijonoon sovelletut muunnokset. T\u00e4m\u00e4 on vastoin luonnollista lukuvirtaamme ylh\u00e4\u00e4lt\u00e4 alas. P\u00e4\u00e4dymme my\u00f6s kaikkiin niihin rumiin roikkuviin sulkeisiin. T\u00e4m\u00e4n voisi kirjoittaa yhdelle riville, eik\u00e4 se ole paljon kauniimpi:<\/p>\n
const reverseWords = str => joinWithSpace( reverseArray( splitBySpace( str)) );<\/code><\/pre>\n
T\u00e4ss\u00e4 meid\u00e4n on aloitettava lukeminen keskifunktiosta kohti ulompia funktioita tai oikealta vasemmalle, mik\u00e4 on vastoin intuitiivista l\u00e4nsimaiselle vasemmalta oikealle -lukemiselle.<\/p>\n
Liukulinjan operaattori voi tehd\u00e4 n\u00e4ist\u00e4 rakenteista paljon luettavampia ja samankaltaisia \u200b\u200bkuin ketjutus, joka meill\u00e4 oli alun perin ennen muunnosten siirt\u00e4mist\u00e4 erillisiin toimintoihin:<\/p>\n
const reverseWords =\n    str => str\n        |> splitBySpace\n        |> reverseArray\n        |> joinWithSpace;<\/code><\/pre>\n
Nyt k\u00e4ytetyt muunnokset on kirjoitettu samalla tavalla kuin kirjoitustapamme, ylh\u00e4\u00e4lt\u00e4 alas, ne ovat selke\u00e4mmin luettavia, eik\u00e4 meill\u00e4 ole sulkuja roikkumassa. Menestys!<\/p>\n
Numeroerotin<\/h2>\n
\"5<\/a><\/p>\n
Ehdotus: https:\/\/github.com\/tc39\/proposal-numeric-separator<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-numeric-separator.html<\/a><\/p>\n
T\u00e4m\u00e4 numeerinen erotin eroaa muista JavaScript-ominaisuuksista, koska se ei ole operaattori. Se on syntaksirakenne, joka tekee numeerisista literaaleista luettavampia luomalla visuaalisen erottelun numeroryhmien v\u00e4lille. Suuria numeerisia literaaleja on vaikea j\u00e4sent\u00e4\u00e4 ja ymm\u00e4rt\u00e4\u00e4 nopeasti, varsinkin kun numeroa toistetaan useita kertoja. Esimerkiksi:<\/p>\n
const longNum = 1000000000000;<\/code><\/pre>\n
Sit\u00e4 on vaikea ymm\u00e4rt\u00e4\u00e4 nopealla silm\u00e4yksell\u00e4. T\u00e4m\u00e4 erotin tekee siit\u00e4 luettavamman:<\/p>\n
const longNum = 1_000_000_000_000;<\/code><\/pre>\n
Nyt voimme nopeasti ymm\u00e4rt\u00e4\u00e4, ett\u00e4 t\u00e4m\u00e4 on biljoona.<\/p>\n
Tee ilmaisuja<\/h2>\n
\"5<\/a><\/p>\n
Ehdotus: https:\/\/github.com\/tc39\/proposal-do-expressions<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-do-expressions<\/a><\/p>\n
Viimeinen uusista JavaScript-ominaisuuksista, jonka k\u00e4ymme l\u00e4pi, on lauseke, joka voidaan arvioida. T\u00e4m\u00e4n lausekkeen tulos tulee sen j\u00e4lkeen, kun on suoritettu lohko, jonka sis\u00e4ll\u00e4 voi olla useita lauseita. Voimme helposti ymm\u00e4rt\u00e4\u00e4 do-lausekkeet, jos k\u00e4\u00e4nn\u00e4mme kolmiosaisen operaattorilausekkeen, kuten t\u00e4m\u00e4:<\/p>\n
const res = isCold( color )? 'light-blue': 'orange';<\/code><\/pre>\n
Kirjoittaisimme vastaavan do{}<\/code>lausekkeen n\u00e4in:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else {\n        'orange';\n    }\n};<\/code><\/pre>\n
Huomaa, ett\u00e4 meid\u00e4n ei tarvitse palauttaa arvoa, koska t\u00e4m\u00e4 ei ole funktio. Vaikka t\u00e4ss\u00e4 nimenomaisessa tapauksessa t\u00e4m\u00e4 voidaan kirjoittaa ytimekk\u00e4\u00e4mmin kolmiosaisena, do-lausekkeet ovat paljon tehokkaampia, mik\u00e4 mahdollistaa useiden lausumien, esimerkiksi:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else if (isHot( color)) {\n        'orange';\n    } else if (isRain( color)) {\n        'purple';\n    } else {\n        'green';\n    }\n};<\/code><\/pre>\n
T\u00e4m\u00e4 on todella tehokasta JSX:ss\u00e4, jossa voimme sekoittaa sen tagien kanssa ilman, ett\u00e4 meid\u00e4n tarvitsee ensin laskea tulosta ulkoisesti. Voisimme tehd\u00e4 esimerkiksi seuraavan, jos k\u00e4ytt\u00e4isimme Reactia<\/a> n\u00e4iden komponenttien hahmontamiseen:<\/p>\n
const MyComp = ({ color }) => ({\n            do {\n                if (isCold( color)) {\n                    ;\n                } else if (isHot( color)) {\n                    ;\n                } else if (isRain( color)) {\n                    ;\n                } else {\n                    ;\n                }\n            }\n        }\n\n);<\/code><\/pre>\n
Lis\u00e4\u00e4 JavaScript-ehdotuksia<\/h2>\n
Joka p\u00e4iv\u00e4 keskustellaan enemm\u00e4n ehdotuksista mielenkiintoisten ominaisuuksien lis\u00e4\u00e4miseksi JavaScript-kieleen. Yh\u00e4 kasvava luettelo n\u00e4ist\u00e4 ehdotetuista JavaScript-ominaisuuksista on luettavissa osoitteessa https:\/\/github.com\/tc39\/proposals#ecmascript-proposals<\/a>. T\u00e4ss\u00e4 esitetyt ehdotukset ovat l\u00e4hell\u00e4 valmistumista ja siten l\u00e4hell\u00e4 ECMAScript – standardiin lis\u00e4\u00e4mist\u00e4, kuten t\u00e4ss\u00e4 hyv\u00e4ksymisprosessia<\/a> kuvaavassa taulukossa selitet\u00e4\u00e4n .<\/p>\n
Jotkut t\u00e4ss\u00e4 artikkelissa tutkimistamme uusista JavaScript-ominaisuuksista, kuten do-lausekkeet tai liukuhihnaoperaattori, ovat vaiheen 1 ehdotuksia<\/a>, mik\u00e4 tarkoittaa, ett\u00e4 niill\u00e4 on viel\u00e4 teht\u00e4v\u00e4\u00e4, ennen kuin niist\u00e4 tulee osa ECMAScript-standardia.<\/p>\n
:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Opi viidest\u00e4 uudesta JavaScript-ominaisuudesta, operaattorista ja lausekkeesta, jotka parantavat koodiasi tehden siit\u00e4 luettavamman ja tehokkaamman.<\/p>\n","protected":false},"author":1,"featured_media":157555,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[750,730,719,895,843],"tags":[1166],"class_list":["post-232314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-avoin-laehdekoodi","category-javascript-5","category-kehittaejae","category-koodi","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/232314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=232314"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/232314\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/157555"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=232314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=232314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=232314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}