{"id":231783,"date":"2023-01-12T11:38:00","date_gmt":"2023-01-12T08:38:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231783"},"modified":"2022-11-10T05:12:11","modified_gmt":"2022-11-10T02:12:11","slug":"5-banbrytande-javascript-funktioner-foer-att-foerbaettra-din-kod","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/5-banbrytande-javascript-funktioner-foer-att-foerbaettra-din-kod\/","title":{"rendered":"5 banbrytande JavaScript-funktioner f\u00f6r att f\u00f6rb\u00e4ttra din kod"},"content":{"rendered":"\n

JavaScript-funktioner v\u00e4xer alltid och f\u00e5r nya som operatorer, syntaxkonstruktioner, uttryck. M\u00e5nga som har introducerats under de senaste \u00e5ren och n\u00e5gra av dem \u00e4r redan andra natur, som =><\/code>uttrycket fet pil eller objektspridningsoperatorn ...<\/code>.<\/p>\n

JavaScript-funktioner b\u00f6rjar som f\u00f6rslag<\/h2>\n

Alla dessa JavaScript-funktioner b\u00f6rjar som f\u00f6rslag som skickas till TC 39. Den tekniska kommitt\u00e9n 39<\/a> ansvarar f\u00f6r att standardisera:<\/p>\n

\n

det generella, plattformsoberoende, leverant\u00f6rsneutrala programmeringsspr\u00e5ket ECMAScript (JavaScript). Detta inkluderar spr\u00e5ksyntax, semantik och bibliotek och kompletterande teknologier som st\u00f6der spr\u00e5ket.<\/p>\n<\/blockquote>\n

Det finns m\u00e5nga JavaScript-f\u00f6rslag som vi kan b\u00f6rja l\u00e4gga till i v\u00e5rt fl\u00f6de idag, tack vare Babel, JavaScript-kompilatorn<\/a>. Vissa av dem ger mer klarhet, som den numeriska avgr\u00e4nsaren. Andra, som do<\/code>uttrycken, introducerar m\u00f6jligheten att ha komplexa villkor blandade med React JSX-taggar.<\/p>\n

L\u00e5t oss i den h\u00e4r artikeln titta p\u00e5 5 JavaScript-funktioner som fortfarande \u00e4r i f\u00f6rslagsstadierna men som vi kan anv\u00e4nda med Babel och kommer att avsev\u00e4rt f\u00f6rb\u00e4ttra din kodningsupplevelse.<\/p>\n

Var och en har en l\u00e4nk till sin Babel-sida d\u00e4r du kan se hur du konfigurerar Babel att anv\u00e4nda den, \u00e4ven om de f\u00f6reslagna JavaScript-funktionerna som beskrivs h\u00e4r redan ing\u00e5r i Babel 7. Varje avsnitt har ocks\u00e5 en l\u00e4nk till sitt f\u00f6rslag i Ecma TC39-<\/a> organisationen p\u00e5 GitHub<\/a>.<\/p>\n

Ogiltig koalescerande operat\u00f6r<\/h2>\n

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

F\u00f6rslag: 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

Detta JavaScript-f\u00f6rslag beskriver en operator som g\u00f6r det m\u00f6jligt att tillhandah\u00e5lla ett reservv\u00e4rde p\u00e5 h\u00f6ger sida om operatorn n\u00e4r en variabel eller en objektegenskap \u00e4r odefinierad. Om det inte \u00e4r odefinierat kommer det att anv\u00e4nda v\u00e4nster sida av operatorn:<\/p>\n

const maybeUndef = undefined;\nconst val = maybeUndef ?? 2021; <\/code><\/pre>\n
Detta liknar att skriva det som en tern\u00e4r operator:<\/p>\n
const maybeUndef = undefined;\nconst val = maybeUndef? maybeUndef: 2021; <\/code><\/pre>\n
Observera att den h\u00e4r operat\u00f6ren inte kontrollerar att varan inte finns. Detta ger ett felmeddelande:<\/p>\n
const val = maybeUndef ?? 2021;  <\/code><\/pre>\n
Men f\u00f6rsiktig, denna operator \u00e4r inte 100 % som en tern\u00e4r operator som returnerar den f\u00f6rsta sidan om det utv\u00e4rderade villkoret \u00e4r sant. Det kommer inte att utv\u00e4rdera v\u00e4rden som vanligtvis \u00e4r falska i JavaScript<\/a> till false<\/code>. Till exempel kommer en tom str\u00e4ng inte att beaktas false<\/code>:<\/p>\n
const someEmptyString = '';\nconst val = someEmptyString ?? 'fallback'; <\/code><\/pre>\n
Till skillnad fr\u00e5n denna nullish koalescerande operat\u00f6r, skulle en tern\u00e4r operat\u00f6r ha kastat fallback<\/code>som ett resultat av denna utv\u00e4rdering.<\/p>\n
Valfri kedjeoperat\u00f6r<\/h2>\n
\"5<\/a><\/p>\n
F\u00f6rslag: 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
Den h\u00e4r operatorn fungerar ocks\u00e5 p\u00e5 variabler och objektegenskaper: den kontrollerar om de kapslade egenskaperna som vi g\u00e5r igenom finns eller inte. Utan den h\u00e4r operatorn m\u00e5ste vi kontrollera varje kapslad egenskap:<\/p>\n
const val = anObj && anObj.aProp && anObj.aProp.aNestedProp<\/code><\/pre>\n
Med den nya valfria kedjeoperat\u00f6ren kan vi g\u00f6ra n\u00e5got som:<\/p>\n
const val = anObj.aProp?.aNestedProp<\/code><\/pre>\n
Det h\u00e4r ser mycket tydligare ut och det \u00e4r kortare att skriva. Den h\u00e4r operatorn fungerar ocks\u00e5 med numeriska arrayer, s\u00e5 det \u00e4r bra att arbeta med samlingar:<\/p>\n
const val = anObj.anArray[0]?.someProp<\/code><\/pre>\n
Och vi kan stapla flera operat\u00f6rer:<\/p>\n
const val = anObj.anArray[0]?.someProp?.aNestedProp<\/code><\/pre>\n
Och vad h\u00e4nder om vi kombinerar detta med det f\u00f6reg\u00e5ende, nullish coalescing? Vi f\u00e5r en syntax som kontrollerar att varje genomk\u00f6rd egenskap finns, och om den inte g\u00f6r det, ger ett reservv\u00e4rde:<\/p>\n
const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'<\/code><\/pre>\n
Om n\u00e5got av v\u00e4rdena inte finns kommer det att returnera someDefaultValue<\/code>. Att kombinera dessa tv\u00e5 operat\u00f6rer \u00e4r ett bra s\u00e4tt att ers\u00e4tta lodashs get-funktion<\/a>.<\/p>\n
R\u00f6rledningsoperat\u00f6r<\/h2>\n
\"5<\/a><\/p>\n
F\u00f6rslag: 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
Den h\u00e4r operat\u00f6ren \u00e4r en del av flera experimentella JavaScript-funktioner, och den h\u00e4r ger mer l\u00e4sbarhet n\u00e4r flera funktioner kopplas samman. T\u00e4nk p\u00e5 f\u00f6ljande funktion:<\/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
Om vi \u200b\u200bbeh\u00f6ver \u00e5teranv\u00e4nda dessa partiella transformationer som \u00e4r kedjade samman, kan vi dela upp dem i olika funktioner och sedan komponera resultatet med hj\u00e4lp av dem:<\/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
Det som \u00e4r konstigt med det h\u00e4r \u00e4r att vi m\u00e5ste b\u00f6rja l\u00e4sa detta fr\u00e5n botten, splitBySpace<\/code>linjen, till toppen, f\u00f6r att f\u00f6rst\u00e5 transformationerna som till\u00e4mpas p\u00e5 str\u00e4ng. Detta g\u00e5r emot v\u00e5rt naturliga l\u00e4sfl\u00f6de, fr\u00e5n topp till botten. Vi slutar ocks\u00e5 med alla de d\u00e4r fula dinglande parenteserna. Detta kan skrivas p\u00e5 en rad och det \u00e4r inte mycket vackrare:<\/p>\n
const reverseWords = str => joinWithSpace( reverseArray( splitBySpace( str)) );<\/code><\/pre>\n
H\u00e4r m\u00e5ste vi b\u00f6rja l\u00e4sa fr\u00e5n mittfunktionen mot de yttre funktionerna, eller fr\u00e5n h\u00f6ger till v\u00e4nster, vilket \u00e4r kontraintuitivt f\u00f6r v\u00e4sterl\u00e4ndsk v\u00e4nster-till-h\u00f6ger-l\u00e4sning.<\/p>\n
R\u00f6rledningsoperat\u00f6ren kan g\u00f6ra dessa konstruktioner mycket mer l\u00e4sbara och liknar den kedja vi ursprungligen hade innan vi flyttade transformationerna till separata funktioner:<\/p>\n
const reverseWords =\n    str => str\n        |> splitBySpace\n        |> reverseArray\n        |> joinWithSpace;<\/code><\/pre>\n
Nu \u00e4r de omvandlingar som till\u00e4mpas skrivna p\u00e5 samma s\u00e4tt som v\u00e5rt s\u00e4tt att skriva, uppifr\u00e5n och ned, de \u00e4r mer tydliga att l\u00e4sa och vi har inga parenteser som dinglar runt. Framg\u00e5ng!<\/p>\n
Numerisk separator<\/h2>\n
\"5<\/a><\/p>\n
F\u00f6rslag: 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
Denna numeriska avgr\u00e4nsare skiljer sig fr\u00e5n de andra JavaScript-funktionerna eftersom den inte \u00e4r en operat\u00f6r. Det \u00e4r en syntaxkonstruktion som g\u00f6r numeriska bokstaver mer l\u00e4sbara genom att skapa en visuell separation mellan grupper av siffror. Stora numeriska bokstaver \u00e4r sv\u00e5ra att tolka och f\u00f6rst\u00e5 snabbt, s\u00e4rskilt n\u00e4r en siffra upprepas flera g\u00e5nger. Till exempel:<\/p>\n
const longNum = 1000000000000;<\/code><\/pre>\n
Det \u00e4r sv\u00e5rt att f\u00f6rst\u00e5 med en snabb blick. Denna separator g\u00f6r den mer l\u00e4sbar:<\/p>\n
const longNum = 1_000_000_000_000;<\/code><\/pre>\n
Nu kan vi snabbt f\u00f6rst\u00e5 att det h\u00e4r \u00e4r en biljon.<\/p>\n
G\u00f6r uttryck<\/h2>\n
\"5<\/a><\/p>\n
F\u00f6rslag: https:\/\/github.com\/tc39\/proposal-do-expressions<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-do-expressions<\/a><\/p>\n
Den sista av de nya JavaScript-funktionerna som vi kommer att g\u00e5 igenom \u00e4r ett uttryck som kan utv\u00e4rderas. Resultatet av detta uttryck kommer efter exekvering av ett block som kan ha flera satser inuti. Vi kan l\u00e4tt f\u00f6rst\u00e5 do-uttryck om vi \u00f6vers\u00e4tter ett tern\u00e4rt operatoruttryck som det h\u00e4r:<\/p>\n
const res = isCold( color )? 'light-blue': 'orange';<\/code><\/pre>\n
Vi skulle skriva motsvarande do{}<\/code>uttryck s\u00e5 h\u00e4r:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else {\n        'orange';\n    }\n};<\/code><\/pre>\n
Observera att vi inte beh\u00f6ver returnera v\u00e4rdet eftersom detta inte \u00e4r en funktion. \u00c4ven om detta i det h\u00e4r speciella fallet kan skrivas mer kortfattat som en tern\u00e4r, \u00e4r do-uttrycken mycket kraftfullare, vilket till\u00e5ter flera uttalanden, till exempel:<\/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
D\u00e4r detta \u00e4r riktigt kraftfullt \u00e4r i JSX, d\u00e4r vi kan blanda det med dess taggar utan att beh\u00f6va ber\u00e4kna resultatet externt f\u00f6rst. Till exempel skulle vi kunna g\u00f6ra f\u00f6ljande om vi anv\u00e4nde React<\/a> f\u00f6r att rendera dessa komponenter:<\/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
Fler JavaScript-f\u00f6rslag<\/h2>\n
Det finns fler f\u00f6rslag som diskuteras varje dag f\u00f6r att l\u00e4gga till fler intressanta funktioner till JavaScript-spr\u00e5ket. En st\u00e4ndigt v\u00e4xande lista \u00f6ver dessa f\u00f6reslagna JavaScript-funktioner kan l\u00e4sas p\u00e5 https:\/\/github.com\/tc39\/proposals#ecmascript-proposals<\/a>. F\u00f6rslagen h\u00e4r \u00e4r n\u00e4ra att slutf\u00f6ras och d\u00e4rmed n\u00e4ra att l\u00e4ggas till i ECMAScript-standarden som f\u00f6rklaras i denna tabell som beskriver godk\u00e4nnandeprocessen<\/a>.<\/p>\n
N\u00e5gra av de nya JavaScript-funktionerna som vi utforskade i den h\u00e4r artikeln, som do-uttrycken eller pipeline-operat\u00f6ren, \u00e4r steg 1-f\u00f6rslag<\/a>, vilket inneb\u00e4r att de fortfarande har en v\u00e4g att g\u00e5 innan de blir en del av ECMAScript-standarden.<\/p>\n
Inspelningsk\u00e4lla:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
L\u00e4r dig om 5 nya JavaScript-funktioner, operatorer och uttryck som kommer att f\u00f6rb\u00e4ttra din kod, g\u00f6ra den mer l\u00e4sbar och effektiv.<\/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":[848,734,901,755,724],"tags":[1173],"class_list":["post-231783","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-javascript-9","category-koda","category-oeppen-kaella","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/231783","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=231783"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/231783\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/157555"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=231783"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=231783"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=231783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}