JavaScript Academy · Oppitunti

Mutoinnin välttäminen

Työskennelkää kopioiden kanssa datan muuttamisen sijaan.

Oppitunti 3/413 vaihetta

Mutoinnin välttäminen on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Miksi muuttamista kannattaa välttää

Jaettujen tietojen muuttaminen aiheuttaa vaikeasti jäljitettäviä virheitä: yhdessä paikassa tehty muutos yllättää muualla olevan koodin. Funktionaalisessa tyylissä suositaan uusien arvojen luomista olemassa olevien muokkaamisen sijaan (muuttumattomuus).

const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

Taulukoiden kopioiminen spread-operaattorilla

Spread-operaattori ... luo taulukosta matalan kopion, joten voitte lisätä alkioita muuttamatta lähdettä.

const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]

Olioiden kopioiminen spread-operaattorilla

Spread toimii myös olioiden kanssa. Se tuottaa uuden olion, jolla on samat ominaisuudet sekä mahdolliset ylikirjoittavat arvot.

const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user);  // unchanged

Taulukkometodit, jotka eivät muuta lähdettä

Suosikaa metodeja, jotka palauttavat uusia taulukoita: map, filter, concat ja slice. Välttäkää lähdettä muuttavia metodeja, kuten push, splice ja paikallaan suorittava sort.

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]

Lisääminen muuttamatta alkuperäistä

push-metodin sijaan muodostakaa uusi taulukko spread-operaattorilla tai concat-metodilla.

const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]

Poistaminen muuttamatta alkuperäistä

Käyttäkää filter-metodia uuden, jonkin alkion sisältämättömän taulukon muodostamiseen splice-metodin sijaan.

const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]

Alkion päivittäminen muuttamatta alkuperäistä

Kun haluatte muuttaa yhtä alkiota, käykää taulukko läpi map-metodilla ja palauttakaa vastaavalle alkiolle uusi arvo.

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); // true

Matala ja syvä kopio

Spread kopioi yhden tason syvyydeltä. Sisäkkäiset oliot ovat edelleen jaettuja viittauksia. Päivittäkää sisäkkäisiä tietoja muuttumattomasti käyttämällä spread-operaattoria jokaisella muutettavalla tasolla.

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);  // 37

Suojaaminen jäädyttämällä

Object.freeze estää olion tahattoman muuttamisen ajonaikana ja tekee muuttumattomuudesta eksplisiittistä (yhden tason syvyydeltä).

const config = Object.freeze({ env: "prod" });
config.env = "dev";       // ignored in non-strict mode
console.log(config.env);  // "prod"

const ei tarkoita muuttumattomuutta

Yleinen sekaannus on, että const estää vain muuttujan uudelleenmäärityksen, ei sen sisältämän arvon muuttamista. const-määritteinen taulukko voidaan silti käsitellä push-metodilla.

const arr = [1, 2];
arr.push(3);          // allowed - value mutated
console.log(arr);     // [1, 2, 3]
// arr = [] would throw

Hyötyjen kertaus

Muuttumattomat päivitykset tekevät muutosten seurannasta helppoa (vertaamalla viittauksia), mahdollistavat kumoamisen ja uudelleen tekemisen, estävät muualla tapahtuvien yllättävien vaikutusten ongelmat ja sopivat luontevasti yhteen puhtaiden funktioiden kanssa.

const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect change

Pikakertaus

Muuttamisen välttäminen.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Muuttumattomuus tarkoittaa uusien arvojen luomista muuttamisen sijaan. Käyttäkää spread-operaattoria taulukoiden ja olioiden kopioimiseen, suosikaa metodeja, jotka eivät muuta lähdettä (map, filter, concat), ja käyttäkää spread-operaattoria jokaisella tasolla sisäkkäisiä tietoja päivittäessänne. Muistakaa, että const estää uudelleenmäärityksen, ei muuttamista; Object.freeze lisää ajonaikaisen suojauksen. Muuttumattomat päivitykset helpottavat muutosten tunnistamista ja puhtaan koodin kirjoittamista.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Mutoinnin välttäminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Mutoinnin välttäminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Mutoinnin välttäminen”?

Työskennelkää kopioiden kanssa datan muuttamisen sijaan. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Mutoinnin välttäminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy