Callbacks в Javascript

Всем привет, с вами JSexpert и сегодняшнем в уроке мы с вами рассмотрим такую тему, как сallback в javascript.

В javascript функции могут принимать другие функции в качестве аргумента, а так же возвращать их. Такие функции называются функциями высшего порядка. В javascript любую функцию, которая передаётся внутрь как аргумент называют колбек (callback) функцией или функцией обратного вызова.

Где это используется и как может быть полезно? Большинство из вас неоднократно видели при работе с событиями или при работе с бекендом нечто подобное:

el.addEventListener("click", () => { runAction() })

У нас есть какой-то элемент (el), мы добавляем к нему обработчик события addEventListener и когда мы кликнем по этому элементу запуститься функция runAction, в которой может быть какой угодно код, в одну или в несколько строк.

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

function showMsg(name, status, callback) {
    if (callback && typeof callback === 'function') {
        callback();
    } else {
        console.log(`Hello ${name}, your status is ${status}`);
    }
}

showMsg("John", "Admin", () => {
    console.log(`Hello message not supported.`)
}

В нашем примере мы создали функцию showMsg, который принимает три аргумента: name, status и callback. Внутри функции у нас происходят следующие действия: мы проверяем или существует callback, то есть, был ли передан третий аргумент, смотрим его тип (typeof) — является ли этот аргумент callback функцией, и если является — мы его вызываем. Так же мы написали else, если callback не функция, а какая-то другая величина, или же третий аргумент не передан, тогда выведется [некое] информационное сообщение.

Таким образом, чем может быть полезен этот механизм? В конце вашей функции или метода вы можете вызвать соответствующую callback функцию, которая описана в совершенно другой части вашего приложения. Например вы находитесь в модуле фильтр. И когда пользователь изменил фильтрацию, после всех необходимых действий вызывается callback, который в свою очередь является функцией другого модуля, например список товаров. Соответственно вы выполняете поиск товаров с использованием измененных параметров фильтра.

Давайте запустим код нашего примера и посмотрим как он работает. В консоли мы увидим следующее:

Hello message not supported.

Мы увидели данное сообщение потому, что в метод showMsg мы передали три аргумента, третьим из которых является callback функция, внутри которой console.log. Так как это функция, сработала проверка в if и мы увидели сообщение из console.log.

Попробуем вызвать вот такой вариант, без третьего параметра, без callback функции:

showMsg("John", "Admin");

в консоли мы увидим другой вариант:

Hello John, your status is Admin

С этими параметрами проверка в if не прошла, сработал else блок и вывел другой код.

Следует добавить, что существует такой термин как callback hell, когда все callback-и запутываются между собой. Потому сейчас существует тенденция, когда стараются, по возможности, максимально уходить от callback-ов, в том числе и благодаря async / await, о которой мы с вами ещё поговорим. Тем не менее вы должны знать что такое бывает и, соответственно, уметь этим пользоваться и/или грамотно избавляться, если есть такая потребность.

На этом сегодня всё, увидимся на следующих уроках!