Frontend Academy · Lektion

Funktioner: erklæringer, udtryk og arrow functions

Definér funktioner på tre måder, forstå hoisting, brug parametre og returværdier, og skriv korte arrow functions.

Lektion 3 af 413 trin

Funktioner: erklæringer, udtryk og arrow functions er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad er funktioner

Funktioner er genanvendelige kodeblokke. De tager input (parametre), udfører logik og returnerer eventuelt et output. Funktioner er førsteklasses værdier i JavaScript — de kan tildeles variabler, sendes som argumenter og returneres fra andre funktioner.

Funktionsdeklarationer

En funktionsdeklaration opretter en navngiven funktion ved hjælp af nøgleordet function. Deklarationer løftes — du kan kalde dem, før de vises i koden.

function greet(name) {
  return `Hello, ${name}!`;
}

// Can call before declaration due to hoisting:
console.log(greet('Alice')); // 'Hello, Alice!'

Funktionsudtryk

Et funktionsudtryk tildeler en funktion til en variabel. Det løftes ikke (variablen løftes som undefined). Funktionsudtryk kan være anonyme eller navngivne.

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(3, 4)); // 12

// Named function expression (name useful in stack traces):
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

Pilefunktioner

Pilefunktioner er en kompakt syntaks, der blev introduceret i ES6. De har ikke deres egen this — de arver this fra det omsluttende omfang. De er velegnede til tilbagekald og korte funktioner.

// Standard arrow:
const add = (a, b) => a + b;

// Single parameter (no parens needed):
const double = n => n * 2;

// No parameters:
const greet = () => 'Hello!';

// Multi-line body needs {} and return:
const process = (x) => {
  const result = x * 2;
  return result + 1;
};

Parametre og argumenter

Parametre er de navne, der står i funktionsdefinitionen. Argumenter er de værdier, der sendes med, når funktionen kaldes. Ekstra argumenter ignoreres, og manglende argumenter er undefined.

function info(name, age) {
  console.log(`${name} is ${age}`);
}
info('Alice', 30); // 'Alice is 30'
info('Bob');       // 'Bob is undefined'

Standardparametre

ES6 giver dig mulighed for at angive standardværdier for parametre. Standarden bruges, når argumentet er undefined (herunder når det slet ikke er angivet).

function greet(name = 'World') {
  return `Hello, ${name}!`;
}
console.log(greet());        // 'Hello, World!'
console.log(greet('Alice')); // 'Hello, Alice!'

return-sætningen

Funktioner returnerer som standard undefined. Brug return til at returnere en værdi. En funktion afsluttes ved den første return, den møder — efterfølgende kode bliver ikke udført.

function divide(a, b) {
  if (b === 0) return null; // early return
  return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // null

Restparametre

Restparameteren ...args samler alle resterende argumenter i et array. Den skal være den sidste parameter. Den erstatter det gamle arguments-objekt i moderne kode.

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

Funktioner som værdier (førsteklasses)

Funktioner kan gemmes i variabler, sendes til andre funktioner som argumenter (tilbagekald) og returneres fra funktioner. Det muliggør effektive mønstre som arraymetoder og hændelseslyttere.

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b); // callback
console.log(sorted); // [1, 1, 3, 4, 5]

Rene funktioner

En ren funktion returnerer det samme output for de samme input og har ingen bivirkninger (ingen DOM-ændringer, netværkskald eller globale ændringer). Rene funktioner er nemme at teste, fejlsøge og analysere.

// Pure:
const add = (a, b) => a + b;

// Impure (side effect: mutates external state):
let total = 0;
function addToTotal(n) { total += n; }

Umiddelbart påkaldte funktionsudtryk (IIFE)

En IIFE kører med det samme, når den defineres. Den blev historisk brugt til at oprette et privat omfang. Den er mindre nødvendig i dag med moduler og blokomfang, men ses stadig i ældre kodebaser.

(function () {
  const secret = 'hidden';
  console.log('IIFE ran');
})();
// secret is not accessible here

Hurtigt tjek

Hvilket af følgende udsagn om pilefunktioner er sandt?

Besvar den i den interaktive lektion

Opsummering: JavaScript-funktioner

Funktionsdeklarationer løftes. Funktionsudtryk og pilefunktioner gør ikke. Pilefunktioner er korte og har ikke deres eget this. Brug standardparametre til at håndtere manglende argumenter. Funktioner er førsteklasses værdier — send dem frit rundt.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Funktioner: erklæringer, udtryk og arrow functions” gratis?

Ja — hele teksten til “Funktioner: erklæringer, udtryk og arrow functions” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Funktioner: erklæringer, udtryk og arrow functions”?

Definér funktioner på tre måder, forstå hoisting, brug parametre og returværdier, og skriv korte arrow functions. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Funktioner: erklæringer, udtryk og arrow functions”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Variabler: let, const, var og scope
Datatyper: string, number, boolean, null og undefined
Funktioner: erklæringer, udtryk og arrow functions
Kontrolflow: if, else, switch, for og while

← Tilbage til Frontend Academy