DEV Community

Cover image for I know thee now, Callback Functions
Daniel
Daniel

Posted on

I know thee now, Callback Functions

Image description

Image description

Our objective is to convert the above eventListener to use a callback function called handleDoubleClick and create a separate handleDoubleClick function.

My first attempt was this, but there are a few reasons why this does not work, which I will explain in this blog post.

Image description

1. Why does the above instance not work?

As an arrow function, the correct format would be:

image.addEventListener('dblclick', () => {handleDoubleClick()})
Enter fullscreen mode Exit fullscreen mode

This would also work:

image.addEventListener('dblclick', (doubleClick) => handleDoubleClick())
Enter fullscreen mode Exit fullscreen mode

Without the arrow function, the correct format would be:

image.addEventListener('dblclick', handleDoubleClick)
Enter fullscreen mode Exit fullscreen mode
image.addEventListener('dblclick', (handleDoubleClick) => {handleDoubleClick()})
Enter fullscreen mode Exit fullscreen mode

The statement above is incorrect, because I am overwriting the handleDoubleClick function, whereas if I had some other parameter inside the parenthesis, it is not being used so it is pretty much the same as having it blank, and therefore, just runs the handleDoubleClick().

To summarize:
Here I am creating a new arrow function that takes handleDoubleClick as a parameter. However, in our instance, the function handleDoubleClick is a function without parameters, so therefore, we can pass the function as a reference directly to the addEventListener like this:

2. Let's refactor this!

Image description

We are directly passing the handleDoubleClick function as the event handler for the 'dblclick' event on the 'image' element. In laymen's terms, when we double click the image, the handleDoubleClick function will take place.

If you were to have this below, you would be calling the handleDoubleClick function and passing its return value as the event handler.

image.addEventListener('dblclick', handleDoubleClick())
Enter fullscreen mode Exit fullscreen mode

With the addEventListener we want to pass the handleDoubleClick function as an event handler without calling it immediately, which is why we pass the reference to the function.

image.addEventListener('dblclick', handleDoubleClick)
Enter fullscreen mode Exit fullscreen mode

3. Define a parameter and callback function

A parameter is a placeholder and is/are the input values that the function uses to perform its operations. Parameters are passed to the function as ‘x’, where the function then produces a ‘y’ or output value usually by return or console.log().

A callback function is a function that is passed as an argument to another function, only after the completion of the function to which it is passed.

In the above example, when an image is double clicked, the handleDoubleClick function is called.

4. Other examples of callback functions

Image description

In this fetch example, each of the parts following the .then are each callback functions, aka the ((response) => response.json(), and the ((data)=> {...}

The console.log(a) is not correct syntax, however.

This is because we also want to put the console.log within a callback function. Therefore, the correct syntax would be:

function fetchImages() {
  fetch(apiUrl)
    .then(() => console.log(a))
    .then((response) => response.json())
    .then((data) => {
      // Rest of your code
    })
    .catch((error) => console.error('Error fetching images:', error));
}
Enter fullscreen mode Exit fullscreen mode

Thank you for taking the time to read this and stay tuned for more blog posts for Javascript concepts!

Top comments (0)