Колбэки: функция как аргумент

Что функция — обычное значение, разбирала статья «Функциональные выражения»; на этом стоит вся нынешняя, поэтому повторим коротко. Объявление function greet() { ... } не просто «учит» язык новому слову: оно создаёт значение и кладёт его в переменную greet — примерно так же, как let x = 5 кладёт туда число. Разница одна: это значение умеет выполняться.

Отсюда правило, которое стоит запомнить сразу: greet — это сама функция, а greet() — результат её вызова. Первое можно скопировать, положить в массив, передать куда угодно. Второе — уже строка, число или undefined, и функцией больше не является.

function greet(name) {
  return "Привет, " + name;
}
const hello = greet;
console.log(typeof hello);
console.log(hello("Аня"));

Раз функция — обычное значение, её можно принять параметром. Принимающая сторона не знает и не хочет знать, что именно ей дали: она просто в нужный момент ставит скобки и вызывает. Ниже repeat управляет счётчиком, а что делать на каждом шаге — решает переданная функция.

function repeat(times, action) {
  for (let i = 1; i <= times; i++) {
    action(i);
  }
}
repeat(3, function (step) {
  console.log("шаг " + step);
});

Функция, переданная ради того, чтобы её вызвали позже, и есть колбэк (от английского call back — «перезвонить»). Заметьте: аргумент action нигде не описан подробнее — контракт держится на договорённости, что его вызовут с одним числом.

function bark() {
  console.log("Гав");
}
const wrong = bark();
console.log(wrong);

Метод forEach обходит массив и на каждом шаге вызывает переданную функцию, подставляя ей значение и индекс. Сам цикл спрятан внутри метода — снаружи остаётся только описание того, что делать с элементом. Сами методы массива здесь — удобный пример, а разбирает их статья «Методы массивов: map, filter, reduce».

const cart = ["хлеб", "молоко", "кофе"];
cart.forEach(function (item, index) {
  console.log(index + ": " + item);
});

У sort задача обратная: он умеет переставлять элементы, но не знает, что для вас «меньше». Это и сообщает компаратор — колбэк, который получает два элемента и возвращает отрицательное число, если первый должен идти раньше, положительное — если позже, и ноль при равенстве. Без компаратора sort сравнивает элементы как строки, поэтому числа выстраиваются не по величине.

const prices = [12, 5, 130, 40];
prices.sort(function (a, b) {
  return a - b;
});
console.log(prices);

setTimeout — не про массивы, а про время. Он принимает функцию и задержку в миллисекундах, запоминает эту пару и сразу возвращает управление. Ваш код продолжает выполняться, а колбэк ждёт своего момента.

setTimeout(function () {
  console.log("таймер сработал");
}, 500);
console.log("а это печатается сразу");

Порядок вывода не совпадает с порядком строк — и это не сбой, а суть приёма. Вызвать функцию прямо сейчас было бы бессмысленно: важен именно момент, а выбирает его не ваш код, а таймер. Оба таймера и их ловушки — в статье «setTimeout и setInterval».

Колбэк — не особый вид функции, а её роль. Одну и ту же bark можно вызвать самому, отдать в setTimeout или в forEach: колбэком она становится в момент передачи.

Колбэк выносит за скобки то, что меняется. Функция findFirst ниже умеет обходить список и вовремя останавливаться, а что считать подходящим элементом — решает тот, кто её вызывает. Один алгоритм, сколько угодно условий.

function findFirst(list, isGood) {
  for (const item of list) {
    if (isGood(item)) return item;
  }
  return null;
}
const nums = [7, 3, 12, 5];
console.log(findFirst(nums, function (n) { return n > 10; }));

Так устроена половина стандартной библиотеки и почти все браузерные API: map, filter, обработчики кликов, ответы сервера. Везде повторяется один приём — общий алгоритм в чужом коде, конкретное поведение в вашей функции.

const values = [7, 3, 12, 5];
console.log(values.filter(function (n) { return n > 4; }));
console.log(values.filter((n) => n > 4));