Patronen voor immutable updates
Werk gegevens bij door nieuwe kopieën te maken.
Patronen voor immutable updates is een gratis JavaScript Academy-les op CoddyKit. Dit is les 3 van 4. 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 4 lessen.
Updaten zonder wijzigingen aan te brengen
Onveranderlijke updates maken een nieuwe kopie waarin de wijziging is toegepast, terwijl het origineel onaangeroerd blijft. Dit vormt de kern van voorspelbaar statusbeheer in modern JavaScript.
De spreadoperator ... is het belangrijkste hulpmiddel.
Een object kopiëren met spread
Gebruik spread om een object in een nieuw object te plaatsen en overschrijf daarna een eigenschap. Het origineel behoudt zijn oude waarde.
const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };
console.log(user.age);
console.log(older.age);Het zijn verschillende objecten
De kopie is een volledig nieuw object en niet dezelfde verwijzing. Een identiteitsvergelijking bevestigt dat.
const original = { x: 1 };
const copy = { ...original };
console.log(original === copy);
console.log(original.x === copy.x);Onveranderlijk een eigenschap toevoegen
Als je een veld wilt toevoegen, gebruik je spread voor het oude object en neem je de nieuwe sleutel op. Aan het origineel wordt niets toegevoegd.
const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };
console.log(point);
console.log(point3d);Onveranderlijk een eigenschap verwijderen
Gebruik destructurering om de ongewenste sleutel eruit te halen en de rest op te slaan. Het restobject bevat die sleutel niet.
const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;
console.log(safe);
console.log(user.secret);Arrays kopiëren met spread
Gebruik spread om een array te kopiëren. Methoden zoals map en filter retourneren ook nieuwe arrays en wijzigen de bron nooit.
const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);
console.log(nums);
console.log(doubled);Onveranderlijk aan een array toevoegen
Maak in plaats van push (dat wijzigingen aanbrengt) een nieuwe array met spread. De lengte van het origineel blijft hetzelfde.
const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];
console.log(list);
console.log(added);
console.log(prepended);Onveranderlijk uit een array verwijderen
Gebruik filter om een nieuwe array te maken zonder het ongewenste item, terwijl het origineel intact blijft.
const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);
console.log(nums);
console.log(withoutThree);Geneste objecten bijwerken
Voor updates van geneste gegevens moet je op elk gewijzigd niveau spread gebruiken. Alleen de aangepaste tak wordt opnieuw gemaakt; de rest wordt gedeeld via een verwijzing.
const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
...state,
user: { ...state.user, age: 37 }
};
console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);Een item in een array bijwerken
Gebruik map om voor het overeenkomende item een gewijzigde kopie terug te geven en voor de rest het origineel. Geen enkel element wordt gewijzigd.
const todos = [
{ id: 1, done: false },
{ id: 2, done: false }
];
const updated = todos.map(t =>
t.id === 2 ? { ...t, done: true } : t
);
console.log(todos[1].done);
console.log(updated[1].done);Waarom onveranderlijke updates belangrijk zijn
Als je gedeelde status nooit wijzigt, wordt het detecteren van wijzigingen goedkoop (verwijzingen vergelijken), kun je ongedaan maken en opnieuw uitvoeren en voorkom je fouten door effecten op afstand. Het patroon: kopieer en wijzig daarna de kopie. Voor diepe kopieën behandelt de volgende les structuredClone.
function setName(state, name) {
return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);Korte controle
Wat levert { ...user, age: 37 } op als user al een age heeft?
Samenvatting: patronen voor onveranderlijke updates
Je hebt geleerd hoe je kunt updaten zonder wijzigingen aan te brengen:
- Gebruik spread met
{ ...obj, key: value }om te kopiëren en te overschrijven. - Gebruik destructurering van de rest om onveranderlijk een eigenschap te verwijderen.
- Gebruik
map,filteren spread voor arrays in plaats vanpush/splice. - Gebruik spread op elk niveau voor updates van geneste gegevens; deel de rest via verwijzingen.
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 “Patronen voor immutable updates” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Patronen voor immutable updates”, 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 4 lessen.
Wat leer ik in “Patronen voor immutable updates”?
Werk gegevens bij door nieuwe kopieën te maken. 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 3 van 4.
Hoe lang duurt de les “Patronen voor immutable updates”?
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
- Object.freeze en seal
- Oppervlakkig versus diep bevriezen
- Patronen voor immutable updates
- structuredClone voor diepe kopieën