Funktioner i JavaScript

Denne artikel forklarer funktioner i JavaScript.

YouTube Video

Funktioner i JavaScript

Funktioner i JavaScript er blokke af genanvendelig kode, der bruges til at udføre specifikke opgaver. At bruge funktioner forbedrer kodens læsbarhed og gør vedligeholdelse lettere. Funktioner kan defineres på flere måder og fleksibelt manipuleres ved hjælp af argumenter og returværdier.

Måder at Definere Funktioner på

Funktionsdeklaration

Funktioner kan defineres ved hjælp af nøgleordet function. Funktionsdeklarationer bliver hoisted før koden kører, så de kan kaldes, før de er defineret.

1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4    return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice

I dette eksempel, fordi greet-funktionen kaldes før dens deklaration, vises Hello, Everyone og Hello, Alice.

Funktionsudtryk

Funktioner kan også defineres ved at tildele dem til en variabel. I dette tilfælde bliver funktionen ikke hoisted og kan kun kaldes, efter at den er defineret.

1const greet = function(name) {
2    return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob

I dette eksempel vil Hello, Bob blive vist.

Arrow-funktion

Arrow-funktioner er en måde at definere funktioner med en kortere syntaks på. De er særligt nyttige ved brug af anonyme funktioner (funktioner uden et navn). Arrow-funktioner har også en anderledes opførsel, når det kommer til nøgleordet this.

 1const greet = (name) => {
 2    return "Hello, " + name;
 3};
 4
 5// When it can be expressed in a single line,
 6// `return` and curly braces can be omitted
 7const greetShort = name => "Hello, " + name;
 8
 9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave

Funktioner kan deklareres som greet og greetShort i dette eksempel. Hvis funktionen er på én linje, kan du udelade {} (krøllede parenteser) som i greetShort.

Elementer af en Funktion

Argumenter

Værdier, der gives til en funktion, kaldes argumenter. Ved at specificere argumenter, når du definerer en funktion, kan du give værdier, når du kalder funktionen.

1function add(a, b) {
2    return a + b;
3}
4
5console.log(add(2, 3)); // 5

Standardargumenter

Du kan angive en standardværdi, hvis der ikke gives nogen værdi til argumenterne.

1function greet(name = "Guest") {
2    return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice

I dette eksempel, hvis greet() kaldes, bruges standarden Guest.

Returneringsværdi

Du kan returnere en returneringsværdi fra en funktion ved hjælp af return-sætningen. Hvis der ikke er nogen return-sætning, returnerer funktionen undefined.

1function greet(name) {
2    console.log('Hello, ' + name + '!');
3}
4function square(num) {
5    return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined

I dette eksempel, da greet ikke returnerer nogen værdi, er returneringsværdien undefined.

Anonym funktion

En funktion uden et navn kaldes en anonym funktion. De bruges ofte som funktionsudtryk eller pilfunktioner.

1const double = function(num) {
2    return num * 2;
3};
4
5console.log(double(5)); // 10

Umiddelbart påkaldt funktionsudtryk (IIFE)

Et umiddelbart påkaldt funktionsudtryk (IIFE) er en funktion, der udføres, så snart den defineres. Det bruges normalt til at kontrollere rækkevidde.

1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3    console.log("This is an IIFE");
4})(); // This is an IIFE

Den udføres, så snart den erklæres.

Callback-funktion

At overføre en funktion som et argument til en anden funktion til senere udførelse kaldes en callback-funktion. Det bruges ofte i asynkron behandling og hændelseshåndtering.

1function processData(callback) {
2    let data = "Processed Data";
3    callback(data);
4}
5
6processData(function(result) {
7    console.log(result); // Processed Data
8});

I dette eksempel overføres en funktion, der viser en værdi i konsollen, som en callback-funktion.

Rekursiv funktion

At kalde en funktion sig selv kaldes rekursion, og en funktion, der udfører gentagne processer ved hjælp af dette, kaldes en rekursiv funktion. For eksempel kan en funktion til at beregne en fakultet implementeres ved hjælp af rekursion som følger.

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)

I dette eksempel vil fakultetet af 5, som er 120, blive vist.

this-Nøgleord

this, der bruges inde i en funktion, angiver, hvilken objekt funktionen henviser til. I en almindelig funktion henviser den til det kaldende objekt, men i pilfunktioner bevarer den this fra det område, hvor den blev defineret.

 1const obj = {
 2    name: "Alice",
 3    greet: function() {
 4        console.log(this.name); // Refers to "Alice"
 5    }
 6};
 7
 8obj.greet(); // Alice
 9
10const obj2 = {
11    name: "Bob",
12    greet: () => {
13        // Arrow function refers to the outer scope (undefined here)
14        console.log(this.name);
15    }
16};
17
18obj2.greet(); // undefined

greet-metoden for obj-variablen er erklæret ved hjælp af function-nøgleordet. Derfor refererer nøgleordet this til objektet for obj-variablen. På den anden side er greet-metoden for obj2-variablen erklæret ved hjælp af en pilfunktion. Derfor refererer nøgleordet this til objektet i den ydre scope og er undefined i dette eksempel.

Funktionens scope og closures

Variabler defineret inden i en funktion kan ikke tilgås uden for funktionen. Dette kaldes funktionens scope. Der er også en funktion kaldet closure, som bevarer scopen på det tidspunkt, hvor funktionen er defineret.

 1function outer() {
 2    let outerVar = "I am outer!";
 3
 4    function inner() {
 5        console.log(outerVar); // Can access outerVar
 6    }
 7
 8    return inner;
 9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!

I dette eksempel kan inner-funktionen tilgå outerVar-variablen, fordi den bevarer scopen, hvor den blev defineret.

Sammendrag

• Der er forskellige måder at definere funktioner på, herunder funktionsdeklarationer, funktionelle udtryk og pilfunktioner.
• Funktioner kan tage argumenter og returnere værdier.
• Der er særlige anvendelser som callback-funktioner og rekursive funktioner.
• Der skal udvises forsigtighed ved håndtering af this, da pilfunktioner og almindelige funktioner opfører sig forskelligt.
• Closures kan bruges til at få adgang til interne variabler fra uden for scopen.

Funktioner er et af de vigtige begreber i JavaScript, der udnytter dets fleksible struktur.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video