Levitelyoperaattori, joka merkitään ..., on hyödyllinen työkalu uusien olioiden luomiseen yhdistämällä ja kopioimalla ominaisuuksia olemassa olevista olioista. Levitelyoperaattorin avulla voidaan suorittaa seuraavat tehtävät:

• Kloonata olioita;
• Lisätä tai muokata ominaisuuksia;
• Luoda uusia olioita.

Tarkastellaan, kuinka levitelyoperaattoria käytetään olioiden kanssa.

Levitelyoperaattori

Levitelyoperaattoria (...) voidaan käyttää useissa yhteyksissä, mutta yksi sen yleisimmistä käyttötavoista on uusien olioiden luominen levittämällä olemassa olevien olioiden ominaisuudet.

Tässä on levitelyoperaattorin perussyntaksi olion luomiseen:

const newObject = { ...sourceObject }; 

• newObject: Uusi olio, jonka halutaan luoda;
• sourceObject: Lähdeolio, jonka ominaisuudet halutaan kopioida.

Objektin kloonaaminen

Tarkastellaan, kuinka objekti kloonataan. Luodaan uusi objekti, jolla on samojen ominaisuuksien ja arvojen joukko kuin lähdeobjektilla. Uuteen objektiin tehdyt muutokset eivät vaikuta alkuperäiseen objektiin.

const originalObject = {
  name: "Diamond Kite",
  color: "purple",
};

// Create a cloned object by spreading the original object
const clonedObject = { ...originalObject }; // Cloning with the help of the spread operator

// Add a new property to the cloned object
clonedObject.size = "large"; // Adding a new property to the cloned object

console.log(originalObject); // Output: {name: 'Diamond Kite', color: 'purple'}
console.log(clonedObject); // Output: {name: 'Diamond Kite', color: 'purple', size: 'large'}

Tässä esimerkissä clonedObject on uusi objekti, joka on klooni originalObject-objektista. Kaikki muutokset, jotka tehdään clonedObject-objektiin, eivät vaikuta originalObject-objektiin. Siksi clonedObject sisältää kolme ominaisuutta ja originalObject vain kaksi.

Ominaisuuksien lisääminen tai muokkaaminen

Spread-operaattori on hyödyllinen myös ominaisuuksien lisäämisessä tai muokkaamisessa uudessa objektissa. Voimme lisätä uusia ominaisuuksia tai korvata olemassa olevia uudessa objektissa.

const waterBottle = {
  brand: "HydroFlask",
  capacity: 32,
};

const extendedWaterBottle = {
  ...waterBottle,
  color: "blue",
  capacity: 24,
};

console.log(waterBottle); // Output: {brand: 'HydroFlask', capacity: 32}
console.log(extendedWaterBottle); // Output: {brand: 'HydroFlask', capacity: 24, color: 'blue'}

Tässä esimerkissä extendedWaterBottle luodaan levittämällä waterBottle-olion ominaisuudet. Lisäksi lisätään color-ominaisuus ja capacity-ominaisuus ylikirjoitetaan.

Olioiden yhdistäminen

Spread-operaattoria voidaan käyttää usean olion ominaisuuksien yhdistämiseen yhdeksi uudeksi olioksi. Tämä on erityisen hyödyllistä, kun halutaan yhdistää tietoja useista lähteistä.

const apartmentFeatures = {
  size: "1200 square feet",
  bedrooms: 2,
  bathrooms: 2,
};

const apartmentDetails = {
  rent: 2000,
  location: "Downtown City",
};

const apartment = { ...apartmentFeatures, ...apartmentDetails };
console.log(apartment); // Output: {size: '1200 square feet', bedrooms: 2, bathrooms: 2, rent: 2000, location: 'Downtown City'}

Tässä esimerkissä apartment luodaan yhdistämällä apartmentFeatures- ja apartmentDetails-olioiden ominaisuudet.