Guinguette Marais Poitevin

In dit bericht vind je 3 eenvoudige manieren om objecten ondiep te klonen (ook wel kopiëren genoemd) in JavaScript.

Als bonus laat ik zien hoe je ook ter plekke eigenschappen van de kloon kunt bijwerken, toevoegen of verwijderen. Dat is handig als je een update wilt uitvoeren op het object op een onveranderlijke manier.

Opmerking

De 3 manieren om objecten te klonen die in dit bericht worden beschreven voeren een ondiepe kopie uit.

Een ondiepe kopie betekent dat alleen het eigenlijke object wordt gekopieerd. Als het gekopieerde object geneste objecten bevat – worden deze geneste objecten niet gekloond.

1. Klonen met behulp van object spread

De eenvoudigste manier om een gewoon JavaScript-object te klonen is door de operator object spread aan te roepen:

const clone = { ...object};

Waarbij object het object is dat je wilt kopiëren, en clone de ondiepe kopie is van object.

Maken we bijvoorbeeld een ondiepe kopie van het object hero:

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = { ...hero};heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

heroClone is een kloonobject van hero, wat betekent dat het alle eigenschappen bevat van hero.

hero === heroClone evalueert naar falsehero en heroClone zijn, niettemin, verschillende objectinstanties.

1.1 Object spread bonus: gekloonde props toevoegen of bijwerken

Een direct voordeel van het gebruik van object spread is dat je het gekloonde object ter plekke kunt bijwerken of nieuwe eigenschappen kunt toevoegen als je dat nodig hebt.

Laten we het hero object klonen, maar name property bijwerken naar een andere waarde en een nieuwe property realName toevoegen:

const hero = { name: 'Batman', city: 'Gotham'};const heroEnhancedClone = { ...hero, name: 'Batman Clone', realName: 'Bruce Wayne'};heroEnhancedClone; // { name: 'Batman Clone', city: 'Gotham', realName: 'Bruce Wayne' }

2. Klonen met behulp van object rest

Een andere goede manier om objecten ondiep te klonen is door gebruik te maken van de object rest operator:

const { ...clone } = object;

Opnieuw, laten we de rest operator gebruiken om een kopie te maken van hero object:

const hero = { name: 'Batman', city: 'Gotham'};const { ...heroClone } = hero;heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

Na toepassing van de rest-operator const { ...heroClone } = hero bevat de variabele heroClone een kopie van het object hero.

2.1 Object rest bonus: sla gekloonde props over

Een leuke bonus bij het gebruik van object rest is de mogelijkheid om bepaalde eigenschappen over te slaan bij het klonen.

Maken we bijvoorbeeld een kloon van hero object, maar slaan we city eigenschap over in de kloon:

const hero = { name: 'Batman', city: 'Gotham'};const { city, ...heroClone } = hero;heroClone; // { name: 'Batman' }

2.2 Superbonus: object spread en rest combineren

Object spread brengt de bonus van het bijwerken of toevoegen van nieuwe eigenschappen, terwijl object rest het voordeel heeft dat eigenschappen in de resulterende kloon worden overgeslagen.

Kun je object spread en rest combineren in één statement om al deze voordelen te erven? Ja, dat kan!

Laten we het hero object klonen, waarbij we ook een nieuwe eigenschap realName toevoegen en de eigenschap city overslaan:

const hero = { name: 'Batman', city: 'Gotham'};const { city, ...heroClone } = { ...hero, realName: 'Bruce Wayne'};heroClone; // { name: 'Batman', realName: 'Bruce Wayne' }

Het combineren van de objectspreiding en rest om objecten te klonen en eigenschappenmanipulatie uit te voeren in één enkel statement is geweldig!

3. Klonen met behulp van Object.assign()

Ten slotte kun je met Object.assign(target, ...sources) eenzelfde object klonen:

const clone = Object.assign({}, object);

Laten we Object.assign() in de praktijk gebruiken en een gekloond object maken van hero object:

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = Object.assign({}, hero);heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

Object.assign({}, hero) creëert een kloon van hero object door het tweede argument hero samen te voegen in het eerste argument {}.

3.1 Object.assign() bonus: gekloonde props toevoegen of bijwerken

Object.assign() maakt het ook mogelijk om nieuwe eigenschappen aan de kloon bij te werken of toe te voegen.

Laten we het hero object kopiëren, maar tegelijkertijd name eigenschap bijwerken:

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = Object.assign({}, hero, { name: 'Batman Clone' });heroClone; // { name: 'Batman Clone', city: 'Gotham' }

Object.assign({}, hero, { name: 'Batman Clone' }) maakt het object in 2 stappen.

Eerst wordt het tweede argument hero samengevoegd met het eerste argument {}. Dit is gelijk aan { name: 'Batman', city: 'Gotham' }.

Tweede, het derde argument { name: 'Batman Clone' } wordt samengevoegd in het resultaat van de vorige stap, waarbij de eigenschap name wordt overschreven. Uiteindelijk krijg je het object { name: 'Batman Clone', city: 'Gotham' }.

4. Samenvatting

JavaScript biedt 3 goede manieren om objecten te klonen: met behulp van spread operator, rest operator en Object.assign() functie.

Naast het klonen van objecten, kun je met object spread en Object.assign() eigenschappen toevoegen of bijwerken tijdens het maken van de kloon.

Rest operator geeft ook het voordeel van het overslaan van bepaalde eigenschappen bij het klonen.

En wat geweldig is, je kunt de object spread en rest combineren in een enkel statement, zodat je het object kunt klonen, en tegelijkertijd eigenschappen kunt toevoegen, bijwerken of overslaan van gekloonde eigenschappen.

Dat is handig als je de onveranderlijkheid wilt omarmen en in staat wilt zijn om de eigenschappen van het gekloonde object ter plaatse te manipuleren.

Welke andere goede manieren om objecten te klonen in JavaScript ken jij?