Klonen en samenvoegen — spread en Object.assign
Kloon en voeg objecten/arrays samen met spread en Object.assign; begrijp shallow copies en de volgorde waarin waarden worden overschreven
Klonen en samenvoegen — spread en Object.assign is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 van 2. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 2 lessen.
Inleiding
Doel: Kloon en voeg objecten en arrays veilig samen.
- Spread voor klonen en samenvoegen
- Object.assign
- Volgorde van overschrijven
- Aandachtspunt bij ondiepe kopieën
Object klonen met spread
Gebruik {...obj} voor een ondiepe kloon. Als je de kloon bewerkt, veranderen de velden op het hoogste niveau in het origineel niet.
// Shallow clone with object spread
const user = { name: "Ayla", level: 1 };
const clone = { ...user };
clone.level = 2;
console.log("Original:", user);
console.log("Clone:", clone);
Object.assign: klonen
Object.assign({}, obj) maakt ook een ondiepe kloon. Voorkom dat je de bron wijzigt door aan een leeg object toe te wijzen.
// Shallow clone with Object.assign
const settings = { theme: "dark", compact: false };
const copy = Object.assign({}, settings);
copy.compact = true;
console.log("Settings:", settings);
console.log("Copy:", copy);
Samenvoegen: volgorde is belangrijk
Bij samenvoegen is de volgorde belangrijk: latere bronnen overschrijven eerdere sleutels (b wordt hier 9).
// Merge: later keys overwrite earlier ones
const base = { a: 1, b: 2 };
const extra = { b: 9, c: 3 };
const mergedSpread = { ...base, ...extra };
const mergedAssign = Object.assign({}, base, extra);
console.log("Spread merged:", mergedSpread);
console.log("Assign merged:", mergedAssign);
Arrays klonen en samenvoegen met spread
[...arr] kloont een array. Combineer arrays met [...a, ...b] zonder ze te wijzigen.
// Arrays: clone and merge with spread
const nums = [1, 2, 3];
const cloneNums = [...nums];
const more = [4, 5];
const mergedNums = [...nums, ...more];
console.log("nums:", nums);
console.log("clone:", cloneNums);
console.log("merged:", mergedNums);
Ondiep versus diep
Ondiepe kopie: geneste objecten en arrays worden gedeeld. Kopieer bij diepe structuren de binnenste niveaus expliciet.
// Shallow copy caveat: nested objects are shared
const original = { user: { name: "Mina" }, active: true };
const shallow = { ...original };
// Mutate nested object
shallow.user.name = "Lena";
console.log("Original:", original);
console.log("Shallow:", shallow);
Quiz over klonen
Korte controle: Ondiep klonen zonder wijzigingen.
Samenvatting
Samenvatting: Kloon met spread of Object.assign naar een leeg object, voeg samen door latere bronnen als laatste te plaatsen en onthoud: dit zijn ondiepe kopieën.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Klonen en samenvoegen — spread en Object.assign” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Klonen en samenvoegen — spread en Object.assign”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 2 lessen.
Wat leer ik in “Klonen en samenvoegen — spread en Object.assign”?
Kloon en voeg objecten/arrays samen met spread en Object.assign; begrijp shallow copies en de volgorde waarin waarden worden overschreven Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 2.
Hoe lang duurt de les “Klonen en samenvoegen — spread en Object.assign”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Array-CRUD en iteratie; de basis van objects en toegang
- Klonen en samenvoegen — spread en Object.assign