Обратный вызов отличается от вызова одной функции от другой (JS)?

Question

Я изучаю JS и пытался понять обратные вызовы. Я наткнулся на ссылку: How to explain callbacks in plain english? How are they different from calling one function from another function? В принятом ответе решение с использованием обратных вызовов выглядит следующим образом:

function processArray(arr, callback) { 
    var resultArr = new Array(); 
    for(var i = arr.length-1; i >= 0; i--) 
     resultArr[i] = callback(arr[i]); 
    return resultArr; 
} 

var arr = [1, 2, 3, 4]; 
var arrReturned = processArray(arr, function(arg) {return arg * -1;}); 
alert(arrReturned); 

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

function processArray2(arr) { 
    var resultArr = new Array(); 
    for(var i = arr.length-1; i >= 0; i--) 
     resultArr[i] = negate(arr[i]); 
    return resultArr; 
} 

function negate(n) { 
    return n*-1; 
} 
var arr = [1, 2, 3, 4]; 
var arrReturned2 = processArray2(arr); 
alert(arrReturned2); 

Если то же самое можно сделать без обратных вызовов, почему мы должны использовать обратный вызов в приведенном выше примере. Я знаю, что я определенно чего-то не хватает. Но я не могу понять, что.

Answer 1

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

Если вы можете избежать обратных вызовов по мере обучения, вам может быть проще.

Тем не менее, они являются неотъемлемой частью JS и станут необходимыми, поскольку вы становитесь более продвинутыми. Разработчики JS используют их для взаимодействия с браузером. Ярким примером необходимости обратных вызовов являются объекты XHR (если вы никогда не слышали о них, не волнуйтесь, это может быть слишком рано в их обучении).

Answer 2

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

var array = [1, 2, 3, 4, 5]; 
 
    
 
    var reduce = function (array, callback, start) { 
 
     array.forEach(function (value) { 
 
      start = callback(start, value); 
 
     }); 
 
     return start; 
 
    }; 
 
    
 
    function adder (prev, current) { 
 
     return prev + current; 
 
    } 
 
    
 
    var sum = reduce(array, adder, 0); 
 
    
 
    function multiplier (prev, current) { 
 
     return prev * current; 
 
    } 
 
    
 
    var product = reduce(array, multiplier, 1); 
 
    
 
    console.log(sum); // 15 
 
    console.log(product) // 120

reduce был создан, и он может быть использован со многими функциями. (Считывание в сторону) Если вы используете только adder один раз, вы можете поместить его в reduce в качестве аргумента. Если вы используете adder много раз в вашей заявке, лучше передать ее в reduce как var или const (const adder = ...).

This post может дать вам лучшее представление о том, как функции являются «первоклассными гражданами» в JS и как обратные вызовы могут использоваться в других контекстах вне вашего вопроса.