JavaScript —Thro…Callback Thursday

Callbacks threw me for a loop, hopefully this article can help you avoid my struggles.

Source: Pexels Author: ThisIsEngineering

From high school programming class to my associates degree in Computer Science, I had never touched JavaScript or web development and had no idea that I had no idea how this changed when moving through functions and didn’t even know the term callback. So let’s start with the basics.

What is a callback function?

A callback is when you pass a function as an argument to another function. They are very useful for manipulating datasets, handling events, fetching data, and reusing code throughout your program. For example, in the following code:

function loadData(callback) {
  fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => callback(data))
}

function displayData(data) {
  console.log(data)
}

loadData(displayData)

The function loadData takes a callback (in this case, the function displayData) and calls that function after it gathers its data to console.log the data. If, in another portion of your program, you wanted to manipulate the data in another way, you could then call loadData and send a different function without having to rewrite the code to load the data.

What can go wrong?

1. This

When first working with callback functions, I could never figure out how to get the this value to be what I anticipated. I tried all sorts of work arounds from adding more arguments to trying to eliminate the function call and bulk up my code. Once I learned how callback functions change the value of ‘this’ to the global object and the bind() method, it was a total game changer. The bind() method takes 2 arguments, the first being the value YOU want this to be, and the second is an array of arguments to send to the function. It is also imperative to bind callbacks in an event listener so you can send the argument list without accidently calling the function when the event listener is created!

Get Eric Krukowski’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

2. Input data errors

This plagues my brain every time I write a line of code that takes human input. “What can they put that will break this?” “How much can/should I assist the user when taking data?” “If Elon Musks child, X Æ A-Xii, is entering their name, would my program accept it?”
When a callback, or really any function, is receiving user data, make sure it’s handled properly. If a mandatory field is empty, or a number field has non-numbers, it can cause wildly undesirable effects. There are a couple ways to handle these issues. One way is by using default values in the function definition. In the following example:

function callback(num1 = 0, num2 = 0) {
  const sum = num1 + num2
  console.log(sum)
}

callback(1);

You can see that only one argument is submitted, when the program is looking for two. By adding the “=” sign, you can ensure empty data sent to a callback is given a default value and doesn’t break your code. Another way to prevent improper entries is by having validation in your functions. If the user were to submit “Twenty Five” instead of 25, I would have code that sees that letters were used instead of numbers, and send an error message telling the user to enter numbers instead of letters.

Conclusion

Callbacks are essential tools for programming in JavaScript. By passing a function as an argument to another function, we can execute code asynchronously and keep our code clean and efficient.

In summary, to work effectively with callbacks, it is crucial to use bind() to set the expected value of this to the callback & properly handle errors from user inputs.

By keeping these best practices in mind, we can take advantage of the power of callback functions in JavaScript and build better, more resilient applications.