-3

I know two definitions for a "Callback":

  1. A function that is being called-after ("called-back when") a certain event is triggered.

  2. A function that is passed to another function as a parameter.

An example for the first definition (JavaScript):

document.addEventListener('DOMContentLoaded', ()=>{
    alert("DOMContentLoaded !");
});

I understand the alert() to be the event handler for DOMContentLoaded event triggering, but one programmer told me that "saying that a callback is an event handler is like saying that a vehicle is a bicycle". I miss how this statement is logical.

Why I misunderstand the second definition (JavaScript):

let x = (y=1)=>{
    console.log(y, "\n We get 1, so it works.");
}
x();

The above works, but if I'll pass another function as parameter to the first function, not only it will error, but will also look ugly IMO:

let x = ( let y = (z=1)=>{console.log(z);} )=>{
    y();
}
x();

Uncaught SyntaxError: Unexpected identifier

I misunderstand the second definition; what's the point in "passing another function as a parameter to the first function" in programming in general.

My questions

  1. if "callback" is a formal CS concept, which definition of the two is correct.

  2. If at least in JavaScript one cannot actually pass a function as parameter to another function, what do some programmers mean when they say that "a callback is when one passes one function as an 'argument' (parameter) to another function"?

closed as off-topic by gnat, Christophe, Bart van Ingen Schenau, Greg Burghardt, amon Sep 25 '18 at 19:48

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions asking for assistance in explaining, writing or debugging code are off-topic here. These can be asked on Stack Overflow if they include the desired behavior, a specific problem or error, and the shortest code necessary to reproduce it in the question (see Minimal, Complete, and Verifiable Example)." – Christophe, Bart van Ingen Schenau, Greg Burghardt, amon
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Looky-look: stackoverflow.com/questions/824234/what-is-a-callback-function Think of it as a poor man's event handler in the pre-OO era. – Martin Maat Sep 25 '18 at 5:26
  • 2
    Uncaught SyntaxError: Unexpected identifier A syntax error has little to do with conventions, nomenclature or understanding patterns. You simply made a mistake in the javascript syntax. You're effectively equating making a typo to not properly understanding the word you misspelled. – Flater Sep 25 '18 at 6:46
  • Note that in the first example, alert() is not the event handler, but the anonymous function ()=>{...} is. The alert call happens to be the only action that is taken in the (anonymous) callback function. – Bart van Ingen Schenau Sep 25 '18 at 8:06
  • You aren't passing a function to x, you are (failing to) define a default argument for the y parameter of x – Caleth Sep 25 '18 at 8:09
  • 2
    Your example for the first definition also happens to be (in a broader sense) an example for the second definition. addEventListener is a function, it takes a lambda (another function) as a parameter, which you pass in. It's stored somewhere inside the document object, and called later. "If at least in JavaScript one cannot actually pass a function as parameter to another function" - but you can, you just did it in addEventListener. – Filip Milovanović Sep 25 '18 at 9:56
3

Your javascript throws an exception because you wrote bad javascript, that has nothing to do with anything.

The formal definition you're looking for is Higher-order function and the developer who noted that event-handlers are just 1 thing you can do with them was absolutely correct.

  • I didn't understand the second passage. I hope you would rephrase it (just 1 thing)? – JohnDoea Sep 25 '18 at 6:35
  • Also, what's bad with the DOMContentLoaded JS? Or the first x() example? They work and just serve an example... – JohnDoea Sep 25 '18 at 6:36
  • I've never heard of a function passed to a higher order function referred to as a "callback". – user949300 Sep 25 '18 at 6:38
  • 1
    @JohnDoea The "bad" Javascript is specifically the snippet that results in "Uncaught SyntaxError". More correctly, it's "some text that looks similar to Javascript" – Caleth Sep 25 '18 at 7:33
  • @Caleth I went after that code 3 times but I can't find a typo. I think my mistake there is logical but I can't think of any other way to write a "callback" function in JS with arrow syntax. – JohnDoea Sep 25 '18 at 7:35
2

Your definition 1

A function that is being called-after ("called-back when") a certain event is triggered.

misses out the how the event dispatcher gets the function to call in the first place. This is covered by your definition 2

A function that is passed to another function as a parameter.

document.addEventListener('DOMContentLoaded', ()=>{
    alert("DOMContentLoaded !");
});

Here you pass two things to addEventListener, an identifier of which event you are interested in, and a function to call in response to that event

You also seem to be confused as to what passing parameters means.

let x = (y=1)=>{
    console.log(y, "\n We get 1, so it works.");
}
x();

In your call to x here, you pass no parameters, and instead use the default parameter 1 for y. Most functions you define shouldn't have default parameters, but should recieve them like addEventListener does, at the call site.

let x = (y)=>{
    console.log(y, "\n We get any number, so it works.");
}
x(1);
x(42);
  • Caleth, by "dispatcher" did you mean handler? If so, I think it's good to change. – JohnDoea Sep 25 '18 at 14:30
  • @JohnDoea no, I mean whatever part of document deals with associating 'DOMContentLoaded' with callable objects. The handler is your anonymous function. Or more generally, the code that receives the callback and decides when to call it – Caleth Sep 25 '18 at 14:32
  • Oh, also, I temporarily forgot the difference between a default parameter like x(y=1)=>{} to a parameter as in x(y)=>{}. Thanks for reminding me this. – JohnDoea Sep 25 '18 at 14:35
0

A "callback" is any code that is passed to some function with the intent that it should be called at the appropriate time.

Your first example is just a special case, where "at the appropriate time" is "when a certain event is triggered". I very often use this where the appropriate time is "when a url has been downloaded and all errors have been handled", or "when the user presses the Ok button", or "every 60 seconds".

I said "code" because some languages make it harder or easier to pass either a function, are arbitrary bits of code.

  • You say "any code", mustn't it always be a function inside a function? – JohnDoea Sep 25 '18 at 14:32
  • @JohnDoea Not necessarily. The callback is actually the lambda that you pass in, which has its own code block which may call a function, many functions, do other internal logic, or something else entirely. It's perfectly possible for a raw function to be your callback (if e.g. it doesn't take any parameters and just needs to be called, you can just pass the function without wrapping it in a lambda). – Delioth Sep 25 '18 at 14:36
-2
function a(f){
f();
}

function b(){
alert("hello");
}

a(b);

That is how you pass a function as an argument to another function. You will come across it frequenlty working in ES5 JS, im surprised you haven't in ES6 lamdas arn't always appropiate.

Not the answer you're looking for? Browse other questions tagged or ask your own question.