Lister i JavaScript: slik bruker du arrays til å lagre, finne og endre data

Hvis du skal lage noe som helst litt nyttig i JavaScript, kommer du fort borti lister. Enten du bygger en enkel nettside, et lite spill eller et admin-panel, trenger du en måte å lagre flere verdier på samme sted.

I JavaScript gjør du dette medarrays. Forstår du hvordan arrays fungerer, blir det mye lettere å jobbe strukturert, unngå feil og skrive kode du faktisk klarer å lese igjen senere.

Hva er en array, og hvorfor bruke den?

En array er en ordnet samling av verdier lagret i én variabel. I stedet for å ha const bruker1, bruker2, bruker3, kan du ha const brukere = [...]; og jobbe med alle samlet.

Du bruker arrays når du skal håndtere flere ting av samme type: produkter i en nettbutikk, meldinger i en chat, tall som skal regnes på, eller ruter i en meny. Det gjør koden mer kompakt og mye enklere å utvide.

Slik lager du en array i JavaScript

Du kan lage arrays på flere måter, men for moderne kode er dette mest vanlig:

• const tall = [1, 2, 3, 4];
• const navn = ["Anna", "Ali", "Sara"];
• const blandet = ["tekst", 42, true];

JavaScript lar deg blande typer i samme array, men det er ofte ryddigere å holde deg til én type om du kan. Da blir det enklere å forstå hva arrayen inneholder og hvordan den brukes.

Hente og endre verdier med indeks

Hver verdi i en array har en posisjon, kalt indeks. I JavaScript begynner indeksen på 0, ikke 1. Det betyr at første element har indeks 0, andre har 1, og så videre.

Med const navn = ["Anna", "Ali", "Sara"]; får du tak i verdiene slik:

• navn[0] gir "Anna"
• navn[1] gir "Ali"
• navn[2] gir "Sara"

Du kan også endre en verdi på en bestemt indeks: navn[1] = "Ola"; bytter ut "Ali" med "Ola". Dette er nyttig når du skal oppdatere noe spesifikt, for eksempel status på en bestilling eller navn i en liste.

Finne lengden og unngå vanlige feil

For å vite hvor mange elementer en array har, bruker du .length:

const varer = ["Brød", "Melk", "Egg"];
console.log(varer.length); // 3

Skal du gå gjennom hele arrayen, er det lurt å bruke .length i stedet for å skrive inn et tall for hånd. Da tåler koden at listen blir lengre eller kortere senere, uten at du må endre løkkelogikken.

Legge til og fjerne elementer

Du kommer ofte til å måtte oppdatere lister dynamisk. JavaScript har innebygde metoder som gjør dette mye enklere enn å finne opp egne løsninger.

Legge til i starten og slutten

• Legg til bakerst:array.push(verdi)
• Legg til først:array.unshift(verdi)

Eksempel:

const handleliste = ["Brød"];
handleliste.push("Melk"); // ["Brød", "Melk"]
handleliste.unshift("Smør"); // ["Smør", "Brød", "Melk"]

Fjerne fra starten og slutten

• Fjern bakerste:array.pop() returnerer også det som ble fjernet
• Fjern første:array.shift() gjør det samme i starten

Dette er nyttig i alt fra køsystemer til “siste åpne dokumenter” i et panel.

Finne elementer med includes, indexOf og find

Ofte trenger du å sjekke om en verdi finnes i en array, eller finne hvor den ligger. Det finnes flere metoder, med litt ulike bruksområder.

includes og indexOf for enkle verdier

• array.includes(verdi) gir true eller false
• array.indexOf(verdi) gir indeksen eller -1 hvis den ikke finnes

Eksempel:

const navn = ["Anna", "Ola", "Sara"];
navn.includes("Ola"); // true
navn.indexOf("Sara"); // 2

find og findIndex for mer komplekse data

Når arrayen inneholder objekter, blir find og findIndex mye mer nyttige. Da sender du inn en funksjon som beskriver hva du leter etter.

Eksempel med brukere:

const brukere = [
{ id: 1, navn: "Anna" },
{ id: 2, navn: "Ola" }
];

const funnet = brukere.find(b => b.id === 2);
// gir { id: 2, navn: "Ola" }

const indeks = brukere.findIndex(b => b.navn === "Anna");
// gir 0

Gå gjennom arrayen med for-of og forEach

Når du skal gjøre noe med alle elementene i en array, brukes ofte en løkke. I moderne JavaScript er for...of og forEach gode valg, fordi de gjør koden lett å lese.

for-of: tydelig og fleksibelt

const tall = [10, 20, 30];
for (const t of tall) {
console.log(t);
}

Her får du direkte tilgang til hvert element, uten å tenke på indekser. Det passer godt når du bare skal lese verdiene.

forEach: når du vil kjøre en funksjon på hvert element

tall.forEach((t, indeks) => {
console.log("Indeks:", indeks, "verdi:", t);
});

Fordelen med forEach er at du kan sende inn en funksjon, og du får både verdi og indeks om du trenger det. Ulempen er at du ikke lett kan avbryte løkken underveis.

Transformere arrays med map og filter

Når du er komfortabel med grunnleggende arrays, er neste steg å lære map og filter. De brukes hele tiden i moderne JavaScript, spesielt med rammeverk som React.

map: lag en ny array basert på den gamle

const tall = [1, 2, 3];
const doblet = tall.map(t => t * 2);
// doblet er nå [2, 4, 6]

Originalen endres ikke. Det gjør det enklere å unngå uforutsigbare bivirkninger i koden.

filter: behold bare det som matcher et kriterium

const tall = [1, 2, 3, 4, 5];
const partall = tall.filter(t => t % 2 === 0);
// partall er [2, 4]

Filter er nyttig når du for eksempel vil vise bare aktive brukere, produkter på tilbud eller meldinger som ikke er lest.

Muterende metoder og hvorfor det betyr noe

Noen array-metoder endrer originalen, andre lager en ny versjon. Dette er viktig å ha et forhold til, spesielt når du bruker rammeverk som forventer at du jobber såkalt “immutabelt”.

Typiske metoder som endrer originalen er push, pop, shift, unshift og splice. Metoder som map, filter og slice lager nye arrays.

Et tryggere mønster når du vil legge til et element, er for eksempel:

const nyeBrukere = [...brukere, nyBruker];

Her lager du en ny array i stedet for å endre den gamle direkte. Det gjør koden lettere å teste og feilsøke.

Praktisk oppsummering: hva bør du øve på?

For å få skikkelig grep om arrays i JavaScript, er det lurt å trene på noen konkrete oppgaver. For eksempel kan du:

• Lage en handleliste der du kan legge til og fjerne varer
• Filtrere en liste med tall til bare partall eller tall over en viss grense
• Bruke map til å gjøre om en liste med priser fra kroner til øre
• Finne en bestemt bruker i en array med objekter ved hjelp av find

Jo mer du jobber med arrays i små, konkrete problemer, desto mer naturlig vil det føles å bruke dem i større prosjekter. Da blir lister ikke lenger noe mystisk, men et verktøy du har god kontroll på.