JavaScript: Invoking, Referencing and Callback Functions Explained
By: Ajak Cyer
Tags: JavaScript, Flatiron School

Photo by Goran Ivos on Unsplash

The transition from Ruby on Rails to JavaScript was not as bad as I thought it would be. In fact, they share a lot of similarities. For one, functions was very similar to Ruby’s methods. Though there are some core differences that I’d like to discuss about JavaScript’s functions.

Referencing a Function

In Ruby we can call a method by writing its name. If we do so in ruby, we are only referencing the function’s definition. For example:

Console results

I defined a function and then console logged the function as a reference without using the invoking () operator. This console log was only the function’s definition, nothing inside the function actually ran.

Console results

This could be useful in some settings! We could assign the function’s definition to a different variable if we wanted to.

Console results

We can also return a function reference within a different function in order to piggyback it with information we received from the first function.

Invoking a Function

This can be called invoking, calling, or executing a function. When we invoke a function, we must use the () invoking operator. This is most similar to what happens in ruby when we call a method by it’s name but instead we include our operator in JavaScript.

Let’s look back at the previous examples. What if instead of referencing our function we use our invocation operator?

Console results

Here we see that instead of getting the function’s definition, we actually run the function Inside with our “3” argument and our code block runs.

Console results

Now what if we instead of referencing the function in our piggyBackFunction, we returned an invocation of it? Let’s see what our console shows us.

The function immediately runs the inner referencedFunction.

Console results

If you noticed, the console.log is logging our variable functionInside without the invoking operator.

Let’s see what would happen if we invoked our functionInside function.

An error! functionInside is actually not a function. It’s just a variable that is declared with a function invocation, and inside of that function does not return a reference to another function. You cannot invoke a non-function.

Callback Functions

For simplicity, I’d like to say that callback functions are semi-referential and semi-invoked functions. Callback functions are passed as an argument in another function to be called-after something is completed.

Console results

In this example, I’m running the console log inside after 3000 milliseconds have elapsed. JavaScript it read from top to bottom very quickly and synchronously, meaning one after the other.

This callback function allows us to have our function run asynchronously to the rest of the Javascript code, only running after the task of waiting 3000 milliseconds is complete and not before then. Some tasks can take more than 3000 milliseconds to complete and it wouldn’t be advisable to have our code wait for each task to finish before moving to the next lines of code. Async is a savior!

Callback functions are used whenever we need something else to happened first. For example, they are used when we fetch() data, because we need to get our data before we can do something with that data.

I say they are semi-referential and semi-invoked because they don’t have the invocation operator () but at the same time they will invoke themselves after the task that must be completed first, completes.

That’s All Folks!!