Callback-функция javascript

#javascript

Объясните пожалуйста, что такое callback-функция и для чего она используется?
Как я понимаю, это функция, которая передается в параметр другой функции, пример:

function blabla (a, b, callback) {
    let s = a + b;
    return s;
}
function sum () {
    console.log('blalba');
}

blabla (1, 2, sum);


sum(x, y) - Это и есть callback?
    

Ответы

Ответ 1

callback-функции, сокращенно "коллбеки", по-русски "функции обратного вызова" - это
функции, которые передаются получателю, чтобы получатель их мог вызвать с какой-нибудь
целью. Применение таких функций проще пояснить на примерах.

Во-первых, функции обратного вызова могут использоваться для настройки обобщенных
алгоритмов. Рассмотрим, например, метод filter у массива. Этот метод создает новый
массив, состоящий из элементов исходного, удовлетворяющих какому-то условию. Функция
обратного вызова тут задает это самое условие.

Этот метод обычно реализуется браузером, но если бы его не было - то нечто подобное
можно было бы реализовать вот так (более точную реализацию можно увидеть по ссылке выше):

Array.prototype.filter = function(callback) 
{
    var result = [];
    for (var i=0, len = this.length; i < len; i++)
    {
        if (callback(this[i]))
        {
            result.push(this[i]);
        }
    }
    return result;
}


Использование:

var x = [1,2,3,7,8,9];
var y = x.filter(t => t%2 == 0); // фильтруем чётные
console.log(y); // [2,8]


Во-вторых, функции обратного вызова могут использоваться для отложенного возврата
значения. Код, в котором используется этот прием, называют асинхронным.

function loadData(callback) {
    fetch("/some/api/url", function (response) {
        response.json().then(callback);
    })
}

loadData(d => console.log(d));


Здесь используется функция fetch для выполнения ajax-запроса к некоторому API. Кстати,
эта функция сама по себе тоже асинхронная, поэтому в примере вы видите две разных callback-функции:
одна внутри loadData, вторая - снаружи.

Поскольку запрос к серверу выполняется относительно долго- не существует другого
способа получить его результат кроме как передав callback для его обработки. Поэтому
довольно часто один callback вызывает другой, а тот - третий. Неограниченное разрастание
колбеков в коде называют callback hell.

Более подробно про асинхронность я отвечал тут:

Как вернуть значение из события или из функции обратного вызова?

В-третьих, callback может использоваться для уведомления о событии. Сюда относятся,
собственно, все события.

Каждый раз когда вы пишите someElement.onclick = ..., someElement.addEventListener(...)
или просто  - вы создаете callback и передаете его элементу.