The Purrfect Loop: Understanding JavaScript's Event Loop and Call Stack with Cats 🐾

#javascript #webdev

Hello ❤️, fellow cat lovers and coders! 🐈💻

Lets get into another JavaScript topic that is often overlooked.

Today we will explore the heart of JavaScript's runtime environment: the Event Loop and Call Stack. We will use some playful kittens to guide us through.

The Call Stack: A Line of Playful Kitties 🐱

Imagine a line of kittens, each waiting for their turn to play with a toy. The first kitten in line gets to play first. This is just like the Call Stack in JavaScript, where our function calls are the kittens.

In JavaScript, when a function is called, it's added to the top of the stack (just like a new kitten joining the front of the line). This function will run before the ones that were added before it (our first kitten gets to play while the others watch).

When the function finishes running, it leaves the stack (our kitten finishes playing and leaves the line). If a function calls another function, it's like a kitten bringing a friend to the front of the line to play next.

Here's a code example:


function chaseLaserPointer() {
  console.log("Kitty is chasing the laser pointer!");
}

function play() {
  chaseLaserPointer();
  console.log("Kitty is playing!");
}

play();

In this code, calling play() adds the play function to the Call Stack. Inside play, we call chaseLaserPointer, which gets added to the top of the Call Stack and runs first. Once chaseLaserPointer finishes, it's removed from the stack, and the rest of play can continue.

The Event Loop: The Human Deciding Which Kitty Plays Next 🙋‍♀️

Now, imagine a human watching over our kittens, deciding which one gets to play next. This is just like JavaScript's Event Loop.

The Event Loop has one simple job: to monitor the Call Stack and the callback queue. If the Call Stack is empty (all the kittens have finished playing), it takes the first event from the queue and moves it to the Call Stack (the human lets the next kitten play).

This mechanism allows JavaScript to handle asynchronous events like clicks, timers, or fetch calls (the kittens that are too excited to wait in line and want to play right away).

Here's a code example:


console.log("First kitten starts playing");

setTimeout(function() {
  console.log("Second kitten starts playing");
}, 1000);

console.log("Third kitten starts playing");

In this code, console.log("First kitten starts playing") gets added to the Call Stack and executes immediately. The setTimeout function is also added to the Call Stack, but it's an asynchronous function. It sets up a timer and then finishes, so it's quickly removed from the Call Stack.

The callback function inside setTimeout is like an excited kitten—it's added to the callback queue, not the Call Stack. After 1000 milliseconds (1 second), it's ready to play, but it has to wait its turn!

While it's waiting, console.log("Third kitten starts playing") gets added to the Call Stack and executes. Once the Call Stack is empty, the Event Loop moves our waiting callback onto the Call Stack, and it finally gets to execute: "Second kitten starts playing" is logged to the console.

When we write JavaScript, we're choreographing a ballet of kittens, deciding when and how they get to play. Understanding the Call Stack and Event Loop helps us create a more synchronized dance, ensuring that each kitten gets their fair share of the fun, and our users enjoy a smooth experience.

❤️❤️❤️

Follow me on LinkedIn for future blog posts
May your code always be as graceful as a cat! 🐾