Sma tricks med Rest & Spread operators I Javascript

Hvis du kender til ES6, sa har nu formentlig hort lidt om rest/spread operators, ogsa kendt som de tre "...". De tre prikker sa at sige kan bruge pa 2 mader, som en spread operator eller som "rest parameter". I denne artikel vil jeg komme ind pa lidt sma tips og tricks til hvad du kan gore med dem.

Klon objekt og tilføj properties samtidig.

Du kan nemt klone et objekt, og samtidig tilføje nye properties til objektet. I nednestaende 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' }

Sammenlaeg 2 objekter

Har du 2 objekter du gerne vil sammenlaegge til 1 objekt kan det gores utrolig nemt. I nednestaende eksempel sammenlaegger 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 vaerdier du ikke har behov for, hvorfor det kan vaere en god ide at fjerne det fra det objekt du skal arbejde med. Dette kan gores 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 tilfaelde har man kun brug for noget specifikt data fra flere objekter. Her kan vi benytte destructuring sammen med spread operators for at opna det. I nednestaende 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 sadan en lordag morgen. Jeg haber du kan bruge det til lidt, og smid gerne andre tips og tricks min vej hvis du kommer pa nogle