Undvika mutationer
Arbeta med kopior i stället för att mutera data.
Undvika mutationer är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Varför undvika mutation
Mutation av delade data orsakar fel som är svåra att spåra: en ändring på ett ställe överraskar kod någon annanstans. Funktionell stil föredrar att skapa nya värden framför att ändra befintliga (oföränderlighet).
const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]Använd spread för att kopiera arrayer
Spread-operatorn ... skapar en ytlig kopia av en array, så att ni kan lägga till element utan att ändra källan.
const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]Använd spread för att kopiera objekt
Spread fungerar även för objekt och skapar ett nytt objekt med samma egenskaper samt eventuella överskrivningar.
const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user); // unchangedArraymetoder utan mutation
Föredra metoder som returnerar nya arrayer: map, filter, concat och slice. Undvik metoder som muterar, till exempel push, splice och sort på plats.
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]Lägga till utan mutation
I stället för push skapar ni en ny array med spread eller concat.
const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]Ta bort utan mutation
Använd filter för att skapa en ny array utan ett element, i stället för splice.
const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]Uppdatera ett element utan mutation
Om ni vill ändra ett element mappar ni över arrayen och returnerar ett nytt värde för det matchande elementet.
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); // trueYtlig kontra djup
Spread kopierar bara ett lager. Nästlade objekt är fortfarande delade referenser. Om ni vill uppdatera nästlade data utan mutation använder ni spread på varje nivå som ändras.
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); // 37Frysning för säkerhets skull
Object.freeze förhindrar oavsiktlig mutation av ett objekt vid körning, vilket tydliggör oföränderligheten (endast en nivå djupt).
const config = Object.freeze({ env: "prod" });
config.env = "dev"; // ignored in non-strict mode
console.log(config.env); // "prod"const är inte oföränderlighet
En vanlig missuppfattning är att const bara förhindrar omtilldelning av variabeln, inte ändring av värdet den innehåller. En array som deklarerats med const kan fortfarande få element tillagda med push.
const arr = [1, 2];
arr.push(3); // allowed - value mutated
console.log(arr); // [1, 2, 3]
// arr = [] would throwSammanfattning av fördelarna
Oföränderliga uppdateringar gör ändringsspårning trivial (jämför referenser), möjliggör undo/redo, förhindrar oväntade effekter långt bort och passar naturligt ihop med rena funktioner.
const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect changeSnabbtest
Undvika mutation.
Sammanfattning
Oföränderlighet innebär att skapa nya värden i stället för att mutera. Använd spread för att kopiera arrayer och objekt, föredra metoder utan mutation (map, filter, concat) och använd spread på varje nivå vid uppdatering av nästlade data. Kom ihåg att const förhindrar omtilldelning, inte mutation; Object.freeze ger extra skydd vid körning. Oföränderliga uppdateringar gör ändringsdetektering och ren kod enkla.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Undvika mutationer” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Undvika mutationer”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Undvika mutationer”?
Arbeta med kopior i stället för att mutera data. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Undvika mutationer”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.