DEV Community: Suriya Tasmim Disha

JavaScript Callbacks Made Easy: Learn, Apply & Conquer! 🚀

Suriya Tasmim Disha — Mon, 19 Feb 2024 19:22:03 +0000

Have you ever stumbled upon functions within functions in your JavaScript journey? These are known as callback functions, and they play a crucial role in asynchronous programming. In this blog, we'll delve into the world of callbacks, making them clear and approachable for beginners.

What are Callback Functions?

Imagine you're passing a message to a busy friend. You wouldn't want to wait for them to finish everything before delivering it. Similarly, in JavaScript, callback functions are "messages" you send to functions that might take time to complete their tasks. These functions then "call back" to your code later when they're done.

Creating and Using Callbacks

Let's see how it works in practice:

function showResult(result) {
  console.log(result);
}

function add(x, y, callback) {
  const sum = x + y;
  callback(sum); // Send the result to the "callback" function
}

add(4, 5, showResult); // Pass "showResult" as the callback

Here, add takes three arguments: x, y, and callback. It calculates the sum and then "calls back" to showResult by passing the sum as an argument. This allows you to handle the result in a separate function, making your code more modular and organized.

Synchronous vs. Asynchronous Callbacks

So far, we've seen synchronous callbacks, where the "calling back" happens immediately after the task is done. But callbacks truly shine in asynchronous scenarios, where a function might need to wait for something (like fetching data from the internet) before completing.

Here's an example:

function showResult(result) {
    setTimeout(() => {
        console.log(result);// Output: 9 after 5 seconds
    }, 5000);// Simulate a 5 seconds delay
}

function add(x, y, callback) {
    const result = x + y;
    callback(result); // Send the result to the "callback" function
    console.log("Hi! There!") 
}

add(4, 5, showResult); // Pass "showResult" as the callback

In this case, showResult uses setTimeout to simulate an asynchronous operation, and then it calls back to the provided function with the data after a delay. This allows your code to continue execution without being blocked while waiting for the data.

Watch my video to learn more about callbacks and how you can use these in a real-life application! 🎥

Key Benefits of Callbacks

Asynchronous Programming: Callbacks enable your code to handle tasks that take time without blocking the main thread. This makes your web applications more responsive and interactive.
Modularization: You can break down complex logic into smaller, reusable functions, making your code easier to read, understand, and maintain.
Flexibility: Callbacks can be passed around and used in various contexts, making your code more adaptable.

Beyond the Basics: Advanced Concepts

While callbacks are powerful, they can also lead to "callback hell" in complex scenarios. To overcome this, JavaScript offers alternative approaches like promises and async/await, which provide cleaner and more readable ways to handle asynchronous operations. We'll explore these in future posts!

Remember:

Always pass callback functions without parentheses (add(5, 10, showResult)).
Callbacks can be used for both synchronous and asynchronous operations.
They offer significant benefits for writing modular, asynchronous code.

I hope this blog has clarified callback functions for you! Feel free to ask any questions in the comments, and I'll be happy to help.

Happy learning! 💻 😄

🌐 GitHub Link: https://github.com/SuriyaTasmimDisha/JavaScript-Callbacks.git

Follow me and support me on:

🔗 LinkedIn: https://www.linkedin.com/in/suriya-ta...

🐦 Twitter: https://twitter.com/SuriyaDisha

📝 Tech Blog: https://blog.suriyadisha.com

☕ Buy me a coffee: https://www.buymeacoffee.com/suriyadisha

Master Asynchronous JavaScript Like a Pro (Easy Guide!)

Suriya Tasmim Disha — Mon, 12 Feb 2024 17:17:17 +0000

JavaScript is a powerful tool for web development, but its synchronous nature can sometimes slow things down. Enter Asynchronous JavaScript, your key to unlocking faster, smoother code!

The word asynchronous means not occurring at the same time. But in JavaScript, the code gets executed line by line as it has a single thread. So, JavaScript is synchronous by nature.

So, how do we make JavaScript act asynchronously?

To make JavaScript work asynchronously, we first need to understand how the JavaScript code executes.

To run a javascript script we need a JavaScript Engine. The purpose of the javascript engine is to translate the code developers write into machine code. The computer reads this machine code and performs the specified tasks.

So, when the JavaScript engine starts executing the code it creates Execution Context. Each execution context has two phases:

The first one is the Creation phase
The second one is the Execution phase

In the creation phase, JavaScript creates a global execution context. Then it creates a 'this' object and binds it to the global object. After this, it creates a memory heap to store variables and function references. Next, it initializes the variable within the global execution context to undefined.

In the execution phase, the javascript engine assigns values to the variables and executes the function calls. For each function call, the javascript engine creates a new function execution context. It is very similar to the global execution context. But instead of creating a global object, it creates an arguments object. This argument object is a reference to all the parameters of the function.

To understand this workflow more clearly, let’s take a look at an example:

let a = 2;
function add(c){
return c+2;
}
let b = add(a);
console.log(b);

So, this is a simple javascript code where we have 3 variables and one function.

When we run this script, the JavaScript engine first goes into the creation phase and creates a global execution context. Then it creates a global object. As we use vanilla JavaScript, this global object is a window that we get from the web browser. Then it creates this object and binds it to the window object. Next, it creates a memory heap in the global execution context. There in the memory heap, it stores the variable a, b, and the declaration of the add() function. After that, it initializes the variables a and b to undefined.

After this, the engine goes into the execution phase.

In the execution phase, it first assigns values to the variables and executes function calls. For executing and keeping track of the function calls, the javascript engine maintains a call stack and there is only one call stack available in the web browser. The javascript engine places main() function from the global execution context to the call stack.

Next, for the main() function, the engine enters the creation phase. After completing the creation phase, it then moves to the execution phase.

Then javascript engine executes the call to the add() function and creates a function execution context with an argument object. This argument object keeps the references of all parameters passed into the function. Next, it sets this value to the global object and initializes parameter c to undefined. Then it pushes the add() function on top of the call stack.

After this, the engine executes the add() function on top of the call stack. During this execution phase, the engine assigns 2 to the parameter c and returns the result 4 to the global execution context. Next, it pops the add() function from the call stack.

In the final stage of the execution context, the return value from the add() function is assigned to variable b. Then the value of b is printed in the console. With this, the main() function popped off from the call stack completing all the execution contexts and the script stopped running.

So, as you can see with javascript we are doing one step at a time.

Now let’s look at another example:

console.log(1);
console.log(Math.sqrt(1024))
console.log(2);

With this code, we want to print 1, the square root of 1024, and 2 in the console. So, this is another simple example of the synchronous javascript execution. However, there is a catch. Here, we are calculating the square root of a number. Now the bigger the number the more time it will take to execute. So, other operations will be on hold till then. This situation is called Blocking and it is one of the major drawbacks of synchronous javascript.

To solve this situation we are going to implement an asynchronous mechanism. As you have read in the beginning asynchronous mechanism allows us to work on multiple things at a time.

So, to implement the asynchronous mechanism in JavaScript, we need to understand some new and interesting mechanisms of our web browsers. Our web browsers contain a JavaScript Runtime Environment. This runtime environment consists of a JavaScript Engine, Web APIs, an Event Loop, and a CallBack Queue. We are already familiar with the javascript engine. Now, let’s get to know the other three.

The Web APIs consist of various kinds of modern APIs like event listeners, timing functions, and AJAX requests. We use these APIs to manipulate the HTML, and CSS of the web pages, draw and modify graphics, and get data from the network servers.

The CallBack Queue stores the callback functions sent from the Web APIs. The queue stores these functions in first in first out order.

The Event Loop continuously monitors the state of the call stack and callback queue. When the call stack gets empty, it takes a callback function from the callback queue and puts it onto the call stack.

So, if you notice javascript is still executing synchronously. But because of using the JavaScript Engine, Web APIs, an Event Loop, and a CallBack Queue, it makes us think that javascript is executing asynchronously.

Now let’s take a look at an example to understand this whole flow. In this example, I have modified our previous code.

console.log(1);
setTimeout(() => console.log(Math.sqrt(1024), 3000))
console.log(2);

This time, in the code I have introduced a new method named setTimeout. This setTimeout() is a timing function provided by the Web APIs. This method sets a timer that executes a function or specified piece of code once the timer expires.

So, our code first prints 1 to the console.

Then it moves to the setTimeout() method. Here we have specified the square root code and a delay of 3000ms. That means this block of code will get executed after 3s.

Next, this method is moved from the call stack to the Callback Queue via Web APIs, and in the Callback Queue, the method processing keeps on running.

Then, the execution pointer moves to the third line and prints 2 to the console.

Now, as our call stack is empty, the event loop looks into the Callback Queue and takes the setTimeout method to the call stack. By this time, if 3 seconds is up it prints the square root of the given number in the console.

So, this is how asynchronous javascript works while not creating any blocking.

Wrapping Up

That's it. Thanks for stopping by. I hope by now you have a good understanding of what asynchronous javascript is and how it works.

My DMs are always open if you want to discuss further on any tech topic or if you've got any questions, suggestions, or feedback in general.

Happy learning! 💻 😄

Follow me and support me on:

🔗 LinkedIn: https://www.linkedin.com/in/suriya-ta...

🐦 Twitter: https://twitter.com/SuriyaDisha

📝 Tech Blog: https://blog.suriyadisha.com

☕ Buy me a coffee: https://www.buymeacoffee.com/suriyadisha

JavaScript 101: A Beginner's Guide To The Call Stack

Suriya Tasmim Disha — Sun, 04 Feb 2024 18:36:43 +0000

A Call Stack is a mechanism for the interpreter to keep track of which function is running right now and which function needs to run next.

JavaScript is a single-threaded programming language. That means it can do one thing at a time and has only one Call Stack at its disposal. The Call Stack uses the Last In First Out (LIFO) principle to store and manage function calls temporarily.

To understand LIFO, let’s say we bought the Harry Potter collection. Now, we are going to store them in order. We will first stack part 7 as we will read it at last. Then part 6, part 5, part 4, part 3, part 2, and at the top part 1. We store the sequence of each book in a chunk of memory. This chunk of memory is called a Stack Frame. We can have several Stack Frames exist at a time but only one Stack Frame can be active. That means you can read one book at a time.

When we will start reading, we will first take part 1 which is the active Stack Frame from the stack. So, this frees up one Stack Frame. After finishing part 1, we will take part 2 which clears up the 2nd Stack Frame. Similarly, we then take out part 3, part 4, part 5, part 6, and finally part 7. And now our Call Stack is empty. So, to process the elements or requests starting from the last to the first is the principle of the Last In First Out method.

In programming the last function that gets pushed into the stack is the first to be popped out when the function returns.

To better understand the Call Stack, let’s look at an example. Let's open Google Chrome and open the inspection tool. In the inspection tool, select the Sources tab. Here, let’s select the Snippets module. Now let’s create a new snippet. In this snippet, let’s write a simple code in JavaScript.

function sayHello(){
console.log('Hello!')
}

function greeting(){
sayHello()
console.log('Hello again!')
}

greeting()

We are going to execute this code and run the debugger so that we can see how the interpreter handles multiple function calls using the Call Stack.

So, let’s a put pointer on the greeting() function and hit the command + enter key to start the execution. As you can see there is a brand new function called anonymous in the call stack list. This is our main function.

So, when we start executing this code the main function gets called first. A stack frame is assigned to the main function. So that the main function gets added to the Call Stack and does its work.

Next, let’s click on the step (⬇) button. This action makes the main function call the greeting() function and the greeting() function gets added to the Call Stack with a Stack Frame. This is our current active Stack Frame while the previous one is on hold.

After that let’s hit the step (⬇) button once again. This time the greeting() function calls the sayHello() function and it gets added to the Call Stack with a new active Stack Frame.

After pressing the step (⬇) button one more time, the sayHello() function prints "Hello" in the console.

Again pressing the step (⬇) button, the sayHello() function returns, and the Stack Frame is popped off from the Call Stack. The execution order then moves below the stack and the immediate frame which is the greeting() function gets activated.

So, let’s press the step (⬇) button again. This time the content of the greeting() function executes and prints "Hello again!" in the console.

Let’s hit the step (⬇) button again. Now, the greeting() function returns, and once again the Stack Frame is popped off from the Call Stack.

Now, we just have the main function in our Call Stack. So, let's press the step button one last time and with this action Call Stack becomes empty.

Now why Call Stack is so important to understand?!

To understand this, let’s go back to the inspection tool and modify our code a little.

function sayHello(){
greeting()
}

function greeting(){
sayHello()
}

greeting()

Now let’s hit command + enter to run this updated code. And we get an error in the console saying "Maximum call stack size exceeded".

For JavaScript, our browser is responsible for executing the code and it has a limited amount of memory.

In the current code, we are calling the sayHello() function from the greeting() function. Then from the sayHello() function, we are calling the greeting() function. Next from the greeting() function we are once again calling the sayHello() function and so on. So, an infinite loop has been created. However, we don’t have infinite memory in the browser. So, when the maximum amount of stack frame is exceeded, the browser throws the "Maximum call stack size exceeded" error.

Wrapping Up

That's it. Thanks for stopping by. I hope you found this article interesting and informative!

My DMs are always open if you want to discuss further on any tech topic or if you've got any questions, suggestions, or feedback in general.

Happy learning! 💻 😄

Follow me and support me on:
🔗 LinkedIn: https://www.linkedin.com/in/suriya-ta...
🐦 Twitter: https://twitter.com/SuriyaDisha
📝 Tech Blog: https://blog.suriyadisha.com
☕ Buy me a coffee: https://www.buymeacoffee.com/suriyadisha

Full Stack 🤖 AI-Powered 📧 Email Generation App using OpenAI API - Part 1

Suriya Tasmim Disha — Tue, 15 Aug 2023 13:41:10 +0000

Are you wondering 🤔 how to utilize the powerful API of ChatGPT 🤖 and make your own app?

Watch this video 🎥 and learn to use the underlying API of ChatGPT with Node.js and React.js to build a simple yet powerful full stack ai email generation app.

In this part of the series, you will learn:

what is ChatGPT
how to setup Node.js
how to setup Express.js
what is NPM
how to initialize NPM
how to install and implement packages like Nodemon, Body-parser, Cors, and Dotenv in the project

Follow me and support me on:
🔗 LinkedIn: https://www.linkedin.com/in/suriya-ta...
🐦 Twitter: https://twitter.com/SuriyaDisha
📝 Tech Blog: https://blog.suriyadisha.com/
☕ Buy me a coffee: https://www.buymeacoffee.com/suriyadisha