Unikanie mutacji
Proszę pracować na kopiach zamiast modyfikować dane bezpośrednio.
Unikanie mutacji to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Dlaczego należy unikać modyfikowania danych
Modyfikowanie współdzielonych danych powoduje trudne do prześledzenia błędy: zmiana w jednym miejscu zaskakuje kod w innym. Styl funkcyjny preferuje tworzenie nowych wartości zamiast modyfikowania istniejących (niemutowalność).
const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]Spread do kopiowania tablic
Operator spread ... tworzy płytką kopię tablicy, umożliwiając dodawanie elementów bez modyfikowania źródła.
const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]Spread do kopiowania obiektów
Spread działa również dla obiektów, tworząc nowy obiekt z tymi samymi właściwościami oraz ewentualnymi nadpisaniami.
const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user); // unchangedMetody tablic niemodyfikujące danych
Należy preferować metody zwracające nowe tablice: map, filter, concat i slice. Należy unikać metod modyfikujących dane, takich jak push, splice i sort wykonywane w miejscu.
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]Niemutowalne dodawanie
Zamiast push należy utworzyć nową tablicę za pomocą spread lub concat.
const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]Niemutowalne usuwanie
Należy użyć filter, aby utworzyć nową tablicę bez wybranego elementu, zamiast korzystać z splice.
const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]Niemutowalna aktualizacja elementu
Aby zmienić jeden element, należy wykonać map na tablicy i zwrócić nową wartość dla pasującego elementu.
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); // truePłytka a głęboka kopia
Spread kopiuje jeden poziom w głąb. Zagnieżdżone obiekty nadal są współdzielonymi referencjami. Aby niemutowalnie zaktualizować zagnieżdżone dane, należy użyć spread na każdym zmienianym poziomie.
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); // 37Zamrażanie dla bezpieczeństwa
Object.freeze zapobiega przypadkowemu modyfikowaniu obiektu w czasie działania, wyraźnie określając jego niemutowalność (na jednym poziomie).
const config = Object.freeze({ env: "prod" });
config.env = "dev"; // ignored in non-strict mode
console.log(config.env); // "prod"Const to nie niemutowalność
Częste nieporozumienie: const zapobiega jedynie ponownemu przypisaniu zmiennej, a nie modyfikowaniu przechowywanej przez nią wartości. Tablicę zadeklarowaną za pomocą const nadal można modyfikować metodą push.
const arr = [1, 2];
arr.push(3); // allowed - value mutated
console.log(arr); // [1, 2, 3]
// arr = [] would throwPodsumowanie korzyści
Niemutowalne aktualizacje upraszczają śledzenie zmian (wystarczy porównać referencje), umożliwiają cofanie i ponawianie operacji, zapobiegają nieoczekiwanym zmianom w odległych częściach kodu oraz naturalnie współgrają z czystymi funkcjami.
const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect changeSzybkie sprawdzenie
Unikanie modyfikowania danych.
Podsumowanie
Niemutowalność oznacza tworzenie nowych wartości zamiast modyfikowania istniejących. Należy używać spread do kopiowania tablic i obiektów, preferować metody niemodyfikujące dane (map, filter, concat) oraz używać spread na każdym poziomie podczas aktualizowania danych zagnieżdżonych. Należy pamiętać, że const blokuje ponowne przypisanie, ale nie modyfikowanie wartości; Object.freeze zapewnia dodatkową ochronę w czasie działania. Niemutowalne aktualizacje ułatwiają wykrywanie zmian i pisanie czystego kodu.
Często zadawane pytania
Czy lekcja „Unikanie mutacji” jest bezpłatna?
Tak — pełny tekst „Unikanie mutacji” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Unikanie mutacji”?
Proszę pracować na kopiach zamiast modyfikować dane bezpośrednio. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?
Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Unikanie mutacji”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?
Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.