Funktioner (10 min)

💡 Introduktion till ämnet (flipped classroom)

⏰ Tidsåtgång: c.a. 10 min

Funktioner (9 min)

Return

return är ett s.k. reserverat nyckelord (keyword) i JavaScript, som man kan använda till bl.a. två saker:

1. "Skicka tillbaka" något från en funktion
2. Avbryta en funktion/loop i förtid

Om du tänker på en funktion som en "låda" där det händer något, så t.ex. i bilden nedan så skickar vi in siffran tre i lådan, och i lådan (funktionen) sker en multiplikation med 3. Returvärdet blir 9. Hade vi skickat in 2, hade returvärdet blivit 3 * 2 = 6.

I kod hade funktionen sett ut såhär:

function multiplyWith3(z) {
  return z * 3;
}

Ibland kan vi också avbryta någonting, om vi stöter på rätt sak tidigt. Tänk dig att du letar efter en borttappad pryl hemma. När du väl hittar den, finns det ju ingen anledning att fortsätta leta. På samma sätt kan vi använda return för att säga "OK, alles klar - avbryt letandet!".

const missingItem = 'napkin';
const stuffInMyPurse = ['book', 'toothbrush', 'credit card', 'napkin', 'banana', 'pen'];
for (let i = 0; i < stuffInMyPurse.length; i++) {
  const itemInMyHand = stuffInMyPurse[i];
  
  if (itemInMyHand === 'napkin') {
    console.log('Found the napkin! Can stop looking!');
    return; // vi behöver inte inspektera även bananen och pennan, för dessa letar vi inte efter
  } else {
    console.log('Found something else in my purse:', itemInMyHand); // book, toothbrush, credit card
  }
}

🔈 Transkription

Du kan se på funktioner som ett fabriksband. Någonting åker in i maskinen, och på andra sidan kommer det ut något "omvandlat".

En funktion har till uppgift att utföra något. Ibland tar den emot s.k. input och returnerar output. Detta kallas funktionsparametrar respektive returvärde.

Ett exempel på en funktion som adderar två siffror, ser ut såhär:

function add(num1, num2) {
  return num1 + num2;
}

Vi kan då anropa funktionen genom att skriva:

add(1, 2);

Funktionsparametrarna heter num1 och num2, och returvärdet är summan av funktionsparametrarna.

Det är alltid bra att definiera funktioner innan man anropar dessa, men i JavaScript finns något som kallas för hoisting, som innebär att t.ex. funktioner och variabler "flyttas" högst upp i koden, när den körs.

I ECMAScript 6 (som är en "version" av JavaScript) går det också att skriva funktioner på ett annat "format", detta kallas för arrow functions.

Om vi skulle skriva om adderingsfunktionen ovan, så skulle det bli såhär:

const add = (num1, num2) => {
  return num1 + num2;
}
add(1, 2); // 3

Här har vi lagt till en variabel, och sparat funktionen i den. Eftersom att programmerare tycker om att förenkla ytterligare, så brukar man ta bort saker som inte behövs:

const add = (num1, num2) => num1 + num2;
add(1, 2); // 3

Ovan har vi alltså förenklat funktionen ytterligare i sin syntax. Funktionens "innebörd/funktion" har inte ändrats. Vi har bara flyttat upp returvärdet på samma rad.

Detta fungerar att göra för funktioner som inte gör något mer än att returnera ett värde.

Här är ett exempel på en annan funktion:

function greet(name) {
  return 'Hello ' + name + '!';
}
greet('Jenni'); // Hello Jenni!

Här skickar vi in en parameter, name, och konkatenerar den tillsammans med en sträng. Observera att vi har mellanslag efter Hello för att skapa avstånd till namnet. Annars skulle det stå HelloJenni!.

Även denna funktion kan skrivas om till att använda s.k. template literals:

function greet(name) {
  return `Hello ${name}!`;
}
greet('Jenni'); // Hello Jenni!

Här använder vi oss av "backticks" för att kunna lägga in variabelns namn mitt i strängen: ${name}. På så sätt slipper vi hålla reda på vilka plus-tecken och citattecken som ska vara var.

Självklart kan vi förenkla denna funktion ytterligare:

const greet = (name) => `Hello ${name}!`;
greet('Jenni'); // Hello Jenni!

Funktioner brukar dokumenteras och man beskriver vad de gör. Här är ett vanligt sätt att skriva kommentarer:

/**
 * Says "Hello Name!" with the passed-in string
 * @param {string} name - Name of greeted
 * @returns {string} `Hello Name!`
 */
const greet = (name) => `Hello ${name}!`;

Ibland kanske man har kopierat kod någonstans ifrån eller vill länka till en referens av något slag, då kan man skriva såhär:

/**
 * Says "Hello Name!" with the passed-in string
 * @param {string} name - Name of greeted
 * @returns {string} `Hello Name!`
 * @see {@link http://github.com|GitHub} for further information.
 */

📖 Läsanvisningar

• JavaScript - The Definitive Guide: Hela kapitel 8

🏋️ Övningsuppgifter

• Functions | w3schools
• Objects | w3schools

Här finns bra övningsuppgifter i ordning, för den som vill fördjupa sig ytterligare: 4 Geeks Academy

✅ Avstämning

Använd denna lista för att "checka av" att du förstår modulens koncept.

Terminologi

• funktion
• funktionsparameter/function parameter(s)
• returvärde/return value
• "arrow function"/"fat arrow function"
• function declaration
• variable scope
• closures
• hoisting
• method chaining
• recursion (känna till vad det är)

Du är klar när…

• Du på en tenta kan, med egna ord, förklara samtliga termer i listan ovan
• Du kan skriva en funktion som har ett returvärde
• Du kan anropa en funktion
• Du kan skriva om en "vanlig" funktion till en "arrow"-funktion

📚 Resurser

• Functions Guide | MDN
• Functions Reference | MDN
• 📹 Method chaining

Våga Fråga-lådan

Anonyma frågelådan

Klar?