5 banbrytande JavaScript-funktioner för att förbättra din kod

JavaScript-funktioner växer alltid och får nya som operatorer, syntaxkonstruktioner, uttryck. Många som har introducerats under de senaste åren och några av dem är redan andra natur, som =>uttrycket fet pil eller objektspridningsoperatorn ....

JavaScript-funktioner börjar som förslag

Alla dessa JavaScript-funktioner börjar som förslag som skickas till TC 39. Den tekniska kommittén 39 ansvarar för att standardisera:

det generella, plattformsoberoende, leverantörsneutrala programmeringsspråket ECMAScript (JavaScript). Detta inkluderar språksyntax, semantik och bibliotek och kompletterande teknologier som stöder språket.

Det finns många JavaScript-förslag som vi kan börja lägga till i vårt flöde idag, tack vare Babel, JavaScript-kompilatorn. Vissa av dem ger mer klarhet, som den numeriska avgränsaren. Andra, som douttrycken, introducerar möjligheten att ha komplexa villkor blandade med React JSX-taggar.

Låt oss i den här artikeln titta på 5 JavaScript-funktioner som fortfarande är i förslagsstadierna men som vi kan använda med Babel och kommer att avsevärt förbättra din kodningsupplevelse.

Var och en har en länk till sin Babel-sida där du kan se hur du konfigurerar Babel att använda den, även om de föreslagna JavaScript-funktionerna som beskrivs här redan ingår i Babel 7. Varje avsnitt har också en länk till sitt förslag i Ecma TC39- organisationen på GitHub.

Ogiltig koalescerande operatör

Förslag: https://github.com/tc39/proposal-nullish-coalescing

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-nullish-coalescing-operator.html

Detta JavaScript-förslag beskriver en operator som gör det möjligt att tillhandahålla ett reservvärde på höger sida om operatorn när en variabel eller en objektegenskap är odefinierad. Om det inte är odefinierat kommer det att använda vänster sida av operatorn:

const maybeUndef = undefined;
const val = maybeUndef ?? 2021; 

Detta liknar att skriva det som en ternär operator:

const maybeUndef = undefined;
const val = maybeUndef? maybeUndef: 2021; 

Observera att den här operatören inte kontrollerar att varan inte finns. Detta ger ett felmeddelande:

const val = maybeUndef ?? 2021;  

Men försiktig, denna operator är inte 100 % som en ternär operator som returnerar den första sidan om det utvärderade villkoret är sant. Det kommer inte att utvärdera värden som vanligtvis är falska i JavaScript till false. Till exempel kommer en tom sträng inte att beaktas false:

const someEmptyString = '';
const val = someEmptyString ?? 'fallback'; 

Till skillnad från denna nullish koalescerande operatör, skulle en ternär operatör ha kastat fallbacksom ett resultat av denna utvärdering.

Valfri kedjeoperatör

Förslag: https://github.com/tc39/proposal-optional-chaining

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining.html

Den här operatorn fungerar också på variabler och objektegenskaper: den kontrollerar om de kapslade egenskaperna som vi går igenom finns eller inte. Utan den här operatorn måste vi kontrollera varje kapslad egenskap:

const val = anObj && anObj.aProp && anObj.aProp.aNestedProp

Med den nya valfria kedjeoperatören kan vi göra något som:

const val = anObj.aProp?.aNestedProp

Det här ser mycket tydligare ut och det är kortare att skriva. Den här operatorn fungerar också med numeriska arrayer, så det är bra att arbeta med samlingar:

const val = anObj.anArray[0]?.someProp

Och vi kan stapla flera operatörer:

const val = anObj.anArray[0]?.someProp?.aNestedProp

Och vad händer om vi kombinerar detta med det föregående, nullish coalescing? Vi får en syntax som kontrollerar att varje genomkörd egenskap finns, och om den inte gör det, ger ett reservvärde:

const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'

Om något av värdena inte finns kommer det att returnera someDefaultValue. Att kombinera dessa två operatörer är ett bra sätt att ersätta lodashs get-funktion.

Rörledningsoperatör

Förslag: https://github.com/tc39/proposal-pipeline-operator

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-op e rator

Den här operatören är en del av flera experimentella JavaScript-funktioner, och den här ger mer läsbarhet när flera funktioner kopplas samman. Tänk på följande funktion:

Om vi ​​behöver återanvända dessa partiella transformationer som är kedjade samman, kan vi dela upp dem i olika funktioner och sedan komponera resultatet med hjälp av dem:

Det som är konstigt med det här är att vi måste börja läsa detta från botten, splitBySpacelinjen, till toppen, för att förstå transformationerna som tillämpas på sträng. Detta går emot vårt naturliga läsflöde, från topp till botten. Vi slutar också med alla de där fula dinglande parenteserna. Detta kan skrivas på en rad och det är inte mycket vackrare:

Här måste vi börja läsa från mittfunktionen mot de yttre funktionerna, eller från höger till vänster, vilket är kontraintuitivt för västerländsk vänster-till-höger-läsning.

Rörledningsoperatören kan göra dessa konstruktioner mycket mer läsbara och liknar den kedja vi ursprungligen hade innan vi flyttade transformationerna till separata funktioner:

Nu är de omvandlingar som tillämpas skrivna på samma sätt som vårt sätt att skriva, uppifrån och ned, de är mer tydliga att läsa och vi har inga parenteser som dinglar runt. Framgång!

Numerisk separator

Förslag: https://github.com/tc39/proposal-numeric-separator

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-numeric-separator.html

Denna numeriska avgränsare skiljer sig från de andra JavaScript-funktionerna eftersom den inte är en operatör. Det är en syntaxkonstruktion som gör numeriska bokstaver mer läsbara genom att skapa en visuell separation mellan grupper av siffror. Stora numeriska bokstaver är svåra att tolka och förstå snabbt, särskilt när en siffra upprepas flera gånger. Till exempel:

const longNum = 1000000000000;

Det är svårt att förstå med en snabb blick. Denna separator gör den mer läsbar:

const longNum = 1_000_000_000_000;

Nu kan vi snabbt förstå att det här är en biljon.

Gör uttryck

Förslag: https://github.com/tc39/proposal-do-expressions

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions

Den sista av de nya JavaScript-funktionerna som vi kommer att gå igenom är ett uttryck som kan utvärderas. Resultatet av detta uttryck kommer efter exekvering av ett block som kan ha flera satser inuti. Vi kan lätt förstå do-uttryck om vi översätter ett ternärt operatoruttryck som det här:

const res = isCold( color )? 'light-blue': 'orange';

Vi skulle skriva motsvarande do{}uttryck så här:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else {
        'orange';
    }
};

Observera att vi inte behöver returnera värdet eftersom detta inte är en funktion. Även om detta i det här speciella fallet kan skrivas mer kortfattat som en ternär, är do-uttrycken mycket kraftfullare, vilket tillåter flera uttalanden, till exempel:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else if (isHot( color)) {
        'orange';
    } else if (isRain( color)) {
        'purple';
    } else {
        'green';
    }
};

Där detta är riktigt kraftfullt är i JSX, där vi kan blanda det med dess taggar utan att behöva beräkna resultatet externt först. Till exempel skulle vi kunna göra följande om vi använde React för att rendera dessa komponenter:

Fler JavaScript-förslag

Det finns fler förslag som diskuteras varje dag för att lägga till fler intressanta funktioner till JavaScript-språket. En ständigt växande lista över dessa föreslagna JavaScript-funktioner kan läsas på https://github.com/tc39/proposals#ecmascript-proposals. Förslagen här är nära att slutföras och därmed nära att läggas till i ECMAScript-standarden som förklaras i denna tabell som beskriver godkännandeprocessen.

Några av de nya JavaScript-funktionerna som vi utforskade i den här artikeln, som do-uttrycken eller pipeline-operatören, är steg 1-förslag, vilket innebär att de fortfarande har en väg att gå innan de blir en del av ECMAScript-standarden.