Virherajat ilman frameworkeja — käsitteellinen johdanto
Luo pieniä virherajoja puhtaalla JavaScriptillä: try/catch riskialttiin koodin ympärille, wrapper-apufunktiot, asynkroninen try/catch, oletusarvot ja minimaalinen lokitus
Virherajat ilman frameworkeja — käsitteellinen johdanto on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/3. 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ä 3 oppituntia.
Kokonaiskuva
Tavoite: Estäkää yhtä virhettä rikkomasta koko näkymää.
- Käyttäkää try/catch-rakennetta riskialttiiden kohtien ympärillä
- Lisätkää pieni runSafe-apufunktio
- Käsitelkää myös async-toiminnot try/catch-rakenteella
- Palauttakaa varaarvoja ja kirjatkaa lyhyesti lokiin

Paikallinen rajakohta: jäsentäminen
Ympäröikää vain riskialtis vaihe (JSON.parse). Palauttakaa virheen sattuessa yksinkertainen varakohde.
// Try/catch boundary: parse user JSON with a fallback
function safeParseUser(json) {
try {
const obj = JSON.parse(json);
// minimal validation
if (!obj || typeof obj.name !== "string") {
return { name: "Guest" };
}
return { name: obj.name };
} catch (err) {
// fallback on parse error
return { name: "Guest" };
}
}
console.log("ok:", safeParseUser("{\"name\":\"Ayla\"}"));
console.log("bad:", safeParseUser("{oops}"));

runSafe-apufunktio
Tehkää pieni apufunktio ja käyttäkää sitä uudelleen. Pitäkää lokit lyhyinä älkääkä vuotako salaisuuksia.
// A tiny boundary helper for sync functions
function runSafe(fn, fallback) {
try {
return fn();
} catch (e) {
// log minimal info for beginners
console.log("error:", String(e));
return fallback;
}
}
// Use it
const resultOk = runSafe(function () {
return 2 + 2;
}, 0);
const resultFail = runSafe(function () {
// simulate crash
throw new Error("boom");
}, 0);
console.log("ok:", resultOk, "fail:", resultFail);

Asynkroninen rajakohta
Kun työ on async-tyyppistä, käyttäkää try/catch-rakennetta await-lauseen ympärillä ja palauttakaa varamerkkijono tai -arvo.
// Async boundary: try/catch inside an async function
async function fetchNameFake(id) {
// simulate failure for odd ids
if (id % 2 === 1) {
throw new Error("not found");
}
return "Ayla";
}
async function loadName(id) {
try {
const name = await fetchNameFake(id);
return name;
} catch (e) {
console.log("async error:", String(e));
return "Guest";
}
}
(async function () {
console.log("even:", await loadName(2));
console.log("odd :", await loadName(3));
})();

Eristäkää riski
Älkää käärikö koko sovellusta. Eristäkää riskialtis vaihe, jotta virhe ei estä kaikkea muuta.
// Boundary only around the risky step, rest continues
function renderCard(userJson) {
// boundary: parse
const user = safeParseUser(userJson);
// rest of rendering can continue with fallback
return "Hello " + user.name;
}
console.log(renderCard("{\"name\":\"Lina\"}"));
console.log(renderCard("{broken}")); // still renders with fallback

Rajakohtien käytännöt
Tarkistuslista:
- Sijoittakaa pieni try/catch riskialttiiden kutsujen ympärille.
- Palauttakaa pieni varaarvo.
- Kirjatkaa lyhyesti lokiin (ei salaisuuksia).
- Toistakaa sama malli async-kutsuille.

Virherajojen perusteiden tietovisa
Pikatarkistus: Plain-JS-virheraja.

Kertaus
Kertaus: Lisätkää paikallinen try/catch riskialttiin koodin ympärille, käyttäkää runSafe-apufunktiota, käsitelkää async-toiminnot try/catch-rakenteella ja palauttakaa varaarvoja, jotta näkymä jatkaa toimintaansa.

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
Usein kysytyt kysymykset
Onko oppitunti ”Virherajat ilman frameworkeja — käsitteellinen johdanto” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Virherajat ilman frameworkeja — käsitteellinen johdanto”. 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ä 3 oppituntia.
Mitä opin oppitunnilla ”Virherajat ilman frameworkeja — käsitteellinen johdanto”?
Luo pieniä virherajoja puhtaalla JavaScriptillä: try/catch riskialttiin koodin ympärille, wrapper-apufunktiot, asynkroninen try/catch, oletusarvot ja minimaalinen lokitus 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/3.
Kuinka kauan ”Virherajat ilman frameworkeja — käsitteellinen johdanto”-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
- Syötteiden validointi ja escapauksen perusteet
- Objektien turvallinen yhdistäminen, jäädyttäminen ja sinetöinti
- Virherajat ilman frameworkeja — käsitteellinen johdanto