Funksjoner
En funksjon er en samling av kode inne i et større program som utfører en spesifikk oppgave og er relativt uavhengig av resten av koden.
En funksjon oppfører seg på mye av den samme måten som et vanlig program - men den er ofte kodet slik at den kan brukes flere ganger mens hovedprogrammet kjører. Funksjoner er viktige verktøy i programmering og kan bidra til å strukturere programmer på en god måte.
Objektorientert programmering går som regel ut på å binde sammen funksjoner og data på en logisk måte, et elev-objekt har funksjoner for å skrive ut elevdata osv.
Mange språk har samlinger av funksjoner i funksjonsbibliotek eller klasser (tenk på Math i actionscript).
Ofte er det nødvendig å sende verdier inn til funksjonene, disse verdiene kalles for parametre eller argumenter til funksjonen.
Et eksempel på dette er sinus funksjonen.
var x = 1.2;
var y = sin(x);
Her er x en parameter som brukes av funksjonen sin til å beregne en verdi (som lagres i variabelen y).
Mange funksjoner sender tilbake resultatet av en beregning - det gjøres med kommandoen return. Se eksemplene under for bruk av return. Dersom du ikke angir noen return verdi, da vil funksjonen returnere verdien undefined. I javascript kan du bare returnere én verdi, men den kan være en av alle definerte typer/klasser.
Definere funksjoner
Du definerer en funksjon på følgende måte:
function navnPaaFunksjon(parameter1, p2) {
// den neste linja er vanlig
var r; // verdien som skal returneres
// programkode
// en eller flere linjer, løkker, betingelser osv
// som oftest gir funksjonen en verdi tilbake
return r;
}
Som et eksempel viser vi definisjonen av sin():
function sin(x) {
var y; // verdien som skal returneres
// vi bruker en Taylor approximasjon
// dette er ikke den reelle definisjonen av Math.sin
y = x - x*x*x/(3*2) + x*x*x*x*x/(5*4*3*2);
return y;
}
Når funksjonen er definert, kan vi bruke den i kode:
var x = 0.7657;
var y = sin(x);
console.log(y);
// skriver ut 0.693..
Merk at parantesene etter navnet på funksjonen beskriver hvilke data du skal sende til funksjonen.
Definisjonen:
/**
* @param {number} x
* @returns {number} tilnærma verdi for sinus til x
*/
function sin(x) { … }
sier at sin skal ta imot et Number og beregner en ny verdi av typen Number som returneres.
Denne måten å dokumentere en funksjon på er basert på jsdoc.
Anonyme funksjoner og arrow funksjoner
Du kan også lage funksjoner som ikke blir tildelt et navn.
btnBeregn.addEventListener("click", function(e) {
// utfør beregning
})
Denne typen kalles anonyme funksjoner og kan også brukes til å kjøre kode med en gang uten å ta vare på funksjonen. Den kan dermed ikke kjøres omigjen ved et uhell (da den ikke lenger finnes).
function() {
let a = 12; // denne forsvinner etter funksjonen er ferdig
// mer kode som kjøres ved oppstart
}();
Merk de to parantesene til slutt () . De vil aktivere den anonyme funksjonen og kjører koden, deretter er funksjonen borte. Dette kan være nyttig ved oppstart av et spill/app.
Arrow funksjoner
En arrow funksjon defineres slik:
let f = e => e + 1;
// f(2) === 3
let skalar = (u,v) => u.x * v.x * + u.y * v.y + u.z * v.z;
let kryss = (u,v) => [u.y * v.z - u.z * v.y , u.z * v.x - u.x * v.z , u.x * v.y - u.y * v.x];
let sin = x => { return x - x²/2 + x³/6;}
let cos = (x) => { return Math.cos(x); }
Merk at du trenger paranteser rundt parameterlista dersom den er tom eller har fler enn 1 parameter. Dersom funksjonskroppen bare er et uttrykk - da slipper du skrive return eksplisitt. Dersom du bruker { } rundt kroppen - da må du skrive return for å gi tilbake en verdi.
( ) => 12; // en arrow func uten parameter, returnerer 12 som verdi
x => x * x; // bare en parameter, slipper parantes
(x) => x*x+2; // du kan bruke parantes dersom du ønsker det selv med 1 parameter
(x,y) => x*x + y*y; // her må du ha paranteser
(a,b) => { return a+b;} // når du bruker { } rundt kroppen MÅ du skrive return
Den er en forenkla skrivemåte for anonyme funksjoner (med en del endra egenskaper).
btnBeregn.addEventListener("click", e => { /* kode */ } );
// tillsvarer den anonyme funksjonen for btnBeregn vist tidligere
tall.sort( (x,y) => x - y );
// merk at du ikke trenger return dersom du ikke bruker {} rundt funksjoneskroppen
// tillsvarer tall.sort(function(x,y) { return x - y;})
Arrow funksjoner binder ikke this. Dermed vil this være definert av scopet hvor arrow funksjonen defineres. Dette er ofte ønskelig for eksempler som under:
class Person {
constructor(age) {
this.age = age;
setInterval( () => this.age++,1000);
// i arrow funksjonen vil this være Person sin this
}
}
var p = new Person(0);
p.age; // 12
p.age; // 16 -- alder øker med 1 for hvert sekund
Uten arrow funksjon er dette ikke så rett fram
this.age = 100; // den globale this får egenskapen age
class Menneske {
constructor(age) {
this.age = age;
setInterval( function() {this.age++;},1000);
// den globale this.age øker for hvert sekund
}
}
var m = new menneske(40);
m.age; // 40
m.age; // 40 .. m.age endrer seg ikke
this.age; // 156 ... this.age øker for hvert sekund
Her vil funksjonen i setIntervall bruke en this som er kobla til det globale skopet Dermed vil m.age ikke endres.
Bruke funksjoner
Dersom du har definert en funksjon selv eller ønsker å bruke en som er ferdig definert i javascript, så er metoden den samme:
navnetPaaFunksjonen();
Du kjører koden som funksjonen representerer (kroppen til funksjonen) ved å nevne den ved navn - etterfulgt av ().
Dersom funksjonen tar parametre sendes disse i parentesene etter funksjonsnavnet - slik som sinus-funksjonen:
var y = sin(1.23);
Verdien du sender kan være et tall (slik som over) eller en variabel. Dersom du bruker en variabel, da hentes verdien ut og sendes til funksjonen - som om du hadde skrevet det tallet som er lagra i variabelen.
var x = 1.23;
var y = sin(x); // tilsvarer sin(1.23)
Dette har samme effekt som om du skrev y = sin(1.23) siden x inneholder tallet 1.23.
Avanserte funksjoner
Funksjoner av høyere orden er vanligvis betegnelsen på funksjoner som tar funksjoner som parameter, eller gir tilbake funksjoner som return-verdi.
Vi skal ikke dykke dypt her, men gi en liten innføring.
Dette temaet kan du lese mer om på nett dersom du søker på
functional programming javascript.
Gjennomgang av alle elementer i en array.
Ofte lager vi kode som under for å gå gjennom elementene i en tabell (array).
// anta var elever er en array
for (var i = 0; i < elever.length; i++) {
// vi gjør noe med elementet elever[i]
// f.eks vi kjører en funksjon på elementet
sendBrev(elever[i]); // sender email til valgt elev
}
Det hadde vært nyttig om vi kunne si
ta denne funksjonen (sendBrev) og bruk den på
alle elementer i elever
Vi kan lage en slik funksjon:
function forAlle(arr, handling) {
for (var i = 0; i < arr.length; i++) {
handling( arr[i] );
}
}
// eksempel på bruk
forAlle( elever, sendBrev );
Alle elementer i en tabell skal endres
Tenk deg at du har en tabell som inneholder priser for en webshop. Nå har det blitt nødvendig å skru opp prisene med 5%.
// anta var priser er en array
for (var i = 0; i < priser.length; i++) {
priser[i] *= 1.05; // legger til 5%
}
Vi lager en funksjon som kan endre verdiene i en tabell:
function endreAlle(arr, endring) {
for (var i = 0; i < arr.length; i++) {
arr[i] = endring( arr[i] );
}
}
// eksempel på bruk
function prisVekst(pris) { return pris*1.05; }
endreAlle(priser, prisVekst);
Innebygde array-funksjoner
De to eksemplene vi har vist er allerede ferdiglaga for array i javascript.
elever.forEach(sendBrev);
var nyePriser = priser.map(prisVekst);
// merk at map lager en ny array
// endreAlle funksjonen vi laga over endrer originalen
I tillegg finnes
.reduce .reduceRight .each .filter .every .some
som er mer avanserte høyere ordens funksjoner. Sjekk dem ut på google ...