Tilbage til oversigt

Små tricks med Rest & Spread operators I Javascript

Skrevet af
Nicky Christensen
Udgivet
Opdateret

Hvis du kender til ES6, så har nu formentlig hørt lidt om rest/spread operators, også kendt som de tre ”…”. De tre prikker så at sige kan bruge på 2 måder, som en spread operator eller som ”rest parameter”. I denne artikel vil jeg komme ind på lidt små tips og tricks til hvad du kan gøre med dem.

Klon objekt og tilføj properties samtidig.

Du kan nemt klone et objekt, og samtidig tilføje nye properties til öbjektet. I nedenstående eksempel kan du se hvordan jeg kloner ”nicky”, samt hvordan ”lastName” er tilføjet til objektet.

const nicky = { id: 1, firstName: 'Nicky'}
const nickyExtended = { ...user, lastName: 'christensen' }

nicky //=> { id: 1, firstName: 'Nicky' }
nickyExtended //=> { id: 1, firstName: 'Nicky', lastName: 'Christensen' }

Sammenlæg 2 objekter

Har du 2 objekter du gerne vil sammenlægge til 1 objekt kan det gøres utrolig nemt. I nedenstående eksempel sammenlægger vi ”nicky” + ”job” til 1 objekt ved bare 3 liniers kode.

const nicky = { id: 1, firstName: 'Nicky' }
const job = { jobTitle: 'Frontend Dev!' }

const nickyExtended = { ...nicky, ...job }
//=> { id: 1, firstName: 'Nicky', jobTitle: 'Frontend Dev!' }

Ekskluder properties fra et objekt.

Properties kan til tider indeholde værdier du ikke har behov for, hvorfor det kan være en god ide at fjerne det fra det objekt du skal arbejde med. Dette kan gøres med destructuring kombineret med rest parameters. I eksemplet nedenfor fjerner jeg alderen fra objektet, og resten af vores properties er returneret som ”rest”

const noAge = ({ age, ...rest }) => rest
const user = {
  id: 1,
  firstName: 'Nicky',
  lastName: 'Christensen',
  age: 34
}

noAge(user) //=> { id: 1, firstName: 'Nicky', lastName: 'Christensen' }

Specifik data fra 2 objekter

I visse tilfælde har man kun brug for noget specifikt data fra flere objekter. Her kan vi benytte destructuring sammen med spread operators for at opnå det. I nedenstående eksempel kan du se hvordan vi nemt hiver ”name” og ”city” ud fra 2 forskellige objekter.

const obj = {
  firstName: "Nicky",
  lastName: "Christensen",
  age: 34,
  jobTitle: "Frontend Dev!"
}

const objTwo = {
  city: "Aarhus",
  country: "Denmark"
}

let {firstName, city} = {...obj, ...objTwo};
console.log(firstName, city);  //=> Nicky Aarhus

Det var lige hvad det kunne blive til sådan en lørdag morgen. Jeg håber du kan bruge det til lidt, og smid gerne andre tips og tricks min vej hvis du kommer på nogle 😊