Need help with callbacks

JavaScript
1

Long story short, I don’t understand callbacks.

I just finished the JS: Next Steps Sitepoint course a few days ago hoping to have a more illuminating explanation of callbacks than what was offered in the Intro to JS course but I was sorely disappointed.

So I’ve been googling for an explanation of it online but I can’t seem to find any that doesn’t end up being a jQuery tutorial or something about AJAX or, recently, NodeJS.

I can somewhat understand stuff like this:

someDOMElement.addEventListener("click", function()
{
  console.log("This is a callback function");
}

where the callback function is anonymously inline, anything else doesn’t work. In my attempt to get a better understanding of the concept I decided to implement a sort of custom arr.reduce method and this was what I came up with:

function reduceArr(arr, addThem)
{
  return addThem(arr);
}

let arr = [1, 2];
let total = reduceArr(arr, function()
{
  let total =  0;

  for (let i = 0; i < arr.length; i++)
  {
    total += arr[i];
  }

  return total;
});

console.log(total);

which works (though for some reason returns 3 and undefined) but when I tried to change the callback to a named function, I came up with this mess:

function reduceArr(arr, callback)
{
  callback(arr);
}

function addThem(arr)
{
  let total = 0;

  for (let index = 0; index < arr.length; index++)
  {
    total += arr[index];
  }

  return total;
}

let arr = [1, 2];
let firstTotal = reduceArr(arr, addThem(arr));

console.log(total);

let arr2 = [1, 2, 3, 5, 8, 13];
let secondTotal = reduceArr(arr2, addThem(arr2));

console.log(total);

which just keeps on returning callback is not a function when addThem returns total to line 3.
Phew! Sorry for the rambling.

Please can someone explain this thing to me in a non-jQuery/AJAX/Node way and also how to use named callback functions?

Thanks :slight_smile:

EDIT:

What’s the difference between:

function callback(arg)
{
  // stuff happens
}

function someFunc(arg, callback)
{
  return callback(arg); // I'm hoping this is correct
}

and:

function anotherFunc(anotherArg)
{
  // do something
}

function someFunc(arg)
{
  return anotherFunc(arg); 
}
2

It looks to me like you are calling **** but there is no

function callback () {
...
}
4

let firstTotal = reduceArr(arr, addThem(arr));
should be
let firstTotal = reduceArr(arr, addThem);

In the latter, you’re passing the function to reduceArr. In the former, you’re invoking addThem immediately and passing the return value to reduceArr.

2 Likes
5

You’re passing the result of the function, not the actual function itself.

ie:

let firstTotal = reduceArr(arr, addThem);

By adding in the () you’re calling the function before you call reduce and passing the result of addThem to the function. So essentially what you have is the same thing as:

let firstTotal = reduceArr(arr, 3);

In JavaScript, functions can be stored as variable. Kinda sorta similar to objects in other languages.

edit:

@Jeff_Mott beat me.

1 Like
7

Another question, why use callbacks

function callback(arg)
{
  // do something
}

function someFunc(arg, callback)
{
  return callback(arg); 
}

when I can do:

function anotherFunc(anotherArg)
{
  // do something
}

function someFunc(arg)
{
  return anotherFunc(arg); 
}
8

Here, someFunc can only ever call anotherFunc. But what if you wanted someFunc to be able to execute any arbitrary function of the user’s choosing?

10

In your reduce example, you passed a function that added the values together. But what if you didn’t want to add? What if you also wanted to multiply? Or substract? Or string concatenate? In order for reduce to be able to do all those things plus anything else you can dream up, it has to let the user provide the function.

var arr = [1, 2, 3];

function addThem(a, b) { 
    return a + b; 
}

function multiplyThem(a, b) { 
    return a * b; 
}

function substractThem(a, b) { 
    return a - b; 
}

function concatenateThem(a, b) { 
   return "" + a + b; 
}

var added = arr.reduce(addThem, 0);
var multiplied = arr.reduce(multiplyThem, 1);
var subtracted = arr.reduce(substractThem, 0);
var concatenated = arr.reduce(concatenateThem, "");
1 Like
12

Heh I remember when I could not understand callbacks either - watch this:

I hope this helps.

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.