9.1 Funktioner
Innan vi går in på det som detta kapitel egentligen handlar om, kommer vi i detta exempel titta på några olika sätt att skriva funktioner.
16 min.
Sammanfattning
function a() { ... }
En vanlig funktionsdeklaration börjar med nyckelordet function. Därefter anges namnet följt av en parentes, där eventuella parametrar listas. Detta är det sätt som hittills använts i alla exempel i denna exempelsamling. Detta kommer även fortsättningsvis användas för "vanliga" funktionsdeklarationer.
a = function () { ... }
Ett alternativt sätt är att börja med namnet och deklarera funktionen som en variabel eller konstant — man kan även lägga till let eller const före deklarationen. En variant av detta används i nästa alternativ, men även i kapitlet där man lägger in metoder i objekt (Intro till OOP).
a = () => { ... }
Ett kortare skrivsätt är att använda en pil (=>) istället för function, samt ange det i en annan ordning. Denna metod kallas arrow function, där man med pilen symboliserar att parametrarna inom parentsen skickas in i funktionen. Detta är vanligt då man använder anonyma funktioner (utan namnet och likhetstecknet i början), som används i t.ex. en händelselyssnare, timer eller annan plats där man anger en funktion som ska anropas i ett senare skede.
Har man endast en parameter, behöver inte parenteserna anges och har man endast en programsats i funktionen, behövs inte klamrarna, t.ex. par => statement;
Egna övningar
Använd filerna test.html och test.js. I programmet finns två knappar och en test-funktion. Lägg till följande i JavaScript-koden:
- Lägg in en händelselyssnare på var och en av knapparna. Vid klick på den första knappen ska test anropas med parametern "A" och vid klick på den andra knappen ska test anropas med parametern "B". Lägg dessa anrop i anonyma funktioner som skrivs som "arrow functions" i händelselyssnarna.
- Utöka funktionen test, så att bakgrundsfärgen byts ut på den knapp man klickat på. Du behöver då också göra ett tillägg i funktionerna i händelselyssnarna.