Callback-funktioner i JavaScript: En praktisk guide

Callback-funktioner i JavaScript: En praktisk guide

I JavaScript kan du definiera kodblock – variabler och funktioner. En funktion kan ta emot parametrar och kan till och med ta emot en referens till en annan funktion. Den här referensen kallas ofta för en callback och körs när den omgivande funktionen har slutförts.

Definiera en callback

För att skapa en callback måste du först deklarera funktionen. Exempel:

const callbackDefinition = function(numParam) {
    alert(numParam);
};

Funktionen kan innehålla vilken JavaScript-kod som helst. Sedan kan du skicka den som en parameter till en annan funktion med hjälp av variabelnamnet.

Skicka callback som parameter

När funktionen är definierad kan du skicka den som argument:

mainFunction(10, callbackDefinition);

Här anropas mainFunction med ett tal och en referens till callbacken. Funktionens prototyp måste acceptera båda parametrarna.

Utföra callbacken

Callbacken körs inne i den mottagande funktionen:

function mainFunction(myNum, callbackFn) {
    alert(myNum);
    callbackFn(myNum * 2);
}

Först visas ett meddelande, sedan anropas callbacken med ett nytt tal.

Callbacks i händelsehantering

Callbacks är särskilt användbara när du vill reagera på användarinteraktioner. Ett exempel:

function doCallback() {
    const callFn = function(numParam) {
        alert(numParam);
    };
    mainFunction(10, callFn);
}

Om du binder doCallback till ett klick‑händelse, t.ex. <button onclick="doCallback()>Klicka mig</button>, så körs hela kedjan av funktioner när knappen trycks.

Callbacks är grunden för asynkron programmering i JavaScript och används i många API:er, som setTimeout, fetch och event‑listeners.