Funktioner

Meget ofte har vi brug for at udføre en lignende handling mange steder i scriptet.

For eksempel har vi brug for at vise en pæn besked, når en besøgende logger ind, logger ud og måske et andet sted.

Funktioner er programmets vigtigste “byggesten”. De tillader, at koden kan kaldes mange gange uden gentagelse.

Vi har allerede set eksempler på indbyggede funktioner, som alert(message), prompt(message, default) og confirm(question). Men vi kan også oprette vores egne funktioner.

Funktionsdeklaration

For at oprette en funktion kan vi bruge en funktionsdeklaration.

Det ser sådan ud:

function showMessage() {
  alert( 'Hello everyone!' );
}

Nøgleordet function kommer først, derefter navnet på funktionen, så en liste af parametre mellem parenteserne (kommasepareret, tom i eksemplet ovenfor, vi vil se eksempler senere) og til sidst koden i funktionen, også kaldet “funktionskroppen”, mellem krøllede parenteser.

function name(parameter1, parameter2, ... parameterN) {
 // body
}

Vores nye funktion kan kaldes ved sit navn: showMessage().

For eksempel:

function showMessage() {
  alert( 'Hej allesammen!' );
}

showMessage();
showMessage();

Kaldet showMessage() udfører koden i funktionen. Her vil vi se beskeden to gange.

Dette eksempel demonstrerer tydeligt et af hovedformålene med funktioner: at undgå kodegentagelse.

Hvis vi nogensinde har brug for at ændre beskeden eller måden den vises på, er det nok at ændre koden ét sted: funktionen, der viser den.

Lokale variabler

En variabel, der er erklæret inde i en funktion, er kun synlig inde i den funktion.

For eksempel:

function showMessage() {
  let message = "Hej, jeg er JavaScript!"; // lokal variabel

  alert( message );
}

showMessage(); // Hej, jeg er JavaScript!

alert( message ); // <-- Fejl! Variablen er lokal for funktionen

Ydre variabler

En funktion kan også få adgang til en ydre variabel, for eksempel:

let userName = 'John';

function showMessage() {
  let message = 'Hej, ' + userName;
  alert(message);
}

showMessage(); // Hej, John

Funktionen har fuld adgang til den ydre variabel. Den kan også ændre den.

For eksempel:

let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) ændrede den ydre variabel

  let message = 'Hej, ' + userName;
  alert(message);
}

alert( userName ); // John før funktionenskaldet

showMessage();

alert( userName ); // Bob, værdien blev ændret af funktionen

Den ydre variabel bruges kun, hvis der ikke findes en lokal med samme navn.

Hvis en variabel med samme navn erklæres inde i funktionen, så overskygger den den ydre. For eksempel, i koden nedenfor bruger funktionen den lokale userName. Den ydre ignoreres:

let userName = 'John';

function showMessage() {
  let userName = "Bob"; // erklær en lokal variabel

  let message = 'Hej, ' + userName; // Bob
  alert(message);
}

// Funktionen vil oprette og bruge sin egen lokale userName
showMessage();

alert( userName ); // John, uændret, funktionen tilgik ikke den ydre variabel

Parametre og argumenter

Vi kan sende vilkårlige data til funktioner ved hjælp af parametre.

I eksemplet nedenfor har funktionen to parametre: from og text.

function showMessage(from, text) { // parametre: from, text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

Når funktionen kaldes i linjerne (*) og (**), kopieres de givne værdier til lokale variabler from og text. Derefter bruger funktionen dem.

Her er et eksempel mere: vi har en variabel from og sender den til funktionen. Bemærk venligst: funktionen ændrer from, men ændringen ses ikke udenfor, fordi en funktion altid får en kopi af værdien:

function showMessage(from, text) {

  from = '*' + from + '*'; // gør "from" pænere

  alert( from + ': ' + text );
}

let from = "Ann";

showMessage(from, "Hello"); // *Ann*: Hello

// the value of "from" is the same, the function modified a local copy
alert( from ); // Ann

Når en værdi sendes som en funktionsparameter, kaldes den et argument.

Med andre ord, for at gøre disse termer klare:

• En parameter er variablen, der er angivet inde i parenteserne i funktionsdeklarationen (det er en deklarationstidsterm).
• Et argument er den værdi, der sendes til funktionen, når den kaldes (det er en kaldetidsterm).

Vi erklærer funktioner ved at liste deres parametre, og kalder dem derefter ved at sende argumenter.

I eksemplet ovenfor kan man sige: “funktionen showMessage erklæres med to parametre, og kaldes derefter med to argumenter: from og "Hello"”.

Standardværdier

Hvis en funktion kaldes, men et argument ikke gives, bliver den tilsvarende værdi undefined.

For eksempel kan den førnævnte funktion showMessage(from, text) kaldes med et enkelt argument:

showMessage("Ann");

Dette er ikke en fejl. Et sådant kald ville give outputtet "*Ann*: undefined". Da værdien for text ikke er givet, bliver den undefined.

Vi kan angive den såkaldte “standard” (som bruges hvis udeladt) værdi for en parameter i funktionsdeklarationen ved hjælp af =:

function showMessage(from, text = "ingen tekst givet") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: ingen tekst givet

Hvis text-parameteren ikke gives, får den værdien "ingen tekst givet".

Standardværdien træder også i kraft, hvis parameteren eksisterer, men er strengt lig med undefined, som dette:

showMessage("Ann", undefined); // Ann: ingen tekst givet

Her er "ingen tekst givet" en streng, men det kan være et mere komplekst udtryk, som kun evalueres og tildeles, hvis parameteren mangler. Så dette er også muligt:

function showMessage(from, text = anotherFunction()) {
  // anotherFunction() kaldes kun, hvis der ikke gives tekst
  // dens resultat bliver værdien af text
}

function showMessage(from, text) {
  if (text === undefined) {
    text = 'ingen tekst givet';
  }

  alert( from + ": " + text );
}

function showMessage(from, text) {
  // Hvis værdien af text er falsk, tildel standardværdien
  // dette antager, at text == "" er det samme som ingen tekst overhovedet
  text = text || 'ingen tekst givet';
  ...
}

Alternative standardværdier for parametre

Nogle gange giver det mening at tildele standardværdier til parametre på et senere tidspunkt efter funktionsdeklarationen.

Vi kan kontrollere, om argumentet er givet under funktionsudførelsen, ved at sammenligne den med undefined:

function showMessage(text) {
  // ...

  if (text === undefined) { // hvis argumentet mangler
    text = 'tom besked';
  }
*/!*

  alert(text);
}

showMessage(); // tom besked

…Eller vi kunne bruge || operatoren:

function showMessage(text) {
  // hvis text er undefined eller på anden måde falsk, sæt den til 'tom'
  text = text || 'tom';
  ...
}

Moderne JavaScript motorer understøtter nullish coalescing operator ??, det er bedre, når de fleste falske værdier, såsom 0, skal betragtes som “normale”:

function showCount(count) {
  // hvis count er undefined eller null, vis "ukendt"
  alert(count ?? "ukendt");
}

showCount(0); // 0
showCount(null); // ukendt
showCount(); // ukendt

Returnering af en værdi

En funktion kan returnere en værdi tilbage til den kaldende kode som resultatet.

Det simpleste eksempel ville være en funktion, der summerer to værdier: