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

Arrays i JavaScript er en av de viktigste byggesteinene du kan lære deg tidlig. Så snart du skal håndtere flere verdier samtidig, blir arrays nesten umulig å unngå.

I denne artikkelen ser vi på hva arrays er, hvordan du oppretter dem, finner data, legger til og fjerner elementer og unngår noen vanlige misforståelser. Eksemplene er korte, konkrete og tilpasset deg som fortsatt bygger opp erfaring.

Hva er en array, og hvorfor bruke den?

En array er en struktur som lar deg samle flere verdier i én variabel. I stedet for å ha ti forskjellige variabler for ti tall, kan du ha én array som inneholder alle tallene.

Du bruker arrays når du for eksempel vil lagre en liste med produkter, brukernavn, sider i en meny eller resultater fra et skjema.

En første array i JavaScript

I JavaScript lager du en array med klammeparenteser:

Eksempel:

const tall = [1, 2, 3, 4];
const navn = ["Anna", "Jonas", "Sara"];

Her har tall en liste med tall, og navn en liste med tekstverdier (strings). En array kan også inneholde blandede typer, men det gjør ofte koden vanskeligere å forstå, så prøv å holde innholdet mest mulig likt.

Indekser: slik får du tak i verdiene

For å hente ut en verdi fra en array, bruker du en indeks. Indekser starter på 0, ikke 1. Det betyr at første element er på plass 0, andre på plass 1, og så videre.

Eksempel:

const dyr = ["katt", "hund", "fugl"];
console.log(dyr[0]); // "katt"
console.log(dyr[1]); // "hund"

Endre en verdi i en array

Du kan også endre verdier ved å bruke indeksen:

dyr[1] = "kanin";
console.log(dyr); // ["katt", "kanin", "fugl"]

Legg merke til at selve array-variabelen er deklarert med const, men du kan fortsatt endre innholdet. const hindrer deg bare i å peke variabelen til en helt ny array.

Legge til og fjerne elementer

JavaScript har flere innebygde metoder for å håndtere arrays. De to du garantert vil bruke mye, er push og pop.

push legger til et element på slutten, og pop fjerner det siste elementet.

push og pop

Eksempel:

const handleliste = ["brød", "melk"];

// Legg til på slutten
handleliste.push("ost");
console.log(handleliste); // ["brød", "melk", "ost"]

// Fjern siste element
const siste = handleliste.pop();
console.log(siste); // "ost"
console.log(handleliste); // ["brød", "melk"]

unshift og shift

Skal du jobbe i starten av arrayen, bruker du unshift for å legge til først, og shift for å fjerne første element.

const kø = ["bruker2", "bruker3"];

// Legg til i starten
kø.unshift("bruker1");
console.log(kø); // ["bruker1", "bruker2", "bruker3"]

// Fjern første
const første = kø.shift();
console.log(første); // "bruker1"
console.log(kø); // ["bruker2", "bruker3"]

Finne ting i en array

Ofte trenger du å sjekke om en verdi finnes, eller hvor den ligger. Her er noen nyttige metoder:

• includessjekker om en verdi finnes
• indexOfgir deg indeksen til en verdi

Eksempel:

const brukernavn = ["anna", "ole", "maria"];

if (brukernavn.includes("ole")) {
  console.log("Navnet er opptatt");
}

const indeks = brukernavn.indexOf("maria");
console.log(indeks); // 2

Finne mer komplekse ting med find

Når du begynner å bruke objekter i arrays, blir find veldig nyttig. Den lar deg finne første element som matcher en betingelse.

const produkter = [
 { id: 1, navn: "T-skjorte", pris: 199 },
 { id: 2, navn: "Bukse", pris: 499 }
];

const billig = produkter.find(p => p.pris <= 200);
console.log(billig.navn); // "T-skjorte"

Her brukes en kort piltabellfunksjon som sier: finn et produkt p der p.pris <= 200.

Iterasjon: gå gjennom alle elementene

Når du vil utføre noe for hvert element, trenger du å iterere. I moderne JavaScript er forEach og map blant de mest brukte metodene.

forEachbrukes når du vil gjøre noe, for eksempel logge til konsollen eller oppdatere brukergrensesnittet.

forEach i praksis

const navn = ["Lise", "Tore", "Ahmed"];

navn.forEach((person, indeks) => {
  console.log(indeks, person);
});

Her får du både elementet (person) og indeksen, som ofte er nyttig når du skal vise lister på en nettside.

map for å lage nye arrays

map lager en ny array basert på den gamle. Den er nyttig når du vil transformere data, for eksempel legge til tekst eller omregne verdier.

const priser = [100, 200, 300];

const priserMedMva = priser.map(p => p * 1.25);
console.log(priserMedMva); // [125, 250, 375]

Originalen priser er uendret. Dette er en fin vane når du vil unngå uventede bivirkninger i koden.

Vanlige feller og hvordan du unngår dem

Noen typiske misforståelser går igjen når man jobber med arrays i JavaScript. Her er tre det lønner seg å kjenne til.

For det første: ikke stol på == når du sammenligner arrays. To arrays er bare like med === hvis de er akkurat samme objekt i minnet, selv om innholdet ser likt ut.

Array-lengde og “hull” i data

Hvis du manuelt setter length til en høyere verdi, lager du tomme plasser i arrayen. De kan gi rare utslag når du itererer eller logger.

const arr = [1, 2];
arr.length = 5;
console.log(arr); // [1, 2, <3 tomme elementer>]

Unngå å sette length direkte. Bruk heller metodene for å legge til eller fjerne elementer.

Muterende metoder vs nye arrays

Noen metoder endrer arrayen direkte, for eksempel push, pop og splice. Andre lager nye arrays, for eksempel map, filter og slice.

Hvis du jobber med kode der flere funksjoner deler samme array, kan det være tryggere å bruke metoder som lager kopier. Da blir det enklere å se hvor data faktisk endres.

Når du bør vurdere andre strukturer

Arrays passer godt når rekkefølgen spiller en rolle, eller når du ofte går gjennom alle elementer. Men i noen tilfeller finnes det bedre valg.

Skal du slå opp verdier ofte basert på en nøkkel, for eksempel et id-nummer eller et brukernavn, kan et objekt eller Map være mer passende enn en array. Da slipper du å lete gjennom hele listen hver gang.

Veien videre: bygg små øvelser

Den beste måten å bli trygg på arrays på er å lage små, konkrete øvelser du faktisk ser for deg i hverdagen. Det kan være en handleliste, en todo-liste eller en liten tabell med spillresultater.

Prøv for eksempel å:

• lage en liste med oppgaver og en funksjon som markerer en oppgave som fullført
• filtrere ut alle produkter dyrere enn en viss pris
• sortere en liste med navn alfabetisk

Hver gang du løser et lite problem med arrays, sitter kunnskapen bedre. Etter hvert vil du bruke disse teknikkene helt automatisk i større prosjekter.