Funktioner i JavaScript

Den här artikeln förklarar funktioner i JavaScript.

YouTube Video

Funktioner i JavaScript

Funktioner i JavaScript är block av återanvändbar kod som används för att utföra specifika uppgifter. Att använda funktioner förbättrar kodens läsbarhet och gör underhåll enklare. Funktioner kan definieras på flera sätt och manipuleras flexibelt med hjälp av argument och returvärden.

Sätt att definiera funktioner

Funktionsdeklaration

Funktioner kan definieras med nyckelordet function. Funktionsdeklarationer är höjda innan koden körs, så de kan anropas innan de är definierade.

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

I det här exemplet, eftersom greet-funktionen anropas innan dess deklaration, visas Hello, Everyone och Hello, Alice.

Funktionsuttryck

Funktioner kan också definieras genom att tilldela dem till en variabel. I det här fallet höjs inte funktionen och kan endast anropas efter att den är definierad.

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

I det här exemplet kommer Hello, Bob att visas.

Pilsfunktion

Pilsfunktioner är ett sätt att definiera funktioner med en kortare syntax. De är särskilt användbara vid användning av anonyma funktioner (funktioner utan namn). Pilsfunktioner har också ett annorlunda beteende när det gäller nyckelordet 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 deklareras som greet och greetShort i det här exemplet. Om funktionen består av en rad kan du utelämna {} (klamrar) som i greetShort.

Element i en funktion

Argument

Värden som skickas till en funktion kallas argument. Genom att specificera argument vid definitionen av en funktion kan du skicka värden när du anropar funktionen.

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

Standardargument

Du kan ange ett standardvärde om inget värde skickas till argumenten.

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

I detta exempel, om greet() anropas, används standardvärdet Guest.

Returnerat värde

Du kan returnera ett returnerat värde från en funktion med hjälp av return-satsen. Om det inte finns någon return-sats returnerar 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 detta exempel, eftersom greet inte returnerar ett värde, är det returnerade värdet undefined.

Anonym funktion

En funktion utan namn kallas en anonym funktion. De används ofta som funktionsuttryck eller pilfunktioner.

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

Omedelbart anropad funktionsuttryck (IIFE)

En omedelbart anropad funktionsuttryck (IIFE) är en funktion som körs så snart den definieras. Den används vanligtvis för att kontrollera scope.

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

Den körs så snart den deklareras.

Callback-funktion

Att skicka en funktion som ett argument till en annan funktion, för senare körning, kallas en callback-funktion. Den används ofta för asynkrona processer och händelsehantering.

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

I detta exempel skickas en funktion som skriver ut ett värde till konsolen som en callback-funktion.

Rekursiv funktion

Att anropa en funktion från sig själv kallas rekursion, och en funktion som utför repetitiv bearbetning med detta kallas en rekursiv funktion. Till exempel kan en funktion för att beräkna en fakultet implementeras med rekursion på följande sätt.

 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 det här exemplet kommer fakulteten av 5, vilket är 120, att visas.

this-nyckelord

this som används inuti en funktion anger vilket objekt funktionen hänvisar till. I en vanlig funktion hänvisar det till det anropande objektet, men i pilfunktioner behåller det this från scopet där det definierades.

 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 i variabeln obj deklareras med hjälp av nyckelordet function. Därför refererar nyckelordet this till objektet i variabeln obj. Å andra sidan deklareras greet i variabeln obj2 med en pilfunktion. Därför refererar nyckelordet this till objektet i den yttre scope och är undefined i detta exempel.

Funktionens scope och closures

Variabler som definieras inuti en funktion kan inte nås från utsidan av funktionen. Detta kallas funktionens scope. Det finns också en funktion som kallas closure, som behåller scope vid den punkt då funktionen definieras.

 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 detta exempel kan funktionen inner komma åt variabeln outerVar eftersom den behåller det scope där den definierades.

Sammanfattning

• Det finns olika sätt att definiera funktioner, inklusive funktionsdeklarationer, funktionella uttryck, och pilfunktioner.
• Funktioner kan ta emot argument och returnera värden.
• Det finns speciella användningsområden som callback-funktioner och rekursiva funktioner.
• Man måste vara försiktig med hanteringen av this, eftersom pilfunktioner och vanliga funktioner beter sig olika.
• Closures kan användas för att komma åt interna variabler från utsidan av scope.

Funktioner är ett av de viktiga koncepten i JavaScript och utnyttjar dess flexibla struktur.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video