2.1 Gjenbruke variabler og funksjoner

Vi har skrevet inn filnavnet som en kommentar i de fleste kodeboksene i dette kapittelet, for eksempel

<!-- trapes.svelte -->.

EKSPORTERE EN FUNKSJON

I mappen src/routes i et SvelteKit-prosjekt har vi to Svelte-filer: trapes.svelte og addering.svelte. Koden i filene ser slik ut:

1 <!-- trapes.svelte --> 2 <script> 3 let leggSammen = (a, b) => { 4 return a + b

5 } 6 7 let regnUtArealAvTrapes = (topplengde, bunnlengde, hoeyde) => { 8 let sum = leggSammen(topplengde, bunnlengde) 9 return (sum * hoeyde) / 2

10 } 11 12 let a = 1 13 let b = 2 14 let c = 1 15 </script>

16 17 <label>Bunnlinje: <input type="number" bind:value={a} /></label> 18 <label>Topplinje: <input type="number" bind:value={b} /></label> 19 <label>Høyde: <input type="number" bind:value={c} /></label>

20 21 <div> 22 Arealet av trapeset er: {regnUtArealAvTrapes(a, b, c)} 23 </div>

1 <!-- addering.svelte --> 2 <script> 3 let a = 1 4 let b = 2

5 6 let leggSammen = (x, y) => { 7 return x + y

8 } 9 </script>

10 11 <input type="number" bind:value={a} /> + <input type="number" bind:value={b} /> 12 = {leggSammen(a, b)}

I begge filene har vi en funksjon som legger sammen to tall: leggSammen. For at vi skal slippe å skrive den samme funksjonen i begge filene, kan vi legge funksjonen inn i en JJavaScript-fil, og så importerer begge Svelte-filene funksjonen derfra.

Vi oppretter filen matematikk.js og lagrer den i den samme mappen som de to Svelte-filene. Vi limer inn funksjonen leggSammen. For at det skal være mulig å importere funksjonen, må vi skrive export foran definisjonen av funksjonen.

1 // matematikk.js

2

3 /* 4 * Fordi vi har skrevet "export" foran funksjonen, 5 * kan vi importere den til andre filer. 6 */ 7 export let leggSammen = (x, y) => { 8 return x + y

9 }

Pass på at filen slutter på .js når du lagrer den, for dette signaliserer til datamaskinen at filen er en ren JavaScript-fil.

Datamaskinen forstår filer som slutter på .js og .svelte, forskjellig

Bokstavene som står etter punktumet i et filnavn, forteller datamaskinen hvordan den skal tolke innholdet i filen. Filer som slutter på .js, inneholder bare kode, mens filer som slutter på .svelte, er nettsider. Hvis vi vil gjenbruke funksjoner og variabler, må de ligge i en fil som slutter på .js.

For å importere funksjonen til en fil skriver vi import { leggSammen } from "./mappen/filen.js". Fordi vi har lagt matematikk.js i samme mappe som filene funksjonen skal importeres til, skriver vi import { leggSammen } from "./matematikk.js" i begge Svelte-filene, altså uten noe mappenavn før filnavnet.

Vi sletter også den eksisterende leggSammen-funksjonen fra begge filene. Da ser de første linjene i Svelte-filene slik ut, mens resten av innholdet er uendret:

1 <!-- trapes.svelte --> 2 <script> 3 import { leggSammen } from "./matematikk.js" 4 // Slett de neste linjene der vi definerer leggSammen, og la resten stå.

1 <!-- addering.svelte --> 2 <script> 3 import { leggSammen } from "./matematikk.js" 4 // Slett de neste linjene der vi definerer leggSammen, og la resten stå.

Når du åpner nettsidene igjen, skal de fungere på samme måte som før. Forskjellen er at nå importerer begge filene funksjonen leggSammen fra en felles fil.

Nøkkelordene export og import

Hvis vi skriver export foran en funksjon eller en variabel i en JavaScript-fil,

for eksempel export let enVariabel = 1 eller export let enFunksjon = () => { … }, kan vi importere funksjonen eller variabelen inn i andre filer ved hjelp av

import { enVariabel, enFunksjon } from "./mappen/filen.js"

Når vi importerer en variabel eller en funksjon, oppfører koden for denne seg som om den var definert inni filen som vi importerer den til. Det er ingen begrensning på hvor mange filer som kan importere variabelen eller funksjonen når den først er eksportert.

EKSEMPEL

Eksportere en variabel

Det eneste du trenger å gjøre for å eksportere en variabel, er å skrive export foran den. Når vi jobber med matematikk, kan det for eksempel være nyttig å ha tilgang til hvor mange grader det er i en sirkel, og hva verdien av π er.

1 // matematikk.js 2 export let leggSammen = (x, y) => { 3 return x + y

4 } 5 6 // Disse to linjene er nye. 7 export let PI = 3.14 8 export let GRADER_I_SIRKEL = 360

Når vi eksporterer en variabel fra en fil, pleier vi som regel å skrive navnet med store bokstaver og med understrekingstegn mellom ordene. Det signaliserer at verdien er konstant, altså at den ikke bør endres (selv om det er teknisk mulig).

1 <!-- sirkel.svelte --> 2 <script> 3 import { PI, GRADER_I_SIRKEL } from "./matematikk.js"

4 5 let radius = 1 6 </script>

7 8 <h1>Sirkel</h1> 9 <label>Radius: <input type="number" bind:value={radius} /></label> 10 <div> 11 Areal: {PI * radius * radius}. Sirkelen har {GRADER_I_SIRKEL} grader (som alle sirkler).

12 13 </div>

EKSEMPEL

Gi nytt navn til importert kode

Av og til kan det være greit å endre navnet på det vi importerer. Det kan for eksempel hende at det vi importerer, har samme navn som noe annet i filen, eller at det blir lettere å lese koden hvis vi velger et annet navn. For å endre navnet på det vi importerer, skriver vi nøkkelordet as etterfulgt av det nye navnet:

import { PI as PI_MED_TO_DESIMALER } from "./matematikk.js"

y

x1

I matematikken gir abcregelen oss løsningene til en andregradsligning. Vi kan også si at vi finner nullpunktene til en andregradsfunksjon.

x2 f(x) = ax2 + bx + c x = –b ± √ b2 – 2a 4ac

x

STANDARDEKSPORT

Hvis en fil har et tydelig hovedelement, kan vi definere dette elementet som filens standardeksport. Vi begynner med å se hvordan dette gjøres i praksis.

Hvis vi lager en funksjon som løser andregradsligninger, og lagrer den i filen andregradsligninger.js, har funksjonen en tydelig hovedrolle. Derfor lar vi dette være standardeksporten. For å gjøre funksjonen til filens standardeksport

skriver vi export default loesAndregradsligning etter at vi har definert den.

En andregradsligning på formen ax 2 bx c 0 har løsningene

x

b b 2 4ac 2a Ligningen har to løsninger dersom b ac 2 4 0 og én løsning dersom b ac 2 4 0 .

1 // andregradsligninger.js 2 export let harKvadratrot = (tall) => { 3 return tall >= 0

4 } 5 6 let loesAndregradsligning = (a, b, c) => { 7 let d = b * b - 4 * a * c 8 let harIngenReellLoesning = !harKvadratrot(d) 9 if (harIngenReellLoesning) { 10 return null

11 } 12 let kvadratrot = Math.sqrt(d) 13 let loesning1 = (-b + kvadratrot) / (2 * a) 14 let loesning2 = (-b - kvadratrot) / (2 * a) 15 let harKunEnLoesning = loesning1 === loesning2 16 if (harKunEnLoesning) { 17 return [loesning1]

18 } 19 return [loesning1, loesning2]

20 } 21

Når vi skal importere en standardeksport, skriver vi koden for denne før eventuelle andre importer og uten krøllparenteser. Når vi importerer en standardeksport, står vi fritt til å velge hva funksjonen skal hete i filen vi importerer den til.

Koden nedenfor er et program der brukeren kan angi verdier for koeffisientene a, b og c i input-felt. Programmet importerer funksjonen loesAndregradsligning og bruker den til å finne og vise frem eventuelle løsninger av ligningen. Som du ser i koden nedenfor, velger vi å kalle funksjonen loes når vi importerer den, slik at vi sparer litt plass.

Slik vises andregradskalkulatoren.

1 <!-- loes-andregradsligning.svelte --> 2 <script> 3 import loes, { harKvadratrot } from "./andregradsligninger.js"

4 5 let a = 0 6 let b = 0 7 let c = 0

8 9 $: loesning = loes(a, b, c) 10 </script>

11 12 <h1>Løs andregradsligninger</h1>

13 14 <p>Omform andregradsligningen til du har den på formen: </p>

15 16 <div style="margin: 1rem"> 17 ax² + bx + c = 0 18 </div>

19 20 <label>a: <input type="number" bind:value={a} /></label> 21 <label>b: <input type="number" bind:value={b} /></label> 22 <label>c: <input type="number" bind:value={c} /></label>

23 24 <div> 25 {#if loesning === null} 26 Ingen reell løsning 27 {:else} 28 Løsninger: {loesning} 29 {/if} 30 </div>

31 32 <h2>Har kvadratrøtter</h2> 33 <ul> 34 <li>{a} har kvadratrot: {harKvadratrot(a)}</li> 35 <li>{b} har kvadratrot: {harKvadratrot(b)}</li> 36 <li>{c} har kvadratrot: {harKvadratrot(c)}</li> 37 </ul>

38 39 <style> 40 input { 41 width: 5rem;

42 } 43 </style>

Hvis du vil bytte navn når du importerer en vanlig eksport, det vil si en navngitt eksport (named export på engelsk), må du nevne elementets opprinnelige navn:

import { opprinneligNavn as nyttNavn } from …

Med en standardeksport kan du velge navn selv. Her står du fritt til å velge import

opprinneligNavn from … eller import nyttNavn from …, uten å vise til det opprinnelige navnet.

Standardeksporter er litt kontroversielle. Fordi vi står fritt til å velge hva de skal hete når vi importerer dem, har de ikke et fast navn. Da kan det være vanskelig å søke dem opp i kodebasen. Hvis du vil finne alle filer der en navngitt eksport er importert, kan du søke gjennom kodebasen etter opprinneligNavn. Da finner du garantert alle filene som inneholder eksporten. Vi har ikke den samme garantien med standardeksporter. Hvis kodebasen inneholder mange standardeksporter, kan den bli uoversiktlig. Derfor anbefaler vi at du bare bruker standardeksporter når du har en god grunn til det, og at du ellers bruker navngitte eksporter.

Definere og importere en standardeksport

Hvis en funksjon eller en variabel har en tydelig hovedrolle i en fil, kan vi gjøre dette til filens standardeksport (default export på engelsk). Når vi skal definere en standardeksport, må vi først definere funksjonen eller variabelen uten å eksportere den: let etEllerAnnet = … Senere i samme fil skriver vi en linje der det står export default etEllerAnnet. Da er etEllerAnnet blitt filens standardeksport. Når vi skal importere en standardeksport, setter vi ikke krøllparenteser rundt navnet. Dersom standardeksporten ligger i en fil som heter foo.js, og denne filen ligger i den samme mappen som filen vi importerer til, skriver vi:

import etEllerAnnet from "./foo.js". Når vi importerer en standardeksport, kan vi velge et annet navn på eksporten enn den opprinnelig hadde da den ble eksportert. Altså kunne vi også ha skrevet import nyttNavn from "./foo.js". Det regnes imidlertid som dårlig skikk å bytte navn uten en god grunn. En god grunn kunne for eksempel være at det eksporterte navnet krasjer med navnet på noe i filen det importeres til.

Selv om du ikke planlegger å bruke standardeksporter i koden du skriver selv, forekommer slike eksporter ofte i kode andre har skrevet. Derfor bør du kjenne til hvordan standardeksporter fungerer. Som vi snart skal se, spiller standardeksporter en viktig rolle når vi gjenbruker Svelte-filer.