Funksjoner

Å bruke konsollet i browseren er en fin måte å teste ut javascript på, men i den virkelige verden må vi gjerne skrive dokumenter, som vi kan lagre.

Gå til https://codepen.io/pen/. Siden vi ikke skal jobbe med HTML og CSS, kan du dra de vinduene mot venstre, slik at du får god plass til å skrive javascript.

Hvis vi skal dra en sammenligning fra javascript til et språk som engelsk, norsk, eller spansk, så vil funksjoner være det samme som et verb. Hvis vi hadde en hund som forstod JavaScript, så kunne den tatt imot kommandoer slik som

run()
jump()
sit()

Browseren vår er derimot ikke en hund, og vil ikke forstå disse verbene. Noe den derimot forstår er 

alert()

Inni parantesene til alert kan vi skrive en tekst som skrives ut:

alert("Hello")

Det spiller ingen rolle hva du skriver inni anførselstegnene. For vårt tenkte tilfelle av en javascript forstående hund, kunne man kanskje tenkt seg:

jump("high")
jump("low")

Man kjører (eller kaller) altså funksjonen med jump(), og kan legge til ekstra tekst inni parantesene. Det tekniske navnet for dette er et argument.

Selvom browseren har et sett med funksjoner som kan kalles, er vi ikke på noen måte begrenset av disse. Vi kan nemlig lage våre egne funksjoner, som gjør akkurat hva vi vil.

Vi kan ta utgangspunkt i funksjonen greet:

greet()

Browseren vet ikke hva den skal gjøre med denne funksjonen, fordi den finnes ikke. Men, vi kan lage får egen funksjon som heter greet(). En funksjon inneholder oppskriften på hva funksjonen skal gjøre.

Vi bruker ordet “function” for å si at vi skal lage en funksjon. Så lager vi oss et navn som funksjonen får – det kan være hva som helst. Deretter legger vi til krøllparanteser, og hopper ned en linje:

function greet() {

}

Akkurat nå kan vi kalle funksjonen, men den gjør absolutt ingenting, siden den er tom.

La oss legge inn alert-funksjonen som vi testet isted:

function greet() {
  alert("Hello my name is James")
}

Så for å teste funksjonen kan vi gjøre som i sted, et par linjer under den lukkende krøllparantesen:

greet()

Tilsammen får vi da:

function greet() {
  alert("Hello my name is James")
}

greet()

Men hva om vi ønsker å gjøre funksjonen litt mer fleksibel? Ofte ønsker man å gjøre små endringer i funksjonen, uten å måtte lage et utall av funksjoner som deler funksjonalitet.

På samme måte som vi kunne kalle alert(“noe tekst”), så kan vi gjøre det samme med vår egenlagde funksjon:

function greet(x) {
  alert("Hello, my name is " + x + ".")
}

Dette vil si at vi lager en variabel som funksjonen kan bruke. Navnet spiller igjen ingen rolle – du bestemmer selv hva det skal være. I denne sammenhengen kunne det vært lettere å forstå hva x er, hvis den het f.eks theName, eller noe lignende

Hvis vi nå kaller funksjonen igjen med 

greet("John")

Så får vi tilbake “Hello, my name is John”.

En funksjon er ikke begrenset til å kun ta i mot ett argument, men kan ta så mange du trenger.

La oss si at vi vil utvide funksjonen til å også ta med favorittfarge:

function greet(theName, favColor) {
  alert("Hello, my name is " + theName + ", and my favorite color is " + favColor + ".")
}

greet("John", "blue")

< “Hello, my name is James, and my favorite color is blue.”

Funksjoner trenger ikke å kalle en browserfunksjon, slik som alert() i eksemplet over. I sin enkleste form vil en funksjon levere tilbake data, eller gjøre en endring. Det å levere tilbake data kalles i javascript for “return”, så vi returnerer data. La oss lage en funksjon som tredobler et tall:

function tripleMe(x) {
  return x * 3
}

// linjer som har to forover-slasher blir ikke kjørt av browseren
let myFavoriteNumber = tripleMe(12);

// vi kjører alert bare for å sjekke at vi får tilbake forventet svar:
alert(myFavoriteNumber)

En funksjon kan kalles så mange ganger du behøves, når den først er laget.