Before we have a look at events, we will learn more about callback functions.
Functions are first-class citizen in JavaScript, that means functions are treated like any other variable. That means, functions can be passed as argument to other functions and they can be assigned as a value to a variable. Technically, the name of a function is a variable name with a function as value. To give you a better idea what that means, I have created a small example.
This function:
1
2
3
function example() {
console.log("Hello World");
}
Can also be written like this:
1
2
3
const example = function () {
console.log("Hello World");
};
Callback functions are functions, that can be passed as a parameter to another function and that will be executed inside the function.
Sounds complicated? No worries, I have another example:
1
2
3
4
5
6
7
8
9
10
11
function finishedLoading() {
console.log("I have finished loading");
}
function downloadSomething(callback) {
// ... some code to download
// and when it's finished...
callback();
}
downloadSomething(finishedLoading);
You can see how we pass the function finishedLoading as a parameter on line 11 to the downloadSomething function and execute it inside this function on line 8 after successfully loading.
This example might look a little bit strange, but we will practicly apply this during the coming chapters.
Naming callback functions
As with variable names, you should follow the best practices that we discussed earlier in this course. To make it more readable you should name the function like its purpose. If you have a function that will download an image, you could name it downloadImage, if you create a callback function that is called after the loading has finished, you could name it onDownloadFinished or downloadFinished. Important is to stay consistent with your naming.
Anonymous functions
Your functions don’t have to have a name. In this case we talk about anonymous functions.
Here you can see the example above, but our downloadFinished function has not a specific name. Instead we write the definition right where we would usually write the function name.
1
2
3
4
5
6
7
8
function downloadSomething(callback) {
// ... some code to download
// and when it's finished...
callback();
}
downloadSomething(function () {
console.log("I have finished loading");
});
Arrow functions
JavaScript has more than one syntax to define a function. You already learned the most common one using the function keyword. Another way to define a function is called arrow syntax. Instead of the function keyword it uses the brackets () in combination with the arrow operator => before opening the action-block. If your function takes parameters, you can put them in the brackets, as you are used to.
Here you can see an example of this syntax:
1
2
3
4
5
6
7
8
function downloadSomething(callback) {
// ... some code to download
// and when it's finished...
callback();
}
downloadSomething(() => {
console.log("I have finished loading");
});
One of the main differences is, that a function defined with the arrow syntax uses the the context of the surrounding context. In the last part of the course we will discuss in more detail the technical differences. In most cases this syntax works just as the one with the function keyword.