Callback functions в JavaScript.

В этой статье мы познакомимся с функциями обратного вызова в JavaScript на нескольких примерах. Функции обратного вызова также называют функциями высшего порядка.

Функция высшего порядка — это функция, которая может принимать другую функцию в качестве аргумента или возвращать другую функцию в качестве результата.

Функция в JS является объектом первого класса.

В языках программирования существует понятие "объекты первого рода (или класса)". Им обозначают элементы, которые могут быть переданы в функции, возвращены из функций и присвоены переменным (или константам). К таким элементам относятся любые данные, например числа, строки, массивы или логические значения. Обратите внимание, что сама переменная (или константа) под это понятие не попадает, объектом первого рода считаются те данные, которые лежат в переменной (или константе).

1. Мы можем передать объект в функцию в качестве аргумента.
2. Мы также можем передать другие функции в функцию в качестве аргумента для выполнения в некоторый момент.

Простой пример для понимания:

    let function1 = function(){
        console.log("I'm the function1 result");
    }
    
    
    let function2 = function(callback){
        console.log("I'm the function2 result");
        
        callback();
    }
    
    
    function2(function1);

// I'm the function2 result
// I'm the function1 result

Всё это работает нормально. Легко понять, как передать функцию в качестве аргумента другой функции.

Но зачем нам этот обратный вызов в JavaScript?

Чтобы лучше понять, посмотрите на приведенный ниже пример, который не использует функции обратного вызова, и посмотрите, насколько это уродливо.

 let calculate = function(x, y, operation){
      
      if(operation === 'subtract')
          return x - y;
    
      else if(operation === 'divide')
          return x/y;
  }
  
  console.log(calculate(10,3,'subtract'));


 // Output:
 //  7

Это отлично работает. Но допустим, что эта функция вычисления является частью некоторой библиотеки, например, библиотеки jQuery. И пользователь должен использовать эту библиотеку, должен передать число и тип расчета, чтобы получить результат.

Теперь для всех возможных типов вычислений, эта библиотека должна реализовать все это. Мы можем передать add, кратно или это могут быть случайные операции. Но эта библиотека поддерживает только два типа вычислений: вычитание и деление.

Так что делать? какой лучший способ для этого?

Лучший способ сделать это - сделать функцию как можно более абстрактной. Чтобы сделать функцию абстрактной, нам нужно вывести функциональность наружу. Функция должна быть общей.

Посмотрите на приведенный ниже пример, чтобы лучше понять.

Используя функции обратного вызова, мы собираемся улучшить приведенный выше код. Так что вы можете увидеть реальное использование функций обратного вызова.

let add = function (x, y) {
  return x + y;
};

let substract = function (x, y) {
  return x - y;
};

let multiplay = function (x, y) {
  return x * y;
};

let divide = function (x, y) {
  return x / y;
};

let calculate = function (x, y, callback) {
  if (typeof callback === "function") return callback(x, y);
};

console.log(calculate(12, 8, add));
// 20

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

Я также могу сделать это,

let calculate = function (x, y, callback) {
  if (typeof callback === "function") return callback(x, y);
};

console.log(
  calculate(12, 8, function (x, y) {
    return x >= y;
  })
);
// true

Исходя из моих требований, я могу изменить все, что смогу. Этот пример выше возвращает true.

Пример из реальной жизни:

Одним из примеров функции обратного вызова JavaScript в реальном времени является метод sort().

var simpleArray = [
  {
    key: 12,
    value: "Hello",
  },
  {
    key: 13,
    value: "World",
  },
  {
    key: 14,
    value: "Something",
  },
];

simpleArray.sort(function (val_1, val_2) {
  if (val_1.key < val_2.key) {
    return -1;
  } else {
    return 1;
  }
});

let result = simpleArray.forEach((res) =>
  console.log(res.key + " " + res.value)
);
// 12 Hello
// 13 World
// 14 Something

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

Давайте изменим функцию обратного вызова для сортировки массива по ключам в порядке убывания.

simpleArray.sort(function (val_1, val_2) {
  if (val_1.key > val_2.key) {
    return -1;
  } else {
    return 1;
  }
});

let result = simpleArray.forEach((res) =>
  console.log(res.key + " " + res.value)
);
// 14 Something
// 13 World
// 12 Hello

Давайте изменим функцию обратного вызова для сортировки массива на основе значений в порядке возрастания.

simpleArray.sort(function (val_1, val_2) {
  if (val_1.value < val_2.value) {
    return -1;
  } else {
    return 1;
  }
});
// 12 Hello
// 14 Something
// 13 World

Давайте изменим функцию обратного вызова для сортировки массива по значениям в порядке убывания.

simpleArray.sort(function (val_1, val_2) {
  if (val_1.value > val_2.value) {
    return -1;
  } else {
    return 1;
  }
});
// 13 World
// 14 Something
// 12 Hello

Приведенные выше примеры, помогают не только понять работу обратных вызовов в JavaScript, но помогают написать некоторые функции сортировки, а это в свою очередь полезно тем, что не нужно "тянуть" в проект всю библиотеку (например Lodash), только ради простой сортировки.

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

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

JAVASCRIPT&PHP                                                                                                                                                              

Телеграм канал - Full Stack JavaScript Developer