What is a Program?
Well, a program has to do some simple things:
Allocate Memory — it has to allocate memory otherwise, we wouldn’t be able to have variables or even have a file on our computer.
Parse and Execute — it also has to parse and execute scripts which means read and run commands.
Now the Memory Heap, This is where the memory allocation happens and then the Call Stack is where the code is read and executed it tells you where you are in the program so let’s simplify this and show you what I mean.
const a = 100; //allocate memory
const b = 10;
const c = 1; //allocate memory
Imagine if I had just this page full of variables and instead of just numbers they’re like very big arrays well, memory leaks happen. When you have unused memory such as let’s say we’re not using the variable A but it’s Global well by having unused memory just laying around, it fills up this Memory Heap and that’s why you might hear why Global Variables are Bad.
Global variables are bad because if we don’t forget to clean up after ourselves we fill up this memory heap and eventually, the browser will not be able to work all right. So that’s Memory Allocation.
let’s talk about the Call Stack what is that well again with a call stack we can have something like this:
Console.log will go one, Console.log two, and then finally Console.log three. If I run this code in my browser terminal well I get one two three. If you remember that’s what the Call stack does? It reads and executes our Scripts.
Let’s Run step by step:
- It reads the first line console.log it gets put in this call stack, and then it runs it and creates 1.
- Then it says okay I’m removing the first console.log because I just finished running it. I’m gonna place the second console.log into my call stack. Adds it on here and says yes execute and then it removes that it and pops it.
- Then gets console.log 3 and logs console log three and then finally removes.
Well, running code on a Single-Thread can be quite easy since you don’t have to deal with complicated scenarios that arise in a Multi-Threaded Environment.
Now, you may have heard of the site Stack Overflow. If you’re a developer you use it on a daily basis and have you ever wondered what stack overflow means? Well, stack overflow is this:
How can we do that? Can we recreate a stack overflow? yeah, I can show you quickly that to create a function foo as we have in here and this function will just have foo and we’re just gonna run our foo function alright that looks confusing but what is happening here? This is something called Recursion.
Recursion means a function that calls itself so if you look at what this function do we run foo and foo gets executed. What foo had does is? We run through again so it just keeps looping over and over again having a recursion but there’s no end in sight right? We keep adding foo to the call stack, we keep adding it over and over and so on…
We have a stack overflow so if you want to have fun go into your browser go into your console and run something like this and see what happens you’re gonna get a stack overflow.
Well, with Synchronous Tasks if we have one function that takes up a lot of time it’s going to hold up the line.
Well, Asynchronous to the rescue. We need something more than just Synchronous Tasks. You’re thinking to yourself, How do we do Asynchronous programming tasks?
Well, we can do Asynchronous Programming by doing something like this, setTimeout which we’re going to talk about is a function that comes within our browsers and it allows us to create a Timeout and we can just give it the first parameter is the function that we want to run and then the second parameter is how many seconds we want to wait so, let’s say I want to wait two seconds so 200 minutes 2,000 milliseconds. If I do this now let’s run into the console and see what happens. Try yourself too to see what happens.
Well, what just happened? we have console.log one then console.log 3 and then console.log 2. After 2 seconds later it looks like we just skipped this whole step and then put this at the very end well you’ve just witnessed Asynchronous Programming.
Okay so looking at this diagram let’s see if we can figure out what our code was doing.
- Well first we have console.log that goes into the call stack and that gets run so we log console.log to the browser.
- Now after 2 seconds when our time limit is up, The Web API is gonna say ok SetTimeout should be run let’s see what’s inside of it well we have console.log, so what’s going to happen is?It’s going to say hey set timeout is done we have a callback and this callback of setTimeout we added to the callback queue saying that hey we have to run something we’re ready to Run It.
- So it’s going to say console.log, it’s going to run this function and once it’s done it’s going to pop it out of the call stack and again we’re done with the callback so we remove it and there you go, We’re done everything is empty and we’ve just run this Example, it’s gonna go through the entire Web API Callback Queue, Event loop.
Wooh! There’s was a lot of information but hopefully, that makes sense to you of Why we noticed this behavior and I want to challenge your understanding here knowing what you know and what I just taught you what happens if I change this setTimeout to zero? that means zero seconds I’m going to give you a second to think about what will happen.? And Answer yourself.
I’ll give you an example to understand it more better. Imagine calling your teacher with a question:
The Synchronous way is you call the teacher you wait on the phone until the Teacher answers the phone and ask him the question and hopefully get an answer so, You let the phone ring until he picks up but you’re not doing anything else in the meantime.
The Asynchronous way means you send a text to a teacher with a question and then when the teacher he or she has the time will respond to you and call you with the answer so, You can do other stuff in between.
In order to not block the Single-thread, it can be Asynchronous with Callback Functions and these callback functions get to run in the background through the Callback queue and then the Event Loop to bring it back into the Call Stack. So, the next time you get asked about these topics, you should have a little bit more confidence to answer that question.
I hope that this was helpful!