Today, I am publicly committing to the #100DaysOfCode challenge.
After alternating between brief days to weeks of consistency and then left in burnout, I need a change. A committed step to daily, disciplined coding. Today is that day!
One of my projects as of late, has been to work through coursework via freeCodeCamp. So, as I was wrapping up the media player project in the JavaScript course, I had to code several callback functions.
What I really like about this course is the repetition as I build actual projects. It has been several weeks since I crafted a callback function, and today I had to craft multiple to complete the project. I needed this practice.
Basically, in JavaScript, functions are objects; and, objects can be passed as arguments into functions; thus, functions can take functions as arguments. In other words, a callback function is a function passed as an argument to another function, which allows you to control when and how it gets executed—often after something else completes.
As I was crafting the callbacks for the project, I really did not grasp why I needed to use a callback. I guess I assumed it was more specific in some way. We certainly covered them in my web development bootcamp, but I could recall only the “what” and not the “why”.
Anyway, I turned to an article and documentation to further grasp the purpose of callbacks. I found a great freeCodeCamp article, called: “JavaScript Callback Functions – What are Callbacks in JS and How to Use Them” by Cem Eygi.
When I was reading through W3Schools explanation of callbacks, I came across the sequence purpose with some code that I could manipulate. I had to stop and really consider why only one of two functions was being called and/or displayed. Here is the code:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
</script>
</body>
</html>
And here is the output:
JavaScript Functions
Function Sequence
JavaScript functions are executed in the sequence they are called.
Goodbye
I created my own practice file in VSCode to test whether this was a glitch. I copied and pasted the contents into my editor and was stunned to see only “Goodbye”.
I assumed that even though both functions call myDisplayer(), both would still display. I was wrong.
After playing with the code by adding another function after, and then removing it, I confirmed that, indeed, the last function ONLY would display. So, I asked Copilot to explain what was going on. The results:
“This HTML file demonstrates how JavaScript functions are executed in the order they are called. The page contains a heading and a paragraph explaining that function execution follows the sequence of their invocation.
Within the <script> tag, three functions are defined. The first function, myDisplayer, takes a parameter and sets the inner HTML of the element with the ID “demo” to the value of that parameter. This is how the script updates the content of the page dynamically.
The next two functions, myFirst and mySecond, each call myDisplayer with different arguments: “Hello” and “Goodbye”, respectively. At the end of the script, myFirst() is called first, followed by mySecond(). Because JavaScript executes code in the order it appears, “Hello” is displayed first, but is immediately replaced by “Goodbye” when mySecond() runs. As a result, only “Goodbye” is visible on the page.
This example illustrates the importance of function call order in JavaScript, as later function calls can overwrite the effects of earlier ones if they modify the same part of the page.”
While this example is synchronous, callbacks become especially useful when dealing with asynchronous behavior like API calls or timeouts. By using a callback function, we can control the sequence in which functions are called, thereby, displaying our data as we would have it displayed.
What I learned today is that functions are objects and, therefore, can take other functions as arguments. In JavaScript, execution is sequential—functions are fun in the order they’re called. When multiple functions affect the same element, like innerHTML, the last one will overwrite the earlier ones. Callbacks help manage that flow, especially in more complex or asynchronous tasks..
Resources:
- freeCodeCamp Curriculum: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/
- JavaScript Callback Functions – What are Callbacks in JS and How to Use Them by Cem Eygi: https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/
- w3schools Documention: https://www.w3schools.com/js/js_callback.asp