Callback different from calling one function from another (JS)?

Question

I am learning JS and was trying to understand callbacks. I came across a link: How to explain callbacks in plain english? How are they different from calling one function from another function? In the accepted answer the solution using callbacks is as follows:

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);

However when I tried doing the same thing without using callbacks as follows, I got the same answer as above.

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);

When the same thing can be done without callbacks why do we need to use callback in the above example. I know I am definitely missing something. But I can't seem to understand what.

In your second example, negate isn't defined. Is that an omission? — wafflecat, Jul 09 '16 at 18:51
Btw, callbacks are just normal, anonymous functions. There is nothing special about them. — , Jul 09 '16 at 19:14

score 1 · Answer 1 · answered Jul 09 '16 at 19:05

Generally, there's no strict need to use a callback. Whenever you use a callback, you could instead call the function directly. That is… as long as you know exactly what the function is so you can refer to it in your source!

If you can avoid callbacks as you're learning, it might be easier on you.

That said, they are an integral part of JS, and will become necessary as you get more advanced. JS developers use them a lot to interact with the browser. A prime example of the need for callbacks is XHR objects (if you've never heard of them, don't worry, it may be too early in your learning for them).

score 0 · Answer 2 · answered Jul 09 '16 at 19:36

Callbacks, in the context of your question, can be used as way of putting a function into another function as a variable.

  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 was created, and it can be used with many functions. (Readability aside) If you're only using adder once, you can put it in to reduce as an argument. If you're using adder many times in your application, it's better to pass it in to reduce as a var or const (const adder = ...).

This post might give you a better understanding of how functions are "first-class citizens" in JS, and how callbacks can be used in other contexts outside of your question.

Callback different from calling one function from another (JS)?

2 Answers2