I know thee now, Callback Functions

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.

1. Why does the above instance not work?

As an arrow function, the correct format would be:

image.addEventListener('dblclick', () => {handleDoubleClick()})

This would also work:

image.addEventListener('dblclick', (doubleClick) => handleDoubleClick())

Without the arrow function, the correct format would be:

image.addEventListener('dblclick', handleDoubleClick)

image.addEventListener('dblclick', (handleDoubleClick) => {handleDoubleClick()})

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!

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())

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)

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

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));
}

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