Vanilla JavaScript for nybegynnere: slik skriver du mindre, renere og raskere kode
Mange starter med JavaScript via rammeverk som React eller Vue. Det er fristende, for de lover tempo og «riktige» måter å jobbe på. Men hvis du hopper over grunnmuren, blir alt tyngre senere.
Vanilla JavaScript er bare ren JavaScript uten rammeverk. Lærer du deg det skikkelig, blir du raskere til å feilsøke, mer uavhengig av trender og du skriver ofte mindre og mer robust kode.
Hva betyr egentlig vanilla JavaScript?
Vanilla JavaScript betyr ganske enkelt JavaScript slik det kommer i nettleseren, uten ekstra biblioteker som jQuery eller rammeverk som React, Angular eller Svelte. Du bruker de innebygde API-ene somdocument,fetchoglocalStorage.
Poenget er ikke å være «anti-rammeverk», men å forstå hva rammeverkene egentlig bygger på. Da skjønner du bedre hva som skjer «under panseret», og du blir langt mindre låst til én måte å gjøre ting på.
Når holder det med vanilla JavaScript?
Du trenger ikke et rammeverk for alt. Mange små og mellomstore prosjekter er enklere å vedlikeholde med ren JavaScript, spesielt hvis du fokuserer på noen få typiske oppgaver som går igjen.
Vanilla JavaScript passer spesielt godt når du skal:
- legge til interaksjon på en ellers statisk side, for eksempel åpne og lukke en meny
- validere skjemafelt før innsending
- hente og vise data fra et API uten kompliserte tilstander
- lage mindre admin- eller interne verktøy hvor ytelse og lastetid er viktig
Moderne DOM-manipulasjon uten jQuery
Mange kodebaser drar fortsatt rundt på jQuery bare for å velge elementer og lytte på klikk. Moderne JavaScript har innebygde metoder som gjør det lett å kutte ut dette.
Et typisk klikkeksempel ser slik ut i vanilla JavaScript:
Eksempel: toggling av mobilmeny
HTML-en kan for eksempel være:
<button id=”menu-toggle”>Meny</button>
<nav id=”main-nav” hidden>…</nav>
JavaScript:
const toggleButton = document.querySelector(‘#menu-toggle’);
const nav = document.querySelector(‘#main-nav’);
toggleButton.addEventListener(‘click’, () => {
const isHidden = nav.hasAttribute(‘hidden’);
if (isHidden) {
nav.removeAttribute(‘hidden’);
} else {
nav.setAttribute(‘hidden’, ”);
}
});
Bruk klasser og data-attributter i stedet for inline-logikk
En vanlig feil er å legge for mye stil og logikk direkte på elementer via JavaScript, for eksempel ved å endrestyle-egenskaper en og en. Det blir fort uoversiktlig og vanskelig å endre senere.
En mer vedlikeholdbar tilnærming er å:
- la CSS styre utseende via klasser
- la JavaScript bare legge til eller fjerne klasser eller attributter
- brukedata-*attributter til å knytte logikk til elementer
Eksempel: toggling med klasser
CSS:
.is-open { display: block; }
.is-closed { display: none; }
JavaScript:
nav.classList.toggle(‘is-open’);
nav.classList.toggle(‘is-closed’);
Strukturer koden med små, rene funksjoner
En av grunnene til at mange løper til rammeverk, er at vanilla-koden deres har blitt en lang, uoversiktlig fil. Ofte skyldes det at all logikk ligger i én stor klikk-handler uten tydelig struktur.
Du kan komme veldig langt bare ved å dele opp koden i små funksjoner med klare navn. Da blir det lettere å gjenbruke og teste, og du kan flytte over til moduler eller rammeverk senere uten full omskriving.
Eksempel: bryt opp en hendelse i mindre biter
I stedet for én stor:
button.addEventListener(‘click’, () => {
// 30 linjer med blandet logikk
});
Gjør heller:
button.addEventListener(‘click’, () => {
const data = readFormData();
const isValid = validateFormData(data);
if (!isValid) {
showErrors();
return;
}
submitForm(data);
});
Unngå globale variabler: bruk moduler og IIFE
Globale variabler gjør koden skjør og vanskelig å kombinere med andre skript. I moderne prosjekter brukes ofte ES-moduler medtype=”module”i script-taggen, noe som gir deg et lokalt scope som standard.
Hvis du ikke kan bruke moduler enda, kan du fortsatt isolere logikken med en IIFE (Immediately Invoked Function Expression):
(function () {
const button = document.querySelector(‘#menu-toggle’);
const nav = document.querySelector(‘#main-nav’);
// resten av koden, ingen lekkasje til global scope
})();
Jobb med API-er uten ekstra biblioteker
For mange enkle API-kall erfetchogasync/awaitmer enn nok. Det gir deg god lesbarhet uten å dra inn tunge biblioteker bare for å sende en HTTP-forespørsel.
Eksempel: hent data og vis en liste
async function loadUsers() {
const response = await fetch(‘/api/users’);
if (!response.ok) {
console.error(‘Feil ved henting av brukere’);
return;
}
const users = await response.json();
renderUserList(users);
}
function renderUserList(users) {
const list = document.querySelector(‘#user-list’);
list.innerHTML = ”;
users.forEach(user => {
const li = document.createElement(‘li’);
li.textContent = user.name;
list.appendChild(li);
});
}
Ytelse: mindre JavaScript er ofte bedre JavaScript
Hver ekstra kilobyte JavaScript skal lastes ned, parses og kjøres i nettleseren. På mobile enheter med treg CPU kan dette merkes tydelig, spesielt hvis du bruker tunge rammeverk for små behov.
Ved å løse typiske UI-oppgaver med vanilla JavaScript kan du ofte:
- kutte størrelsen på den totale koden ganske mye
- redusere tiden før siden føles responsiv
- gjøre det enklere å feilsøke, fordi det er færre lag mellom deg og nettleseren
Vanlige feil når du bruker vanilla JavaScript
Det finnes noen gjengangere som gjør koden mer sårbar enn nødvendig. Hvis du unngår disse, kommer du langt:
- å anta at et element alltid finnes, uten å sjekke fornull
- å binde event listeners før DOM-en er klar, uten å brukeDOMContentLoadedeller modul-skript
- å legge tung logikk direkte i event handlers uten å dele den opp
- å brukeinnerHTMLukritisk i stedet for å bygge elementer trygt viacreateElement
Hvordan komme i gang på en strukturert måte
For å få mest mulig ut av vanilla JavaScript, er det lurt å jobbe bevisst med ekte, små problemer i stedet for abstrakte øvingsoppgaver. Velg gjerne ett konkret område om gangen.
Noen gode småprosjekter kan være:
- en filtrerbar liste (for eksempel filtrere produkter eller artikler etter tekst)
- en modal-dialog som åpnes og lukkes på en tilgjengelig måte
- et skjema med sanntidsvalidering og tydelige feilmeldinger
- et lett, klient-side søk i en liten datasamling
Når det faktisk lønner seg å bruke rammeverk
Selv om vanilla JavaScript er sterkt, finnes det grenser. Store applikasjoner med kompleks tilstand, rikelig deling av komponenter eller team med mange utviklere kan ha nytte av et gjennomarbeidet rammeverk.
Forskjellen er at hvis du først har bygget en god forståelse av ren JavaScript, vil du:
- plukke riktigere verktøy til riktig problem
- forstå bedre hvorfor rammeverket gjør som det gjør
- lette overgangen mellom ulike teknologier når trendene endrer seg
Start derfor med å løse noen av dagens oppgaver i prosjektet ditt med vanilla JavaScript. Ofte oppdager du at behovet for tunge verktøy er mindre enn du trodde, og at du får en raskere og mer robust løsning på kjøpet.
0 kommentarer