Du har fem brukernavn, ti priser eller hundre måleresultater som skal lagres i programmet ditt. Med vanlige variabler må du lage en ny variabel for hver eneste verdi, og du vet kanskje ikke engang hvor mange det blir. En array i JavaScript samler flere verdier under ett navn, og lar deg hente ut, endre og legge til elementer etter behov.
Slik oppretter du en array i JavaScript
En array lager du med firkantparenteser. Verdiene separeres med komma:
let frukt = ["eple", "paere", "banan", "drue"];
Du kan også starte med en tom array og fylle den senere:
let tall = [];
Firkantparentesene er det som forteller JavaScript at dette er en array, ikke en vanlig variabel. Forskjellen fra en variabel som inneholder en streng er at arrayen vet at verdiene er separate elementer. En streng med "eple, paere, banan" ser lik ut, men er bare sammenhengende tekst. Arrayen lar deg jobbe med hvert element for seg.
Nullbasert indeks: det som forvirrer alle i starten
Hvert element i en array har en posisjon, kalt indeks. Første element har indeks 0, ikke 1. Andre element har indeks 1, tredje har indeks 2, og slik fortsetter det:
frukt[0] gir "eple"
frukt[1] gir "paere"
frukt[2] gir "banan"
frukt[3] gir "drue"
Det kan virke tungvint at man ikke begynner på 1, men denne konvensjonen har en praktisk fordel. Når du senere bruker for-løkker sammen med arrays, gjør nullbasert indeks at tallene matcher perfekt uten at du trenger å trekke fra noe.
Hente ut verdier fra en array
For å hente en bestemt verdi skriver du arraynavnet etterfulgt av firkantparenteser med indeksnummeret:
let tredjeFrukt = frukt[2];
Prøver du å hente en indeks som ikke finnes, får du undefined tilbake. Ingen feilmelding, bare en tom verdi. Det gjør det lurt å alltid vite hvor mange elementer arrayen inneholder. Du kan sjekke det med length-egenskapen:
frukt.length gir 4
Siden arrayen er nullbasert, har det siste elementet alltid indeks length - 1. For å hente siste element i frukt-arrayen skriver du frukt[frukt.length - 1].
Legge til elementer med push
Den enkleste måten å legge til et nytt element er med push()-metoden. Den plasserer verdien på slutten av arrayen uten at du trenger å holde styr på indeksnummere:
frukt.push("melon");
Nå har arrayen fem elementer. Du kan også legge til flere verdier på en gang:
frukt.push("sitron", "klementin");
En alternativ fremgangsmåte er å bruke indeksnummeret direkte, som frukt[4] = "melon". Men dette skaper problemer hvis du bruker et tall som er mye høyere enn siste indeks. Skriver du frukt[10] = "appelsin", fyller arrayen alle plassene mellom med tomme verdier. Push unngår dette problemet helt.
Fjerne elementer med pop og shift
pop() fjerner det siste elementet og returnerer det. Du kan lagre verdien i en variabel i samme operasjon:
let sisteFrukt = frukt.pop();
Trenger du å fjerne fra begynnelsen i stedet, bruker du shift(). Men vær oppmerksom på at alle gjenværende elementer forskyves ett hakk nedover, slik at indeksnumrene endres. unshift() gjør det motsatte og legger til elementer i starten, med samme forskyvning. Derfor er push og pop generelt ryddigere å bruke. De lar de eksisterende elementene beholde sine indeksnumre.
Blande datatyper og arrayer i arrayer
En array i JavaScript kan inneholde alle datatyper. Du kan blande strenger, tall, boolske verdier og til og med andre arrayer:
let blanding = ["hei", 42, true, [1, 2, 3]];
Arrayen inne i arrayen har også sin egen indeks. For å hente verdien 3 fra den indre arrayen skriver du blanding[3][2]. Første firkantparentes velger den indre arrayen (indeks 3), andre firkantparentes velger elementet inne i den (indeks 2).
Slike arrayer i arrayer kalles multidimensjonale arrayer. De er nyttige for å lagre data som naturlig har rader og kolonner, for eksempel verdier fra en tabell. I praksis holder det for de fleste nybegynnere å forholde seg til enkle, endimensjonale arrayer.
Erstatte verdier i en array
Indeksnummeret brukes ikke bare til å hente verdier. Du kan også bruke det til å erstatte en eksisterende verdi:
frukt[1] = "kiwi";
Nå er "paere" byttet ut med "kiwi". Resten av arrayen er uendret. Denne teknikken er enkel, men krever at du vet nøyaktig hvilken indeks du vil endre. Når du begynner å jobbe med array-metoder, får du tilgang til mer fleksible måter å finne og endre verdier på.
Neste steg
Grunnleggende arrays er startpunktet. De virkelig nyttige operasjonene ligger i array-metoder som sort, join og includes, og i å kombinere arrays med for-løkker for å behandle hvert element automatisk. For en fullstendig oversikt over hva arrays kan gjøre i JavaScript, se MDN sin dokumentasjon for Array.
Denne videoen er hentet fra kurset JavaScript for nybegynnere på Utdannet.no, der instruktør Lars Vidar Nordli tar deg gjennom arrays fra grunn, viser hvordan du jobber med indekser og metoder, og bygger opp til praktiske prosjekter der arrays brukes i samspill med HTML og CSS.
