Du har jobbet med variabler og arrays, og du klarer å lagre tall, tekst og lister. Men hva gjør du når du trenger å beskrive noe mer sammensatt, som en bil med merke, farge og antall dører? En enkel variabel holder ikke, og en array gir deg bare nummererte verdier uten navn. Objekter i JavaScript løser akkurat dette problemet.
Hva er objekter i JavaScript?
Et objekt er en samling av verdier der hver verdi har sitt eget navn (kalt en nøkkel). Der en array bruker tallindekser for å organisere data, bruker et objekt navngitte nøkler. Du lager et tomt objekt med krøllparanteser:
const bil = {};
For å fylle objektet med verdier, skriver du nøkkel-verdi-par adskilt med kolon. Hver verdi får et beskrivende navn, og parene skilles med komma:
const bil = { modell: "Opel", farge: "rød", hjul: 4 };
Nøkkelen "modell" peker på verdien "Opel", "farge" peker på "rød", og "hjul" peker på 4. Legg merke til at strenger må stå i anførselstegn, mens tall kan stå uten.
Hent verdier med dot notation
Den vanligste måten å hente en verdi fra et objekt på er med punktum (dot notation). Skriv objektnavnet, et punktum, og nøkkelen du vil hente:
bil.farge gir deg verdien "rød".
Du kan også bruke klammeparenteser med nøkkelnavnet som en streng: bil["farge"]. Resultatet er det samme, men klammer er nyttige i situasjoner der nøkkelnavnet ligger i en variabel. Hvis du for eksempel har const felt = "modell", vil bil[felt] returnere "Opel". Med punktum ville bil.felt lete etter en nøkkel som bokstavelig heter "felt", og gi deg undefined tilbake.
Bruk punktum til vanlig. Bruk klammer når nøkkelen kommer fra en variabel.
Legg til og endre verdier
Å legge til en ny verdi på et objekt er like enkelt som å tilordne den:
bil.dører = 2;
Nå har objektet fire nøkler: modell, farge, hjul og dører. For å endre en eksisterende verdi bruker du samme syntaks:
bil.farge = "gul";
Verdien til "farge" er nå "gul" i stedet for "rød". Det fine med objekter er at du kan bygge dem opp gradvis. Start med noen få nøkler, og legg til flere etter hvert som programmet trenger det.
Mønsteret er likt det du allerede kjenner fra DOM-manipulering: element.innerHTML = "ny tekst" og element.style.color = "rød" er begge eksempler på å endre verdier i objekter. Nesten alt i JavaScript er objekter, og mye av det du har gjort med HTML-elementer følger nøyaktig dette mønsteret.
Metoder gir objekter oppførsel
En metode er en funksjon som ligger inne i et objekt. Du definerer den som en nøkkel-verdi, der verdien er en funksjon:
const bil = { lyd: "brombrom", start: function() { console.log(this.lyd); } };
Kall metoden med bil.start(), og du får "brombrom" i konsollen. Du kan også bruke funksjonsparametere i metoder, akkurat som i vanlige funksjoner. Definer parameteren i parentesene, og send inn verdien når du kaller metoden.
Legg merke til nøkkelordet this i eksempelet. Det refererer tilbake til objektet metoden tilhører. Uten this måtte du ha skrevet objektnavnet direkte, og det skaper problemer hvis objektet kopieres til en ny variabel.
Hvorfor this er viktig
Tenk deg at du kopierer bil-objektet til en ny variabel kalt transport, og deretter tømmer det originale bil-objektet. Hvis startmetoden bruker bil.lyd i stedet for this.lyd, vil transport.start() lete etter verdien i det nå tomme bil-objektet og returnere undefined.
Med this.lyd henter metoden verdien fra det objektet den faktisk tilhører. Transport.start() ville hentet lydverdien fra transport-objektet. Bruk alltid this når en metode skal referere til verdier i sitt eget objekt.
Når du trenger flere objekter med samme struktur
Objekter i JavaScript er spesielt nyttige for å beskrive ting fra virkeligheten: en person med navn, alder og yrke, en vare med pris og beskrivelse, en bruker med e-post og passord. Hvis du trenger mange objekter med samme struktur, finnes det en effektiv løsning med constructor-funksjoner. I stedet for å skrive hvert objekt manuelt, definerer du en mal og bruker den til å opprette nye instanser.
Objekter brukes også sammen med arrays. En vanlig kombinasjon er en array som inneholder flere objekter, for eksempel en liste med produkter der hvert produkt er et objekt med nøklene navn, pris og kategori. Denne strukturen er grunnlaget for mye av databehandlingen du gjør i JavaScript.
Objekter og nettleseren
Du har allerede brukt objekter uten å tenke over det. Math.PI henter verdien pi fra Math-objektet. document.querySelector henter en metode fra document-objektet. Når du setter element.style.color, endrer du en verdi i et nestet objekt. Å forstå objekter gir deg et klarere bilde av hvordan JavaScript kommuniserer med nettleseren og DOM-en.
Nettleseren tilbyr også et objekt for lokal lagring kalt localStorage. Med det kan du lagre data som overlever at brukeren lukker nettleservinduet. Handlelister, brukerinnstillinger og skjemadata er typiske ting du kan ta vare på med localStorage, uten å sette opp en database.
Gå videre med objekter i JavaScript
Objekter er en av de viktigste byggesteinene i JavaScript, og de dukker opp overalt. Kurset JavaScript for nybegynnere på Utdannet.no, med instruktør Lars Vidar Nordli, tar deg gjennom objekter, metoder, this-nøkkelordet og constructor-funksjoner med praktiske eksempler. Du bygger blant annet en komplett handleliste-app der du bruker objekter sammen med DOM-manipulering og events.
