{"id":231687,"date":"2023-01-12T11:26:00","date_gmt":"2023-01-12T08:26:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231687"},"modified":"2022-12-25T18:51:40","modified_gmt":"2022-12-25T15:51:40","slug":"5-najnowoczesniejszych-funkcji-javascript-ktore-ulepsza-twoj-kod","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/5-najnowoczesniejszych-funkcji-javascript-ktore-ulepsza-twoj-kod\/","title":{"rendered":"5 najnowocze\u015bniejszych funkcji JavaScript, kt\u00f3re ulepsz\u0105 Tw\u00f3j kod"},"content":{"rendered":"\n

Funkcje JavaScript ci\u0105gle si\u0119 rozwijaj\u0105 i otrzymuj\u0105 nowe, takie jak operatory, konstrukcje sk\u0142adni, wyra\u017cenia. Wiele z nich zosta\u0142o wprowadzonych w ostatnich latach, a niekt\u00f3re z nich s\u0105 ju\u017c drug\u0105 natur\u0105, jak na przyk\u0142ad wyra\u017cenie grubej strza\u0142ki lub operator =><\/code>rozprzestrzeniania obiektu ....<\/code><\/p>\n

Funkcje JavaScript zaczynaj\u0105 si\u0119 jako propozycje<\/h2>\n

Wszystkie te funkcje JavaScript zaczynaj\u0105 si\u0119 jako propozycje przes\u0142ane do TC 39. Komitet Techniczny 39<\/a> odpowiada za standaryzacj\u0119:<\/p>\n

\n

uniwersalny, wieloplatformowy, niezale\u017cny od dostawcy j\u0119zyk programowania ECMAScript (JavaScript). Obejmuje to sk\u0142adni\u0119 j\u0119zyka, semantyk\u0119 i biblioteki oraz technologie uzupe\u0142niaj\u0105ce, kt\u00f3re obs\u0142uguj\u0105 j\u0119zyk.<\/p>\n<\/blockquote>\n

Istnieje wiele propozycji JavaScript, kt\u00f3re mo\u017cemy zacz\u0105\u0107 dodawa\u0107 do naszego przep\u0142ywu ju\u017c dzi\u015b, dzi\u0119ki Babel, kompilatorowi JavaScript<\/a>. Niekt\u00f3re z nich oferuj\u0105 wi\u0119ksz\u0105 przejrzysto\u015b\u0107, jak np. separator liczbowy. Inne, takie jak do<\/code>wyra\u017cenia, wprowadzaj\u0105 mo\u017cliwo\u015b\u0107 mieszania z\u0142o\u017conych warunk\u00f3w warunkowych ze znacznikami React JSX.<\/p>\n

Przyjrzyjmy si\u0119 w tym artykule 5 funkcjom JavaScript, kt\u00f3re s\u0105 nadal w fazie propozycji, ale kt\u00f3rych mo\u017cemy u\u017cywa\u0107 z Babel i kt\u00f3re znacznie poprawi\u0105 Twoje wra\u017cenia z kodowania.<\/p>\n

Ka\u017cda z nich ma \u0142\u0105cze do swojej strony Babel, na kt\u00f3rej mo\u017cna zobaczy\u0107, jak skonfigurowa\u0107 Babel, aby z niej korzysta\u0107, chocia\u017c proponowane funkcje JavaScript opisane tutaj s\u0105 ju\u017c zawarte w Babel 7. Ka\u017cda sekcja ma r\u00f3wnie\u017c \u0142\u0105cze do swojej propozycji w organizacji Ecma TC39<\/a> na GitHub<\/a>.<\/p>\n

Zerowy operator koalescencyjny<\/h2>\n

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

Propozycja: 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

Ta propozycja JavaScript opisuje operator, kt\u00f3ry umo\u017cliwia podanie warto\u015bci zast\u0119pczej po prawej stronie operatora, gdy zmienna lub w\u0142a\u015bciwo\u015b\u0107 obiektu jest niezdefiniowana. Je\u015bli nie jest nieokre\u015blony, u\u017cyje lewej strony operatora:<\/p>\n

const maybeUndef = undefined;\nconst val = maybeUndef ?? 2021; <\/code><\/pre>\n
Jest to podobne do pisania go jako operatora tr\u00f3jargumentowego:<\/p>\n
const maybeUndef = undefined;\nconst val = maybeUndef? maybeUndef: 2021; <\/code><\/pre>\n
Zauwa\u017c, \u017ce ten operator nie sprawdza, czy var nie istnieje. Spowoduje to zg\u0142oszenie b\u0142\u0119du:<\/p>\n
const val = maybeUndef ?? 2021;  <\/code><\/pre>\n
Ale uwa\u017caj, ten operator nie jest w 100% podobny do operatora tr\u00f3jsk\u0142adnikowego, kt\u00f3ry zwraca pierwsz\u0105 stron\u0119, je\u015bli oceniany warunek jest prawdziwy. Nie b\u0119dzie ocenia\u0107 warto\u015bci, kt\u00f3re zwykle s\u0105 fa\u0142szywe w JavaScript<\/a> do false<\/code>. Na przyk\u0142ad pusty ci\u0105g nie b\u0119dzie brany pod uwag\u0119 false<\/code>:<\/p>\n
const someEmptyString = '';\nconst val = someEmptyString ?? 'fallback'; <\/code><\/pre>\n
W przeciwie\u0144stwie do tego pustego operatora koalescencyjnego, operator tr\u00f3jargumentowy zosta\u0142by zg\u0142oszony fallback<\/code>w wyniku tej oceny.<\/p>\n
Opcjonalny operator \u0142a\u0144cucha<\/h2>\n
\"5<\/a><\/p>\n
Propozycja: 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
Ten operator dzia\u0142a r\u00f3wnie\u017c na zmiennych i w\u0142a\u015bciwo\u015bciach obiekt\u00f3w: sprawdza, czy zagnie\u017cd\u017cone w\u0142a\u015bciwo\u015bci, przez kt\u00f3re przechodzimy, istniej\u0105, czy nie. Bez tego operatora musimy sprawdzi\u0107 ka\u017cd\u0105 zagnie\u017cd\u017con\u0105 w\u0142a\u015bciwo\u015b\u0107:<\/p>\n
const val = anObj && anObj.aProp && anObj.aProp.aNestedProp<\/code><\/pre>\n
Dzi\u0119ki nowemu opcjonalnemu operatorowi \u0142\u0105czenia \u0142a\u0144cuchowego mo\u017cemy zrobi\u0107 co\u015b takiego:<\/p>\n
const val = anObj.aProp?.aNestedProp<\/code><\/pre>\n
Wygl\u0105da to znacznie ja\u015bniej i jest kr\u00f3tsze do pisania. Ten operator dzia\u0142a r\u00f3wnie\u017c z tablicami liczbowymi, wi\u0119c dobrze jest pracowa\u0107 z kolekcjami:<\/p>\n
const val = anObj.anArray[0]?.someProp<\/code><\/pre>\n
I mo\u017cemy \u0142\u0105czy\u0107 wiele operator\u00f3w:<\/p>\n
const val = anObj.anArray[0]?.someProp?.aNestedProp<\/code><\/pre>\n
A co je\u015bli po\u0142\u0105czymy to z poprzedni\u0105, zerow\u0105 koalescencj\u0105? Otrzymujemy sk\u0142adni\u0119, kt\u00f3ra sprawdza, czy ka\u017cda przemierzana w\u0142a\u015bciwo\u015b\u0107 istnieje, a je\u015bli nie, dostarcza warto\u015b\u0107 zast\u0119pcz\u0105:<\/p>\n
const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'<\/code><\/pre>\n
Je\u015bli kt\u00f3rakolwiek z warto\u015bci nie istnieje, zwr\u00f3ci someDefaultValue<\/code>. Po\u0142\u0105czenie tych dw\u00f3ch operator\u00f3w to \u015bwietny spos\u00f3b na zast\u0105pienie funkcji get<\/a> lodash .<\/p>\n
Operator ruroci\u0105gu<\/h2>\n
\"5<\/a><\/p>\n
Propozycja: https:\/\/github.com\/tc39\/proposal-pipeline-operator<\/a><\/p>\n
Babel :<\/a> https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-pipeline-op<\/a> erator<\/a><\/a><\/p>\n
Ten operator jest cz\u0119\u015bci\u0105 kilku eksperymentalnych funkcji JavaScript, a ten zapewnia wi\u0119ksz\u0105 czytelno\u015b\u0107 podczas \u0142\u0105czenia kilku funkcji. Rozwa\u017c nast\u0119puj\u0105c\u0105 funkcj\u0119:<\/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
Je\u015bli musimy ponownie wykorzysta\u0107 te cz\u0119\u015bciowe przekszta\u0142cenia, kt\u00f3re s\u0105 ze sob\u0105 po\u0142\u0105czone, mo\u017cemy podzieli\u0107 je na r\u00f3\u017cne funkcje, a nast\u0119pnie skomponowa\u0107 wynik za ich pomoc\u0105:<\/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
Dziwne w tym jest to, \u017ce musimy zacz\u0105\u0107 czyta\u0107 to od do\u0142u, od splitBySpace<\/code>linii do g\u00f3ry, aby zrozumie\u0107 transformacje zastosowane do \u0142a\u0144cucha. Jest to sprzeczne z naszym naturalnym przep\u0142ywem czytania, od g\u00f3ry do do\u0142u. Mamy te\u017c wszystkie te brzydkie zwisaj\u0105ce nawiasy. Mo\u017cna to zapisa\u0107 w jednej linijce i nie jest to du\u017co \u0142adniejsze:<\/p>\n
const reverseWords = str => joinWithSpace( reverseArray( splitBySpace( str)) );<\/code><\/pre>\n
Tutaj musimy zacz\u0105\u0107 czyta\u0107 od funkcji centralnej w kierunku funkcji zewn\u0119trznych lub od prawej do lewej, co jest sprzeczne z intuicj\u0105 w przypadku czytania zachodniego od lewej do prawej.<\/p>\n
Operator potoku mo\u017ce uczyni\u0107 te konstrukcje znacznie bardziej czytelnymi i podobnymi do tworzenia \u0142a\u0144cuch\u00f3w, kt\u00f3re mieli\u015bmy pierwotnie przed przeniesieniem transformacji do oddzielnych funkcji:<\/p>\n
const reverseWords =\n    str => str\n        |> splitBySpace\n        |> reverseArray\n        |> joinWithSpace;<\/code><\/pre>\n
Teraz zastosowane przekszta\u0142cenia s\u0105 pisane podobnie do naszego sposobu pisania, od g\u00f3ry do do\u0142u, s\u0105 bardziej czytelne i nie mamy \u017cadnych zwisaj\u0105cych nawias\u00f3w. Powodzenie!<\/p>\n
Separator liczbowy<\/h2>\n
\"5<\/a><\/p>\n
Propozycja: 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
Ten separator liczbowy r\u00f3\u017cni si\u0119 od innych funkcji JavaScript, poniewa\u017c nie jest operatorem. Jest to konstrukcja sk\u0142adni, kt\u00f3ra sprawia, \u017ce \u200b\u200blitera\u0142y numeryczne s\u0105 bardziej czytelne, tworz\u0105c wizualn\u0105 separacj\u0119 mi\u0119dzy grupami cyfr. Du\u017ce litera\u0142y numeryczne s\u0105 trudne do przeanalizowania i szybkiego zrozumienia, szczeg\u00f3lnie gdy cyfra jest powtarzana wiele razy. Na przyk\u0142ad:<\/p>\n
const longNum = 1000000000000;<\/code><\/pre>\n
Trudno to zrozumie\u0107 na pierwszy rzut oka. Ten separator sprawia, \u017ce \u200b\u200bjest bardziej czytelny:<\/p>\n
const longNum = 1_000_000_000_000;<\/code><\/pre>\n
Teraz mo\u017cemy szybko zrozumie\u0107, \u017ce to bilion.<\/p>\n
Czy wyra\u017cenia<\/h2>\n
\"5<\/a><\/p>\n
Propozycja: https:\/\/github.com\/tc39\/proposal-do-expressions<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-do-expressions<\/a><\/p>\n
Ostatni\u0105 z nowych funkcji JavaScript, przez kt\u00f3r\u0105 przejdziemy, jest wyra\u017cenie, kt\u00f3re mo\u017ce zosta\u0107 ocenione. Wynik tego wyra\u017cenia pojawia si\u0119 po wykonaniu bloku, kt\u00f3ry mo\u017ce zawiera\u0107 wiele instrukcji. Mo\u017cemy \u0142atwo zrozumie\u0107 wyra\u017cenia do, je\u015bli przet\u0142umaczymy wyra\u017cenie z operatorem tr\u00f3jsk\u0142adnikowym, takie jak to:<\/p>\n
const res = isCold( color )? 'light-blue': 'orange';<\/code><\/pre>\n
R\u00f3wnowa\u017cne do{}<\/code>wyra\u017cenie napisaliby\u015bmy tak:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else {\n        'orange';\n    }\n};<\/code><\/pre>\n
Zauwa\u017c, \u017ce nie musimy zwraca\u0107 warto\u015bci, poniewa\u017c nie jest to funkcja. Chocia\u017c w tym konkretnym przypadku mo\u017cna to napisa\u0107 bardziej zwi\u0119\u017ale jako tr\u00f3jk\u0119, wyra\u017cenia do s\u0105 znacznie bardziej wydajne, pozwalaj\u0105c na wiele instrukcji, na przyk\u0142ad:<\/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
To, co jest naprawd\u0119 pot\u0119\u017cne, to JSX, gdzie mo\u017cemy miesza\u0107 go z jego tagami bez konieczno\u015bci wcze\u015bniejszego obliczania wyniku zewn\u0119trznie. Na przyk\u0142ad, gdyby\u015bmy u\u017cywali Reacta<\/a> do renderowania tych komponent\u00f3w, mogliby\u015bmy zrobi\u0107 to:<\/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
Wi\u0119cej propozycji JavaScript<\/h2>\n
Codziennie omawianych jest coraz wi\u0119cej propozycji dodania ciekawszych funkcji do j\u0119zyka JavaScript. Ci\u0105gle rosn\u0105c\u0105 list\u0119 proponowanych funkcji JavaScript mo\u017cna przeczyta\u0107 pod adresem https:\/\/github.com\/tc39\/proposals#ecmascript-proposals<\/a>. Przedstawione tu propozycje s\u0105 bliskie uko\u0144czenia, a zatem bliskie dodania do standardu ECMAScript, jak wyja\u015bniono w tej tabeli, kt\u00f3ra opisuje proces akceptacji<\/a>.<\/p>\n
Niekt\u00f3re z nowych funkcji JavaScript, kt\u00f3re om\u00f3wili\u015bmy w tym artykule, takie jak wyra\u017cenia do lub operator potoku, s\u0105 propozycjami etapu 1<\/a>, co oznacza, \u017ce \u200b\u200bnadal maj\u0105 przed sob\u0105 drog\u0119, zanim stan\u0105 si\u0119 cz\u0119\u015bci\u0105 standardu ECMAScript.<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Poznaj 5 nowych funkcji, operator\u00f3w i wyra\u017ce\u0144 JavaScript, kt\u00f3re poprawi\u0105 Tw\u00f3j kod, czyni\u0105c go bardziej czytelnym i wydajnym.<\/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":[721,732,897,752,845],"tags":[1169],"class_list":["post-231687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-javascript-7","category-kod","category-otwarte-zrodlo","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/231687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=231687"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/231687\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/157555"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=231687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=231687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=231687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}