1.8 Objekter

Når vi har sammensatte data om noe, kan vi lagre verdiene i et objekt. For eksempel kan vi lagre et objekt som beskriver en person med fornavn, etternavn, alder, og øyenfarge. Vi bruker heller objekter enn arrayer når vi skal lagre forskjellige typer data om det samme. Vi definerer et objekt slik:

1 let person = { 2 fornavn : "Meera", 3 etternavn : "Singh", 4 alder : 24, 5 øyenfarge : "brun"

6 }

Objekter består av nøkkel–verdi-par mellom krøllparenteser. En nøkkel er navnet til en verdi. Vi skriver kolon mellom nøkkelen og verdien, og vi skiller nøkkel–verdiparene fra hverandre med komma. Vi henter ut enkeltverdier fra et objekt ved å skrive variabelnavnet og nøkkelnavnet med punktum mellom: person.fornavn. Med samme notasjon kan vi endre en verdi ved å skrive person.alder = 25.

Et objekt består av nøkkel–verdi-par. Vi definerer et objekt med to nøkkel–verdi-par slik:

1 let objektnavn = { 2 nøkkel1 : verdi1, 3 nøkkel2 : verdi2

4 }

Vi henter ut en verdi ved å skrive variabelnavnet til objektet etterfulgt av punktum og navnet på nøkkelen: objektnavn.nøkkel1. Vi endrer verdien til nøkkelen når vi i tillegg skriver = nyVerdi. Datatypen til objekter er object.

EKSEMPEL

I koden nedenfor har vi definert tre objekter som representerer varer i frukt- og grøntavdelingen i en matbutikk. I hvert objekt lagrer vi navnet, opprinnelseslandet, prisen og enheten til prisen. Vi viser frem innholdet til objektene i en liste.

1 <script> 2 let appelsin = { 3 navn : "appelsiner", 4 pris : 34.90, 5 prisEnhet : "kr per kg", 6 land : "Spania"

7 } 8 let agurk = { 9 navn : "agurk", 10 pris : 19.90, 11 prisEnhet : "kr per stk", 12 land : "Norge"

13 } 14 let lime = { 15 navn : "lime", 16 pris : 37.00, 17 prisEnhet : "kr per kg", 18 land : "Mexico"

19 } 20 21 </script>

22 23 <p><b>Tilbud på frukt og grønt!</b></p> 24 <ul> 25 <li>{appelsin.navn}: {appelsin.pris} {appelsin.prisEnhet}</li> 26 <li>{agurk.navn}: {agurk.pris} {agurk.prisEnhet}</li> 27 <li>{lime.navn}: {lime.pris} {lime.prisEnhet}</li> 28 </ul>

EKSEMPEL

Objekter i array

På samme måte som vi fyller tall og strenger i et array, kan vi fylle et array med objekter. Da slipper vi å definere én variabel for hvert objekt. I tabellen nedenfor finner du antall innbyggere i alderen 0 – 17 år i en kommune fra 2015 til 2020.

Årstall 2015 2016 2017 2018 2019 2020

Antall 39832 39976 40320 40683 40653 40780

I koden nedenfor har vi lagret den samme informasjonen som objekter i et array. I HTML-delen presenterer vi dataene i en tabell med en each-blokk.

1 <script> 2 let innbyggertall = [ 3 {år : "2015", antall : 39832}, 4 {år : "2016", antall : 39976}, 5 {år : "2017", antall : 40320}, 6 {år : "2018", antall : 40683}, 7 {år : "2019", antall : 40653}, 8 {år : "2020", antall : 40780} 9 ] 10 </script>

11 12 <table> 13 <tr> 14 <th>Årstall</th> 15 <th>Innbyggertall (0–17 år)</th> 16 </tr> 17 {#each innbyggertall as tall} 18 <tr>

19

<td>{tall.år}</td> 20 <td>{tall.antall}</td> 21 </tr> 22 {/each} 23 </table>

24

25 <style> 26 table { 27 border-collapse: collapse;

28 } 29 td { 30 border:1px solid black; 31 padding: 5px 10px; 32 text-align: center;

33 } 34 th { 35 border: 1px solid black; 36 background-color: #CCFFCC; 37 padding: 5px 10px;

38 } 39 </style>