10 nye JavaScript-funksjoner i ES2020 som du bør vite

Gode ​​nyheter - de nye ES2020-funksjonene er nå ferdig! Dette betyr at vi nå har en fullstendig ide om endringene som skjer i ES2020, den nye og forbedrede spesifikasjonen av JavaScript. Så la oss se hva disse endringene er.

# 1: BigInt

BigInt, en av de mest etterlengtede funksjonene i JavaScript, er endelig her. Det tillater faktisk utviklere å ha mye større helhetsrepresentasjon i sin JS-kode for databehandling for datahåndtering.

For øyeblikket er det maksimale antallet du kan lagre som et heltall i JavaScript pow(2, 53) - 1. Men BigInt lar deg faktisk gå enda lenger enn det.  

Du må imidlertid ha et nvedlagt helt på slutten av nummeret, som du kan se ovenfor. Dette nindikerer at dette er en BigInt og skal behandles annerledes av JavaScript-motoren (av v8-motoren eller hvilken som helst motor den bruker).

Denne forbedringen er ikke bakoverkompatibel fordi det tradisjonelle nummersystemet er IEEE754 (som bare ikke støtter tall av denne størrelsen).

# 2: Dynamisk import

Dynamisk import i JavaScript gir deg muligheten til å importere JS-filer dynamisk som moduler i applikasjonen din. Dette er akkurat som hvordan du gjør det med Webpack og Babel for øyeblikket.

Denne funksjonen hjelper deg med å sende kode på forespørsel, bedre kjent som kodedeling, uten overhead av webpack eller andre modulbundlere. Du kan også legge inn kode i en if-else-blokk hvis du vil.

Det gode er at du faktisk importerer en modul, og slik at den aldri forurenser det globale navneområdet.

# 3: Nullish Coalescing

Nullish coalescing legger til muligheten til å virkelig kontrollere nullishverdier i stedet for falseyverdier. Hva er forskjellen mellom nullishog falseyverdier, kan du spørre?

I Javascript, mye verdier er falsey, som tomme strenger, tallet 0, undefined, null, false, NaN, og så videre.

Imidlertid vil du ofte sjekke om en variabel er null - det vil si om den er enten undefinedeller null, som når det er greit at en variabel har en tom streng, eller til og med en falsk verdi.

I så fall vil du bruke den nye nullish coalescing operator, ??

Du kan tydelig se hvordan OR-operatøren alltid returnerer en sannhetsverdi, mens null-operatoren returnerer en ikke-nulllish-verdi.

# 4: Valgfri lenking

Valgfri kjedesyntaks gir deg tilgang til dypt nestede objektegenskaper uten å bekymre deg om egenskapen eksisterer eller ikke. Hvis den eksisterer, flott! Hvis ikke, undefinedvil bli returnert.

Dette fungerer ikke bare på objektegenskaper, men også på funksjonssamtaler og matriser. Super praktisk! Her er et eksempel:

# 5: Promise.allSettled

Den Promise.allSettledmetoden godtar en rekke løfter og bare løser når alle av dem er avgjort - enten løst eller avvist.

Dette var ikke tilgjengelig før, selv om noen nære implementeringer likte raceog allvar tilgjengelige. Dette bringer "Bare kjør alle løfter - jeg bryr meg ikke om resultatene" naturlig til JavaScript.

# 6: String # matchAll

matchAller en ny metode lagt til Stringprototypen som er relatert til Regular Expressions. Dette returnerer en iterator som returnerer alle samsvarende grupper etter hverandre. La oss se på et raskt eksempel:

# 7: GlobalThis

Hvis du skrev noen plattforms JS-kode som kunne kjøre på Node, i nettlesermiljøet, og også inne i web-arbeidere, ville du ha vanskelig for å få tak i det globale objektet.

Dette er fordi det er windowfor nettlesere, globalfor Node og selffor webarbeidere. Hvis det er flere kjøretider, vil det globale objektet også være annerledes for dem.

Så du måtte ha din egen implementering for å oppdage kjøretid og deretter bruke riktig global - det vil si til nå.

ES2020 bringer oss globalThissom alltid refererer til det globale objektet, uansett hvor du kjører koden din:

# 8: Eksport av modulnavneområde

I JavaScript-moduler var det allerede mulig å bruke følgende syntaks:

import * as utils from './utils.mjs'

Imidlertid exporteksisterte ingen symmetrisk syntaks, til nå:

export * as utils from './utils.mjs'

Dette tilsvarer følgende:

import * as utils from './utils.mjs' export { utils }

# 9: Godt definert for-i rekkefølge

ECMA-spesifikasjonen spesifiserte ikke i hvilken rekkefølge som for (x in y)  skulle kjøres. Selv om nettlesere implementerte en jevn rekkefølge på egenhånd før nå, har dette blitt offisielt standardisert i ES2020.

# 10: import.meta

Den import.metaobjektet ble opprettet av ECMAScript implementering, med en nullprototype.

Vurder en modul module.js:

Du kan få tilgang til metainformasjon om modulen ved hjelp av import.metaobjektet:

console.log(import.meta); // { url: "file:///home/user/module.js" }

Den returnerer et objekt med en urlegenskap som indikerer modulens basis-URL. Dette vil enten være URL-en som skriptet ble hentet fra (for eksterne skript), eller dokumentets grunn-URL til det inneholder dokumentet (for innebygde skript).

Konklusjon

Jeg elsker konsistensen og hastigheten som JavaScript-fellesskapet har utviklet seg og utvikler seg med. Det er utrolig og virkelig fantastisk å se hvordan JavaScript kom fra et språk som ble buket på i 10 år, til et av de sterkeste, mest fleksible og allsidige språkene gjennom tidene i dag.

Ønsker du å lære JavaScript og andre programmeringsspråk på en helt ny måte? Gå videre til en ny plattform for utviklere jeg jobber med for å prøve den i dag!

Hva er din favorittfunksjon på ES2020? Fortell meg om det ved å tvitre og koble til meg på Twitter og Instagram!

Dette er et blogginnlegg sammensatt av videoen min som handler om samme emne. Det ville bety verden for meg hvis du kunne vise det litt kjærlighet!