What are Callback Functions? | JavaScript Tutorial

In JavaScript, Callback Functions are just like normal functions but they are passed into other functions to be called a later stage. Typically, once a Callback Function is passed into another function, it is executed after a particular event occurs or change of state.

It is a common pattern seen in libraries such as jQuery and allows the programmer to add custom behaviour without editing the library separately.

In this video I take you through the popular addEventListener method which takes in a Callback Function but then I also create an entirely custom implementation of the Callback Pattern to show how it might work behind the scenes.

For your reference, check this out:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[amineouabbou]

there is no logic between example 1 and 2, you went from easy to super complicated !!

[FrostDrive]

first part of the video. makes sense.
second part? Name name name name name name name name name.

[christophkrass]

Many people disliked this video, but as a more intermediate programmer who just wanted to have "callback" clarified, I must say: This is a good explanation.

[theSUBVERSIVE]

dealing with a callback function TOGETHER with THIS is too much for beginners... hahahahaha...

[calvinbarajas]

Great job on this tutorial. It would also have been wonderful if you had explained how the program flows. I'm finding that it bounces quite a bit from area to area.

[lukes]

"That is the most basic version of a callback function" ... or.. that was the most clear example I have ever seen. Props to you, bro. You have a knack for simplifying technical examples.

[MarcelPirosca]

Second example is way too complicated for beginners.

[yogxoth]

This was a great tutorial, why so many dislikes?

[InsulaTM]

You are doing an amazing job. Actually I was looking for some js tutors on youtube to learn from you guys how do you explain your code since it's one of a thing that my University requires and to be honest oral exams explain block of code sometimes to the people who are not connected to js it's really challenging. So thanks for doing it and I wish to find you 1y ago when I was starting my coding journey.

[bobbysilver]

I just don't get callback functions ffs.

[jonahware]

First I got it and then the second example just messed that up for me.. thanks though

[kishanmistry]

He basically passed in an anonymous function

[trevorm]

What do you use to record your screen?

[idabagusmahendrapermana]

This is actually what I am looking for. So here's the case. I am get used to create a program with a general way that JS function works (Global function), when I heard about callback function (Onclick, Onchangem etc), it's really confusing. Can you explain how do we use callback in real cases within example. Or just please explain the flow of the callback itself, why we have to use or altenatively using it. Thank you, hope to hear from you soon

[devoiddude]

Not a good example, really complicated.

[hichemben]

This code is equal to :
const NameList = {
names: [],
onNewName: function(newName, allnames){
console.log(newName);
console.log("The curent list is " + allnames);
},

addName: function (name){
this.names.push(name);
this.onNewName(name, this.names);
}
};

NameList.addName("Domenic");
NameList.addName("Sophie");
NameList.addName("John");
We do not need a callback function in this case. that why is litel bit confusing.better use an example where we really need a callback function.Thanks though.

[mr.prince]

bro, chill with the 2nd example. we're trying to understand the initial concept.

[Cerbyo]

this is everything wrong with tutorials

[bsn]

It’s really badly explained. From a beginner perspective, this looks like using a hammer to kill a fly. All that mess just to add a name to an array and console log the new name. You do not show the real power of callback functions. You even more confuse us.

[vag]

Sorry mate, you just managed to confuse us more