Mutatie vermijden
Werk met kopieën in plaats van gegevens te muteren.
Mutatie vermijden 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.
Waarom je wijzigingen moet vermijden
Het wijzigen van gedeelde gegevens veroorzaakt fouten die moeilijk te herleiden zijn: een wijziging op de ene plek komt voor code elders als een verrassing. De functionele stijl geeft de voorkeur aan nieuwe waarden boven het wijzigen van bestaande waarden (onveranderlijkheid).
const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]Arrays kopiëren met spread
De spreadoperator ... maakt een ondiepe kopie van een array, zodat je elementen kunt toevoegen zonder de bron aan te raken.
const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]Objecten kopiëren met spread
Spread werkt ook voor objecten en levert een nieuw object op met dezelfde eigenschappen, plus eventuele overschrijvingen.
const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user); // unchangedArraymethoden zonder wijzigingen
Geef de voorkeur aan methoden die nieuwe arrays retourneren: map, filter, concat en slice. Vermijd methoden die wijzigen, zoals push, splice en sort ter plaatse.
const a = [3, 1, 2];
const sorted = [...a].sort((x, y) => x - y);
console.log(sorted); // [1, 2, 3]
console.log(a); // [3, 1, 2]Toevoegen zonder te wijzigen
Bouw in plaats van push een nieuwe array met spread of concat.
const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]Verwijderen zonder te wijzigen
Gebruik filter om een nieuwe array zonder een bepaald element te maken, in plaats van splice.
const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]Een item onveranderlijk bijwerken
Als je één element wilt wijzigen, pas je map toe op de array en retourneer je een nieuwe waarde voor het overeenkomende item.
const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updated = todos.map((t) =>
t.id === 1 ? { ...t, done: true } : t
);
console.log(updated[0].done); // trueOndiep versus diep
Spread kopieert één niveau diep. Geneste objecten blijven gedeelde verwijzingen. Als je geneste gegevens onveranderlijk wilt bijwerken, gebruik je op elk niveau dat je wijzigt spread.
const state = { user: { name: "Ada", age: 36 } };
const next = {
...state,
user: { ...state.user, age: 37 }
};
console.log(state.user.age); // 36
console.log(next.user.age); // 37Bevriezen voor veiligheid
Object.freeze voorkomt dat een object tijdens runtime per ongeluk wordt gewijzigd en maakt onveranderlijkheid expliciet (tot één niveau diep).
const config = Object.freeze({ env: "prod" });
config.env = "dev"; // ignored in non-strict mode
console.log(config.env); // "prod"const is geen onveranderlijkheid
Een veelvoorkomende verwarring: const voorkomt alleen dat je de variabele opnieuw toewijst, niet dat je de waarde ervan wijzigt. Aan een array die met const is gedeclareerd, kun je nog steeds elementen toevoegen met push.
const arr = [1, 2];
arr.push(3); // allowed - value mutated
console.log(arr); // [1, 2, 3]
// arr = [] would throwSamenvatting van de voordelen
Onveranderlijke updates maken het bijhouden van wijzigingen eenvoudig (verwijzingen vergelijken), maken ongedaan maken en opnieuw uitvoeren mogelijk, voorkomen onverwachte gevolgen elders en passen vanzelf goed bij pure functies.
const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect changeKorte controle
Wijzigingen vermijden.
Samenvatting
Onveranderlijkheid betekent dat je nieuwe waarden maakt in plaats van waarden te wijzigen. Gebruik spread om arrays en objecten te kopiëren, geef de voorkeur aan methoden zonder wijzigingen (map, filter, concat) en gebruik spread op elk niveau bij updates van geneste gegevens. Onthoud dat const opnieuw toewijzen blokkeert, maar wijzigen niet; Object.freeze voegt bescherming tijdens runtime toe. Onveranderlijke updates maken wijzigingsdetectie en pure code eenvoudig.
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 “Mutatie vermijden” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Mutatie vermijden”, 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 “Mutatie vermijden”?
Werk met kopieën in plaats van gegevens te muteren. 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 “Mutatie vermijden”?
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.