Funksjoner i JavaScript

Denne artikkelen forklarer funksjoner i JavaScript.

YouTube Video

Funksjoner i JavaScript

Funksjoner i JavaScript er blokker med gjenbrukbar kode som brukes for å utføre spesifikke oppgaver. Bruk av funksjoner forbedrer kodelesbarheten og gjør vedlikehold enklere. Funksjoner kan defineres på flere måter og manipuleres fleksibelt ved bruk av argumenter og returverdier.

Måter å Definere Funksjoner

Funksjonsdeklarasjon

Funksjoner kan defineres med nøkkelordet function. Funksjonsdeklarasjoner er løftet opp før koden kjører, så de kan kalles før de er definert.

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

I dette eksemplet, siden greet-funksjonen kalles før den er deklarert, vises Hello, Everyone og Hello, Alice.

Funksjonsuttrykk

Funksjoner kan også defineres ved å tilordne dem til en variabel. I dette tilfellet blir ikke funksjonen løftet opp og kan bare kalles etter at den er definert.

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

I dette eksemplet vil Hello, Bob bli vist.

Pilfunksjon

Pilfunksjoner er en måte å definere funksjoner med kortere syntaks på. De er spesielt nyttige når du bruker anonyme funksjoner (funksjoner uten navn). Pilfunksjoner har også en annen oppførsel når det gjelder nøkkelordet 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

Funksjoner kan deklareres som greet og greetShort i dette eksemplet. Hvis funksjonen er på én linje, kan du utelate {} (krøllparentesene) som i greetShort.

Elementer i en Funksjon

Argumenter

Verdier som sendes til en funksjon kalles argumenter. Ved å spesifisere argumenter når du definerer en funksjon, kan du sende verdier når du kaller funksjonen.

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

Standardargumenter

Du kan spesifisere en standardverdi hvis ingen verdi blir sendt til argumentene.

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

I dette eksemplet brukes standardverdien Guest hvis greet() kalles.

Returverdi

Du kan returnere en returverdi fra en funksjon ved å bruke return-setningen. Hvis det ikke er noen return-setning, vil funksjonen returnere 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 eksemplet returnerer greet ingen verdi, så returverdien er undefined.

Anonym funksjon

En funksjon uten navn kalles en anonym funksjon. De brukes ofte som funksjonsuttrykk eller som pilfunksjoner.

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

Umiddelbart utført funksjonsuttrykk (IIFE)

Et umiddelbart utført funksjonsuttrykk (IIFE) er en funksjon som utføres så snart den er definert. Det brukes vanligvis for å kontrollere omfanget.

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

Den utføres så snart den erklæres.

Tilbakekallingsfunksjon

Å sende en funksjon som et argument til en annen funksjon, for senere utførelse, kalles en tilbakekallingsfunksjon. Det brukes ofte i asynkron behandling og hendelseshå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 eksemplet sendes en funksjon som skriver ut en verdi til konsollen som en tilbakekallingsfunksjon.

Rekursiv funksjon

Å kalle en funksjon som seg selv kalles rekursjon, og en funksjon som utfører repetitiv behandling ved å bruke dette kalles en rekursiv funksjon. For eksempel kan en funksjon som beregner en fakultet implementeres ved hjelp av rekursjon 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 eksempelet vil fakultetet til 5, som er 120, bli vist.

this-nøkkelordet

this som brukes inni en funksjon angir hvilket objekt funksjonen refererer til. I en vanlig funksjon refererer det til det kallende objektet, men i pilfunksjoner beholder det this fra omfanget der det ble definert.

 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-funksjonen i obj-variabelen er erklært ved å bruke function-nøkkelordet. Derfor refererer this-nøkkelordet til objektet i obj-variabelen. På den andre siden er greet-funksjonen i obj2-variabelen erklært ved hjelp av en pil-funksjon. Derfor refererer this-nøkkelordet til objektet i det ytre scope og er undefined i dette eksempelet.

Funksjonens Scope og Lukkede Variabler (Closures)

Variabler definert inne i en funksjon kan ikke nås fra utsiden av funksjonen. Dette kalles funksjonens scope. Det finnes også en funksjon kalt closure, som bevarer scopen på det tidspunktet funksjonen er definert.

 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 eksempelet kan inner-funksjonen få tilgang til outerVar-variabelen fordi den bevarer scopen der den ble definert.

Sammendrag

• Det finnes ulike måter å definere funksjoner på, inkludert funksjonserklæringer, funksjonsuttrykk og pil-funksjoner.
• Funksjoner kan ta argumenter og returnere verdier.
• Det finnes spesielle bruksområder som callback-funksjoner og rekursive funksjoner.
• Det må utvises forsiktighet ved håndteringen av this, siden pil-funksjoner og vanlige funksjoner oppfører seg forskjellig.
• Closures kan brukes til å få tilgang til interne variabler utenfor scopen.

Funksjoner er et av de viktige konseptene i JavaScript, som drar fordel av språkets fleksible struktur.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video