Forbedre din kode: Prøv disse JavaScript features i dag

At følge med i de seneste nyheder inden for frontend-verdenen kan være svært. Tingene udvikler sig hurtigt. Nye frameworks, nye biblioteker, nye features og meget mere.

Jeg vil prøve at lave en kort opsamling af nogle af de super fede nye features JavaScript har i ærmet til frontend-udviklere.

Optional Chaining

Optional chaining er en lille, men meget nyttig tilføjelse til sproget. Det gør den kode du skal skrive en smule kortere og renere. Det giver dig basalt set mulighed for at tjekke om værdier eksisterer i et objekt:

const someObject = {
  profile: {
   firstName: 'Nicky',
    lastName: 'Christensen',
    country: 'Denmark'
  }
}
// with optional chaining:
if (someObject?.profile?.firstName){ 
 console.log('Name is 1: ', someObject.profile.firstName)
}// navigate object graph safely

// old style without optional chaining:
if (someObject && someObject.profile && someObject.profile.firstName){ 
 console.log('Name is 2: ', someObject.profile.firstName)
}

// with optional chaining that fails as name doesnt exist:
if (someObject?.profile?.name){ 
 console.log('Name is 3: ', someObject.profile.firstName)
}// navigate object graph safely

Som du kan se, er de eneste to console.logs() der bliver printet "Name is 1" og "Name is 2". Den tredje bliver ikke printet, da "name" ikke eksisterer på "profile".

Før optional chaining var vi nødt til at gøre som i eksempel 2, hvilket kan være noget besværligt og langt at skrive.

Nullish coalescing

I den seneste udgave af ECMAScript kom en ny logisk operator som returnerer sin højresides operand når dens venstresides operand er null eller undefined. Du kan bruge nullish coalescing "??" når du skal sætte standardværdier. Ofte når vi gør dette har vi brugt "||" operatoren, som du selvfølgelig stadig kan bruge. "??" har nogle andre fordele som kan gavne dig når du vil undgå sideeffekter.

const falsy = false;
const emptyString = '';
const nullish = null;
const uDefined = undefined;

console.log('1', falsy ?? 'Some string');
console.log('2', emptyString ?? 'Default string') //"" (as the empty string is not null or undefined)
console.log('3', nullish ?? 'Default string')
console.log('4', uDefined ?? 'Default string')

console.log('-------');

console.log('1.1', falsy || 'Some string');
console.log('2.2', emptyString || 'Default string')
console.log('3.3', nullish || 'Default string')
console.log('4.4', uDefined || 'Default string')

Du kan prøve at lege med det i denne fiddle for at se forskellen mellem || og ?? operatoren: https://jsfiddle.net/96b4zw71/

Dynamic imports

Den seneste version af ECMAScript introducerer dynamic imports på moduler. Det gør det muligt at indlæse moduler asynkront. Dette er også kendt som code splitting, noget vi har gjort via build tools i årevis.

let someAsyncModule = await import('/modules/my-module.ts');

Promise.allSettled()

I årevis har vi brugt Promise.all() til at vente på at alle promises bliver resolved. Problemet med Promise.all() har været at vi ikke vidste hvilke promises der faktisk blev resolved og hvilke der fejlede.

Metoden Promise.allSettled() giver dig mulighed for at observere resultaterne af et sæt promises, uanset om de er fulfilled eller rejected, hvilket kan være rigtig nyttigt.

const promise1 = Promise.resolve("OK, I resolved");
const promise2 = Promise.reject("OH no, I was rejected");
const promise3 = Promise.resolve("After I was rejected");
Promise.allSettled([promise1, promise2, promise3])
    .then((results) => console.log(results))
    .catch((err) => console.log("error: " + err));

Tjek denne fiddle for at se hvordan det bruges: https://jsfiddle.net/x2h01z7p/1/

Spread operators

I nogen tid har vi haft adgang til spread operators. Det er særligt nyttigt når du for eksempel vil flette arrays eller objekter sammen. Før spread operators kunne vi bruge array.concat til at flette arrays, nu kan vi gøre det endnu nemmere:

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [...arr1, ...arr2] //arr3 ==> [1,2,3,4,5,6]

For objekter kan vi gøre:

const basePerson = {
 name: 'Nicky C',
  country: 'DK'
}

const footballerPerson = {
 ...basePerson,
  team: 'Man UTD',
  shirtNumber: '11'
}

console.log(footballerPerson) //Will output a merge of the two objects

Prøv det her: https://jsfiddle.net/s86knh72/

Object Destructuring

Ved at bruge object destructuring kan du nemt udpakke værdier fra et objekt:

const basePerson = {
 name: 'Nicky C',
  country: 'DK'
}
const footballerPerson = {
 ...basePerson,
  team: 'Man UTD',
  shirtNumber: '11'
}

const {team, shirtNumber} = footballerPerson;

console.log(team, shirtNumber); //ManUtd, 11

Prøv det her: https://jsfiddle.net/2z3rp18v/