Как работают колбэки в JavaScript
- 11 октября 2019
Это вторая часть рассказа про то, как устроены колбэки в JavaScript.
В первой части мы на примере заказа пиццы разобрались с тем, зачем нужны колбэки. Сейчас посмотрим на то, как работают запросы к серверу, как получать данные через AJAX.
Практически любое приложение на JavaScript взаимодействует с сервером. Нам постоянно приходится получать данные с помощью методологии AJAX. Попробуем запросить информацию о произвольном аккаунте с GitHub и вывести её в консоль. Такая программа может выглядеть так:
const loadData = function(url, cb) {
const xhr = new XMLHttpRequest();
xhr.open(`GET`, url);
xhr.responseType = `json`;
// После получения данных выполним cb.
xhr.addEventListener(`load`, cb);
xhr.send();
}
loadData(`https://api.github.com/users/AntonovIgor`, function (evt) {
const response = evt.currentTarget.response;
console.log(response);
});
В этом коде мы делаем запрос к серверу с помощью объекта XMLHttpRequest
. Для удобства мы создали функцию loadData
, которая принимает два параметра: адрес сервера, который отдаст нам набор информации, и функцию обратного вызова. Вызов этой функции произойдёт сразу после получения данных от сервера. Если вас смутило наименование параметра cb
— не переживайте. Это общепринятый вариант обозначения функций обратного вызова (сокращение от callback). При виде cb
становится очевидно, что в этот параметр должна передаваться ссылка на функцию.
Мы не будем детально рассматривать содержимое функции loadData
, т. к. это не относится напрямую к теме статьи. Если коротко, то эта функция делает запрос к серверу и вызывает нашу функцию после получения ответа.
Обратите внимание, как мы вызываем функцию loadData
. В первый параметр мы передаём адрес сервера, а во второй — ссылку на функцию. В этот раз мы не описывали функцию отдельно, а сделали это прямо «в параметре» — создали анонимную функцию. Подобный подход часто применяется, когда функция нужна один раз. В таких ситуациях нет смысла писать отдельный код — достаточно создать анонимную функцию в нужном месте.
Наша функция сработает сразу после получения ответа от сервера (произойдёт событие load
) и выведет ответ сервера в консоль.
Колбэки повсюду
Даже если вам не требуется работать с сервером, довольно высоки шансы столкнуться с функциями обратного вызова.
Не верите? Хорошо, а как насчёт стандартных возможностей вроде перебирающих методов массивов: forEach
, every
, some
, reduce
, filter
или функции сортировки sort
, или методе addEventListener
(второй параметр принимает функцию, которая будет вызвана при наступлении события). Список можно продолжать до бесконечности.
Всякий раз, когда вы пишете код, похожий на этот, вы применяете функции обратного вызова:
[1, 2, 3, 4].forEach(function(it) {
console.log(it)
});
Аналогично с установкой обработчиков событий. Каждый раз, когда вы подписываетесь на событие с помощью addEventListener
, через её второй параметр вы определяете функцию обратного вызова, которая сработает при наступлении события. В мире JavaScript колбэки повсюду.
Как передать параметры в колбэк-функцию
Это очень важный вопрос, и в начале понимания сути колбэк-функций он может загнать в тупик.
Проблема в том, что мы привыкли передавать параметры явно: пишем имя функции, открываем круглые скобки и передаем значения. Этот подход применяется постоянно, но с колбэк-функциями дело обстоит иначе. Если мы укажем круглые скобки, то произойдёт вызов функции, а нам требуется передать ссылку на неё. Как поступить в этом случае?
Для этого нужно вспомнить про замыкания. Функции в JavaScript могут возвращать в качестве результата выполнения другие функции. А уже у них будет доступ к вышестоящей области видимости.
С таким подходом легко решить задачу передачи параметров в колбэк-функцию.
Пример
Код заказа пиццы, который мы написали в первой части, выглядел так:
const makePizza = function (title, cb) {
console.log(`Заказ на приготовление пиццы «${title}» получен. Начинаем готовить…`);
setTimeout(cb, 3000);
}
const readBook = function () {
console.log(`Читаю книгу «Колдун и кристалл»…`);
}
const eatPizza = function () {
console.log(`Ура! Пицца готова, пора подкрепиться.`);
}
makePizza(`Пеперонни`, eatPizza);
readBook();
Давайте модифицируем его и добавим для функции eatPizza
параметр drink
, через который будем передавать напиток:
const makePizza = function (title, cb) {
console.log(`Заказ на приготовление пиццы «${title}» получен. Начинаем готовить…`);
setTimeout(cb, 3000);
}
const readBook = function () {
console.log(`Читаю книгу «Колдун и кристалл»…`);
}
const eatPizza = function (drink) {
return function() {
console.log(`Ура! Пицца готова, пора подкрепиться и запить ${drink}.`);
}
}
makePizza(`Пепперони`, eatPizza(`Coca-Cola`));
readBook();
Первое, что мы сделали — внесли изменения в функцию eatPizza
. Теперь она принимает параметр drink
и возвращает новую функцию. В теле новой функции происходит вывод информации в консоль. Помимо текста, который у нас был, мы добавили вывод информации о напитке (drink
). Теперь самое интересное. Функция eatPizza
перестаёт быть функцией обратного вызова, вместо неё эту роль будет исполнять функция, которую возвращает eatPizza
.
Мы изменили тело функции, и теперь нам требуется обновить вызов makePizza
. Вторым параметром мы указываем не ссылку на eatPizza
, а вызов функции, передав информацию о напитке. Получается, на место второго параметра будет передана новая функция, полученная в результате выполнения eatPizza
.
Если представленный пример вызывает затруднение — обязательно перечитайте теорию замыканий.
Метод bind
Рассмотренный способ — не единственный. Любую задачу можно решить несколькими способами, и передача параметров колбэк-функции — не исключение. Мы можем воспользоваться методом bind
, который есть у любой функции.
Метод bind
всё упрощает. Результатом его вызова будет новая функция, которой мы можем передать произвольный набор параметров и задать контекст выполнения. Давайте исправим код заказа пиццы, используя метод bind
.
const makePizza = function (title, cb) {
console.log(`Заказ на приготовление пиццы «${title}» получен. Начинаем готовить…`);
setTimeout(cb, 3000);
}
const readBook = function () {
console.log(`Читаю книгу «Колдун и кристалл»…`);
}
const eatPizza = function (drink) {
console.log(`Ура! Пицца готова, пора подкрепиться и запить ${drink}.`);
}
makePizza(`Пепперони`, eatPizza.bind(null, `Coca-Cola`));
readBook();
Мы вернули функцию eatPizza
к первоначальному состоянию, избавившись от возврата новой функции. В остальном всё без изменений. При передаче функции обратного вызова мы воспользовались методом bind
. Первый параметр (null
) позволяет задать произвольный контекст для функции, но так как эта возможность нас не интересует, мы передаем null
. Во втором параметре мы передаем значение для параметра drink
. Мы можем передать любое количество параметров для функции обратного вызова, перечисляя их через запятую.
Ад колбэков
Колбэк-функции просты в применении и открывают много возможностей, но с большой силой приходит большая ответственность. Легко потеряться во вложенности колбэк-функций и познать все прелести ада функций обратного вызова. Любым подходом нужно пользоваться с осторожностью. Как не попасть в ад обратных вызов, мы поговорим в одной из ближайших статей.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Генерация QR-кодов на JS в 4 шага. Node.js + qrcode
Сегодня сделаем простой REST API на Node.js и Express, который будет генерировать QR-коды для любой ссылки. Если у вас ещё не установлены Node.js
и npm
, установите их с официального сайта.
- 22 ноября 2023

ChatGPT не справляется
Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.
- 2 ноября 2023

Знакомство с JavaScript
Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.
Вы можете добавить JavaScript в ваш HTML-документ двумя способами:
Встроенный JavaScript: непосредственно в HTML-документ, в тегах <script>
:
<script>
alert("Привет, мир!");
</script>
Внешний JavaScript: подключение внешнего .js
файла к HTML-документу:
<script src="script.js"></script>
- 1 ноября 2023

Событие onclick в JS на примерах
Интерактивность — ключевой компонент любого современного сайта. И одним из наиболее часто используемых событий для создания интерактивности является событие onclick
. В этой статье мы подробно разберёмся, что такое событие onclick
, как его использовать и приведем примеры применения.
Событие onclick
— это событие JavaScript, которое активируется, когда пользователь кликает на определенный элемент страницы. Это может быть кнопка, ссылка, изображение или любой другой элемент, на который можно нажать.
- 30 октября 2023

Как перевернуть сайт. Самая короткая инструкция
Не представляем, зачем это может понадобиться, но не могли пройти мимо.
Никакой магии. Мы вызываем JavaScript-функцию rotateBody()
, которая применяет свойство transform
с значением rotate(180deg)
к элементу <body>
. Когда вы нажмете на кнопку «Перевернуть», всё, что находится внутри <body>
будет повернуто на 180 градусов (то есть, встанет вниз головой)
function rotateBody() {
document.body.style.transform = 'rotate(180deg)';
}
<button onclick="rotateBody()">Перевернуть</button>
Но такой код повернёт страницу только один раз. Если нужно, чтобы она возвращалась обратно при втором клике, усложним код:
let isRotated = false;
function rotateBody() {
if (isRotated) {
document.body.style.transform = 'rotate(0deg)';
document.body.style.direction = "ltr";
} else {
document.body.style.transform = 'rotate(180deg)';
document.body.style.direction = "rtl";
}
isRotated = !isRotated;
}
Надеемся, вы прочитали это описание до того, как нажать на кнопку.
- 25 октября 2023

Как узнать геолокацию: Geolocation API
Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.
Основной метод Geolocation API — getCurrentPosition()
, но есть и другие методы и свойства, которые могут пригодиться.
- 16 октября 2023

Что такое localStorage и как им пользоваться
localStorage
— это место в браузере пользователя, в котором сайты могут сохранять разные данные. Это как ящик для хранения вещей, которые не исчезнут, даже если вы выключите компьютер или закроете браузер.
До localStorage
разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.
- 12 октября 2023

Случайное число из диапазона
Допустим, вам зачем-то нужно целое случайное число от min
до max
. Вот сниппет, который поможет:
function getRandomInRange(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
- Math.random () генерирует случайное число между 0 и 1. Например, нам выпало число
0.54
. - (max — min + 1): определяет количество возможных значений в заданном диапазоне.
10 - 0 + 1 = 11
. Это значит, что у нас есть 11 возможных значений (0, 1, 2, ... 10). - Math.random () * (max — min + 1): умножает случайное число на количество возможных значений:
0.54 * 11 = 5.94
. - Math.floor (): округляет число вниз до ближайшего целого. Так,
Math.floor(5.94) = 5
. - ... + min: смещает диапазон так, чтобы минимальное значение соответствовало
min
. Но в нашем примере, так какmin = 0
, это не изменит результат. Пример:5 + 0 = 5
. - Итак, в нашем примере получилось случайное число 5 из диапазона от 0 до 10.
Чтобы протестировать, запустите:
console.log(getRandomInRange(1, 10)); // Тест
- 7 сентября 2023

В чём разница между var и let
Если вы недавно пишете на JavaScript, то наверняка задавались вопросом, чем отличаются var
и let
, и что выбрать в каждом случае. Объясняем.
var
и let
— это просто два способа объявить переменную. Вот так:
var x = 10;
let y = 20;
Переменная, объявленная через var
, доступна только внутри «своей» функции, или глобально, если она была объявлена вне функции.
function myFunction() {
var z = 30;
console.log(z); // 30
}
myFunction();
console.log(z); // ReferenceError
Это может создавать неожиданные ситуации. Допустим, вы создаёте цикл в функции и хотите, чтобы переменная i
осталась в этой функции. Если вы используете var
, эта переменная «утечёт» за пределы цикла и будет доступна во всей функции.
Переменные, объявленные с помощью let
доступны только в пределах блока кода, в котором они были объявлены.
if (true) {
let a = 40;
console.log(a); // 40
}
console.log(a); // ReferenceError
В JavaScript блок кода — это участок кода, заключённый в фигурные скобки {}
. Это может быть цикл, код в условном операторе или что-нибудь ещё.
if (true) {
let blockScoped = "Я виден только здесь";
console.log(blockScoped); // "Я виден только здесь"
}
// здесь переменная blockScoped недоступна
console.log(blockScoped); // ReferenceError
Если переменная j
объявлена в цикле с let
, она останется только в этом цикле, и попытка обратиться к ней за его пределами вызовет ошибку.
- 30 августа 2023

Быстрый гайд по if, else, else if в JavaScript
Допустим, вы собираетесь идти на прогулку. Если на улице солнечно, вы возьмёте с собой солнечные очки.
Это можно описать с помощью оператора if
.
let weather = "sunny";
if (weather === "sunny") {
console.log("Возьму солнечные очки");
}
А если погода не солнечная, а, скажем, дождливая, вы возьмете зонт.
Этот сценарий можно описать с помощью if-else
.
let weather = "rainy";
if (weather === "sunny") {
console.log("Возьму солнечные очки");
} else {
console.log("Возьму зонт");
}
Условный оператор if-else if-else
Теперь представим, что у вас есть несколько вариантов транспорта для дороги на работу: машина, велосипед, общественный транспорт. Выбор будет зависеть от различных условий, например, погоды и времени суток. Логично, что в дождь безопаснее ехать на автобусе, а в хорошую погоду можно прокатиться на машине или велосипеде, если утро и пробки. То есть схема такая:
И всё это очень легко описывается кодом:
let weather = "sunny";
let time = "morning";
if (weather === "rainy") { // если дождь, то только так
console.log("Еду на автобусе");
} else if (time === "morning") { // если не дождь и утро
console.log("Еду на велике мимо пробок");
} else { // если второе не дождь и не утро
console.log("Еду на машине");
}
Ветвление только может показаться сложным, но вообще оно очень логичное, если понять, какие действия после каких условий выполняются. Разберитесь один раз и поймёте на всю жизнь, 100%.
🐈
- 30 августа 2023