Webbteknik 2

Laboration EXTRA FUNCTIONS2

Extra - Funktioner i praktiken

Vi har tittat på hur funktioner fungerar rent tekniskt. Nu ska vi titta på varför vi använder dem. Funktioner är vårt bästa verktyg för att göra kod läsbar, testbar och återanvändbar.

1 - Förhindra upprepning

En viktig tumregel för läsbar kod är DRY (“Don’t repeat yourself”). Om du ser samma kod upprepas flera gånger, kan det ofta vara dags att skriva om till en funktion. Eller om du vet att du kommer att behöva samma kod på flera ställen, definiera en funktion för det.

Uppgift: Koden nedan upprepar sig. Skriv om den så att den använder en funktion sayHello(name) istället.

console.log("Hej Nina! Hoppas du har en bra dag.");
console.log("Hej Erik! Hoppas du har en bra dag.");
console.log("Hej Kajsa! Hoppas du har en bra dag.");
Facit
function sayHello(name) {
  console.log(`Hej ${name}! Hoppas du har en bra dag.`);
}

sayHello("Nina");
sayHello("Erik");
sayHello("Kajsa");

2 - Omvandlaren (Input -> Output)

Många av de mest användbara funktionerna är de som tar in ett värde, gör något med det, och returnerar ett nytt värde.

Uppgift: Skriv en funktion yearsUntilRetirement(age) som tar in en ålder och returnerar hur många år som är kvar till pension (låt oss säga vid 65). Använd sedan den funktionen för att räkna ut när en person som är 25 går i pension.

function yearsUntilRetirement(age) {
  // Din kod här
}

let myAge = 25;
let timeLeft = yearsUntilRetirement(myAge);
console.log("Tid kvar: " + timeLeft + " år");
Facit
function yearsUntilRetirement(age) {
  return 65 - age;
}

let myAge = 25;
let timeLeft = yearsUntilRetirement(myAge); // timeLeft blir 40
console.log("Tid kvar: " + timeLeft + " år");

3 - Komposition (att kombinera funktioner)

Eftersom funktioner kan returnera värden, kan vi använda resultatet av en funktion direkt som input till en annan.

Uppgift: Vi har två funktioner: shout(text) som gör text till VERSALER, och exclaim(text) som lägger till ”!!!”. Hur kan du använda dessa två för att omvandla “hej” till “HEJ!!!” på en enda rad?

function shout(text) {
  return text.toUpperCase();
}

function exclaim(text) {
  return text + "!!!";
}

// Skriv din kod här:
let result = ...
Facit
let result = exclaim(shout("hej")); 
// Först körs shout("hej") -> "HEJ"
// Sen körs exclaim("HEJ") -> "HEJ!!!"