Understanding Callbacks in JavaScript - From A Beginner For Beginners

Reilly Shofner — Tue, 04 Feb 2025 23:08:24 +0000

Have you ever struggled to understand a concept while learning JavaScript? As a software engineering student at Flatiron School, I’ve been there too. In this post, I’ll break down a JavaScript feature that initially caused me a lot of confusion, callback functions.

Callbacks

Callbacks are a fundamental concept in JavaScript that can seem confusing at first, but they're actually quite straightforward once you grasp the basics. In this article, I will explore what callbacks are, why they're important, and how they are used in JavaScript.

What is a Callback?

When I first started learning JavaScript, I found it confusing that people referred to callback functions as both callbacks and callback functions. Understanding the technical vocabulary in programming can be overwhelming at times, especially if your brand new to coding. It’s important to remember they are the same thing so as to not cause any unnecessary confusion. In JavaScript, a callback function is simply a function passed as an argument to another function to be executed later. I like to think of it as a placeholder that represents a reference to a function to be executed later.

Here's a simple example to display this concept:

function greet(name, callback) {
    console.log(`Hello, ${name}!`);
    callback();
}

greet("Reilly", function() {
    console.log("Greeting completed."); //OUTPUT: Hello, Reilly!
});                               //CALLBACK OUTPUT: Greeting completed.

In this example, greet is the main function, and the second argument we pass to it is our callback function. The greet function does its thing (printing a greeting) and then calls our callback function which in turn notifies the console "Greeting completed".

Why Do We Need Callbacks?

Callbacks are particularly useful in JavaScript because they allow us to write asynchronous code. Asynchronous code is code that doesn't necessarily run in sequence. Callbacks allow your code to keep running while it waits for something else to happen, like downloading data from the internet or reading a file from disk.

Types of Callbacks

There are two main types of callbacks: synchronous and asynchronous.

-Synchronous code definition: Tasks are executed one after the other. Each task waits for the previous one to complete before it starts.

-Asynchronous code definition: Tasks are executed independently, without waiting for the previous task to finish. This is useful for tasks like fetching data from a server or waiting for a timer.

Synchronous Callbacks

Synchronous callbacks are executed immediately within the calling function. JavaScript goes down your stack of code reading it in a sort of chronological order.

function doSomethingWithNumber(num, callback) {
    callback(num); // Call the callback function with the number
}

function checkNumber(num) {
    if (num === 2 || num === 4) {
        console.log(num); // Logs 2 or 4
    }
}

doSomethingWithNumber(2, checkNumber); // Output: 2
doSomethingWithNumber(4, checkNumber); // Output: 4

Here the doSomethingWithNumber function takes a number(num) and a callback. We use checkNumber for the callback and is executed with the number as the argument. the checkNumber callback checks to see if the (num) is equal to 2 or 4 and if so it logs it to the console. The callback function is executed immediately when its called and run in sequence making this a synchronous callback.

Asynchronous callbacks

Asynchronous callbacks are typically used for operations that take time, like network requests or file operations. They allow your code to continue running while waiting for such tasks to complete, without blocking other parts of the program from running and executing. This way, multiple functions can run at the same time, and the order in which they finish doesn’t necessarily follow the order they were started.

function fetchData(callback) {
    setTimeout(() => {
        const data = "Data from server";
        callback(data);  // callback is executed after 2 seconds
    }, 2000);
}

console.log("Requesting data...");
fetchData((data) => {
    console.log(data); // This logs "Data from server" after 2 seconds
});
console.log("Request sent...");

//OUTPUT ORDER 1."Requesting data... 2. "Request sent..." 3. "Data from server"

The fetchData() function starts but doesn't block the program. It waits for 2 seconds before invoking the callback with "Data from server", which is logged afterward. This makes it Asynchronous. First the console.log "Requesting data..." is read and output it then sees the callback for fetchData but has a setTimeout making it Asynchronous since it is not the next thing output, the next console.log "Request sent..." is immediately read and output, and finally after the 2 second timeout "Data from server" is output.

Best Practices for Using Callbacks

Keep it Simple: Avoid nesting too many callbacks. This can lead to what's known as "callback hell," which makes your code hard to read and maintain.
Use Named Functions: Instead of anonymous functions, use named functions for your callbacks. This makes your code more readable and easier to debug.

Conclusion

I hope this explanation of Callback functions from a beginner to a beginner proves helpful to anyone seeking clarity on the topic, especially those who may have found more technical jargon or complex examples difficult to understand.

Sources:
https://base.flatironschool.com/
https://www.w3schools.com/js/js_callback.asp
https://developer.mozilla.org/en-US/docs/Glossary/Callback_function
https://www.youtube.com/watch?v=i2SPq-nb3NQ
https://www.youtube.com/watch?v=NOlOw03qBfw

My Journey with AI-Assisted JavaScript Learning

Reilly Shofner — Tue, 17 Sep 2024 23:43:58 +0000

As a beginner diving into the world of web development, I was both excited and intimidated by the prospect of learning JavaScript. However, I soon discovered that artificial intelligence (AI) could be a valuable tool in my learning journey.

Discovering AI-Powered Learning Tools

My exploration of AI-assisted learning began with my school's AI chatbot, designed to assist students in learning and debugging code. This tool felt similar to having a personal tutor at my fingertips, available anytime and providing real-time guidance. This proved to be extremely useful due to time zone differences and my schedule. I found myself using the AI more and more when human tutors were unavailable.

Imagine having a virtual mentor who can:
-Assess your code to find errors you might have missed
-Provide different and simplified methods of explanation
-Personally guide you through each step needed to reach an answer or
solution
-Highlight and fix messy or unnecessary code

This adaptive learning environment kept me engaged and motivated. Even when struggling or lost, having something that could break down the information for me to digest in several different ways made me feel like I was always on the verge of finding a solution and gaining a better understanding.

Overcoming Abstract Concepts

JavaScript has many abstract concepts that can be challenging for beginners to grasp. AI assistants help bridge this gap by providing relatable analogies, generating visual representations of code execution, offering step-by-step breakdowns of algorithms, and suggesting real-world use cases for concepts you're learning. By making these connections and offering code breakdowns with thorough explanations, AI assistants helped solidify my understanding of JavaScript fundamentals.

The Negatives and Limitations

Towards the end of my school's JavaScript course, I encountered some limitations with the AI chatbot. It struggled to fully comprehend the questions and code snippets I provided, occasionally leading to false information and misleading problem-solving approaches. To prevent others from facing similar issues, I recommend searching reliable sources first when seeking answers to problems. You can then use AI tools to break down code you're writing if you need clarification. Additionally, I strongly advise against relying on copy-pasting code from AI sources. Instead, type out the code yourself. This practice builds muscle memory and encourages deeper thinking about each line of code, ultimately providing a better learning retention.

Embracing AI-Assisted Learning

While AI has made significant strides in learning and teaching various programming languages, I've learned that it's meant to complement traditional learning methods, not replace them entirely. My personal recommendation for anyone wondering which AI to use to aid them in learning software engineering is to use Phind. It has been the most accurate and detailed AI I have used so far, even with their free membership. They also offer a premium membership with their most advanced model. Having AI tools in combination with hands-on coding, online resources, and community engagement, I feel well-equipped to tackle the exciting world of JavaScript and Software Engineering!

DEV Community: Reilly Shofner