Webbteknik 2

Funktioner är byggstenarna i programmering. De låter oss kapsla in logik, återanvända kod och namnge våra handlingar. Men de kan också vara krångliga att förstå i början - data hoppar in och ut, och variabler lever och dör.

Här är övningar för att stärka din mentala modell av hur funktioner fungerar.

1 - Torrsimulering (Tracing)

När vi anropar en funktion pausar vi “huvudprogrammet”, hoppar in i funktionen, kör koden där, och hoppar sedan tillbaka.

Uppgift: Följ koden rad för rad. Vad är värdet av variablerna efter varje steg?

function magic(x, y) {
  let result = x + y;
  if (result > 10) {
    return result;
  }
  return 0;
}

let a = 5;
let b = 8;
let c = magic(a, b);
let d = magic(2, 3);

// Vad är värdet på a, b, c och d här?

2 - Scope

En funktion utgör ett sk. scope (på svenska ungefär omfång). Ett scope definierar bland annat livslängden för variabler som skapas inom det. Dvs, variabler som skapas inuti en funktion är inte tillgängliga utanför den.

Uppgift: Titta på följande kod. Vad skrivs ut i konsolen?

let secret = "Hemlis";

function reveal() {
  let secret = "Överraskning!";
  console.log(secret);
}

reveal();
console.log(secret);

1. Vad skriver reveal() ut?
2. Vad skriver den sista console.log(secret) ut?
3. Varför?

3 - Funktion eller Värde?

En vanlig fälla är att blanda ihop myFunction och myFunction().

Uppgift: Vad är skillnaden mellan rad A och rad B?

function greet() {
  return "Hej!";
}

let a = greet;   // Rad A
let b = greet(); // Rad B