Funksjoner i JavaScript / TypeScript¶

Funksjoner finner en over alt, og kan være litt forvirrende hvis du er ny til det. Lærte du deg å bruke React før du lærte deg å skrive din første funksjon? Hvorfor skriver man function foran React-komponenter? Hva er forskjellen på en funksjon og en React-komponent? Og hva er egentlig en funksjon?

Kort forklart er funksjoner en blokk med kode som utfører en oppgave. Om du vil kan du tenke det er et lite program, inni programmet ditt. Du kan lage egne funksjoner, eller bruke allerede definerte funnksjoner.

Eksempel på vanlig kode.¶

const x = 2;
const square = x * x;

console.log("Kvadratet av x er: " + square)

const x: number = 2;
const square: number = x * x;

console.log("Kvadratet av x er: " + square)

Denne koden definerer en variabel x med verdien 2, og deretter definerer den en variabel square som er et regnestykke som regner kvadratet av x. Til slutt skriver den ut resultatet til konsollen.

Repetisjon av samme kode¶

Når du vil kalkulere kvadratet av flere tall kan du gjenta samme kodesekvens flere ganger. Under definerer vi flere verdier vi ønsker å kalkulere kvadratet av.

const x = 2;
const y = 3;
const z = 4;

const square_x = x * x;
const square_y = y * y;
const square_z = z * z;

console.log("Kvadratet av x er: " + square_x)
console.log("Kvadratet av y er: " + square_y)
console.log("Kvadratet av z er: " + square_z)

const x: number = 2;
const y: number = 3;
const z: number = 4;

const square_x: number = x * x;
const square_y: number = y * y;
const square_z: number = z * z;

console.log("Kvadratet av x er: " + square_x)
console.log("Kvadratet av y er: " + square_y)
console.log("Kvadratet av z er: " + square_z)

Min første funksjon¶

Vi ser i eksemplene over at det å kalkulere kvadratet av et tall er å multiplisere samme tallet med seg selv. Dette er en handling vi ønsker å gjøre flere ganger, men vi har valgt å skrive det ut flere ganger.

Dette er ikke en veldig effektiv og gjenbrukbar metode. Og vi kan komme i en situasjon hvor vi har kalkulert feil på et av utregningene fordi vi skrev akkurat den utregningen feil. For å gjøre det enklere, og for å være sikker på at alle kalkulasjoner av kvadratet skjer på samme måte, kan vi lage en funksjon som gjør det for oss:

function square(tall) {
    return tall * tall;
}

const square_x = square(2);
const square_y = square(3);
const square_z = square(4);

console.log("Kvadratet av x er: " + square_x)
console.log("Kvadratet av y er: " + square_y)
console.log("Kvadratet av z er: " + square_z)

function square(tall: number): number {
    return tall * tall;
}

const square_x: number = square(2);
const square_y: number = square(3);
const square_z: number = square(4);

console.log("Kvadratet av x er: " + square_x)
console.log("Kvadratet av y er: " + square_y)
console.log("Kvadratet av z er: " + square_z)

Nå ser vi at vi kun trenger å endre logikken ett sted, inne i funksjonen, hvis vi skal gjøre endring på hvordan vi kalkulerer kvadratet. Vi kan også bruke funksjonen flere ganger slik at vi slipper å skrive samme logikk flere ganger.

Returnere en verdi fra en funksjon¶

Vi så i eksemplene over at funksjonen square returnerer en verdi. Det er ikke alltid en funksjon må returnere en verdi, men det er ofte nyttig å gjøre det. En funksjon kan returnere et tall, en tekst, en liste, et objekt, eller noe annet.

function returner_et_tall() {
    return 1;
}

function returner_en_tekst() {
    return "Jeg er en tekst";
}

console.log(returner_et_tall()); // Skriver ut tallet 1 i konsollet
console.log(returner_en_tekst()) // Skriver ut teksten "Jeg er en tekst" i konsollet

function returner_et_tall(): number {
    return 1;
}

function returner_en_tekst(): string {
    return "Jeg er en tekst";
}

console.log(returner_et_tall()); // Skriver ut tallet 1 i konsollet
console.log(returner_en_tekst()) // Skriver ut teksten "Jeg er en tekst" i konsollet

Ta inn argumenter i en funksjon¶

En funksjon kan ta inn et eller flere argumenter. For eksempel, i square tar vi inn et tall vi ønsker å finne kvadratet av:

function square(tall) {
    return tall * tall;
}

function square(tall: number): number {
    return tall * tall;
}

Hva du tar inn som argument, og hva du returnerer, er helt opp til deg og hva du ønsker å oppnå med funksjonen.

For eksempel kan vi ta inn en tekst:

function si_hei_til(navn) {
    console.log("Hei " + navn);
}

function si_hei_til(navn: string): string {
    console.log("Hei " + navn);
}

function si_hei(navn) {
    console.log(`Hei ${navn}`);
}

function si_hei(navn: string): string {
    console.log(`Hei ${navn}`)
}

Flere eksempler på funksjoner¶

Vi kan ta inn en verdi, gjøre noen sjekker, og returnere en verdi basert på det. For eksempel en funksjon som tar inn alder, og returnerer om vedkommende er myndig:

function er_myndig(alder) {
    if (alder < 18) {
        return false;
    } else {
        return true;
    }
}

function er_myndig(alder: number): boolean {
    if (alder < 18) {
        return false;
    } else {
        return true;
    }
}

function er_myndig(alder) {
    return alder >= 18;
}

function er_myndig(alder: number): boolean {
    return alder >= 18;
}

Denne kunden kan benytte slikt:

console.log(er_myndig(18)) // true
console.log(er_myndig(14)) // false

console.log(er_myndig(18)) // true
console.log(er_myndig(14)) // false

Lagre returverdien i en variabel¶

Verdien du får tilbake fra en funksjon kan brukes direkte, eller lagres i en variabel for senere bruk:

function er_myndig(alder) {
    return alder >= 18; 
}

const myndig = er_myndig(18) // variabelen 'myndig' får verdien 'true'
const myndig2 = er_myndig(14) // variabelen 'myndig2' får verdien 'false'

Kort forklart er ikke funksjoner noe mer avansert enn det. Det er en blokk med kode, noe logikk noen har laget, som skal utføre noe.

Men hva med funksjoner i React?¶

I React brukes jo funksjoner over alt. Alt er funksjoner der. Hvordan fungerer det?

Godt spørsmål. React er et bibliotek som gjør det enklere å lage brukergrensesnitt. Det er bygget på funksjoner, og alt i React er i bunn og grunn funksjoner.

Her forenkler vi det litt, men er du kjent med React så vet du at en React-komponent er en funksjon som returnerer HTML-kode. For eksempel:

function App() {
    return <div></div>
}

function App(): React.ReactNode {
    return <div></div>
}

Dette er en funksjon, som returnerer <div></div>. Denne funksjonen vil du også ofte kalle for en React-komponent. Hva er forskjellen fra en annen funksjon? Ingenting.

Les mer om funksjoner i React i Funksjoner + React