While learning JavaScript and programming in general, I find it useful to take notes and create some analogies to understand the concepts. Here I will share some of my notes about the asynchronous behaviour of JavaScript and the fact it’s single threaded. Feel free to correct me if I understood something wrong.
JavaScript has only one thread running for each process. I think about it as a kitchen where only one baker is in charge for the process of baking a cake with chocolate icing.
The baker is the CPU and they would have to execute one subprocess at a time: baking the cake and preparing the icing. After that, the same person would also have to cover the cake with the icing.
If it was multithreaded we could have only one CPU executing different subprocesses at the same time (baker with more arms).
Or we could have more CPUs (bakers) working in different subprocesses: cake preparation, icing preparation and cake covering.
But in that case, the third subprocess (covering the cake) would need resources from the other two. So it would be necessary to add synchronisation to those actions, but let’s not focus on that right now.
Although multithreading maximises the CPU time, it’s a little bit more complex because it's harder to handle the concurrency, and the results are unpredictable.
It's also important to mention that JavaScript is single threaded but it’s not synchronous. It means it doesn't need to completely finish one task before starting another one.
If that was the case, my baker would have to keep waiting for the oven to finish baking the cake, for instance, before being able to start the icing preparation.
In fact, JavaScript has some resources that allows us to make it asynchronous, and in our cake example, the baker is able to start making the icing while they wait for the cake to be baked.
But let’s say our baker finishes the icing and the cake isn’t baked yet. Without the cake, they would not be able to move to the next step, which is covering the cake with the icing.
Many operations in JavaScript depend on external responses like interactions with APIs or network communications and we don’t know for sure when we are going to receive the result of those actions.
That's why we need to make sure that those dependent actions won’t be executed until we have access to the responses they need. For that, we can use promises and I'll talk about that on my next article.
Oldest comments (43)
Did you notice any error or know how to improve the explanation? Please help me out and share it on the comments! I would love to learn more about it. :)
Non tech feedback: now I often end my articles with a dedicated paragraph to wrap things up, promise a next article, ask opinions and "thank reader for reading" 🙂
(maybe with some social links) 😉
Nice, I'll do the same. :D
"Promise a next article" << I see what you did there ;)
This is amazing, Marina 🙂
Hi Kostia, thanks a lot. :D
It might be worthwhile mentioning that you can get more javascript processors to allow parallelism via things like WebWorkers.
Yes, I'll read about WebWorkers to learn more about it.
Thanks for contributing. :)
I really enjoyed reading this - you have an ability to explain complex concepts really clearly and simply. I also recently published an article on asychronicity and it was useful to double check my understanding with this article. Keep it up! I'm looking forward to the promises article :)
Thanks for the feedback and the encouragement. I've just read your article as well, really nice. :D
Hey, congratz Marina!
Well written and super helpful article :)
Hey Leonardo, thanks! :D
I love this piece, so easy to understand thank you.
Thanks, I'm glad to read that. :D
Fun illustrations, nice job
Thanks :D I'm glad you liked it.
Great post, Marina! Your illustrations are AMAZING. 🙌
Understand the difference between async and defer. Keep your promises! 🤝
Please take it to the next level. Learn web workers and service workers. They sound similar, do very different things.
Read, post & illustrate with these fantastic sketches. Rinse and repeat.
Soon you will have enough material to publish a JS cartoon book. You get rich, maybe; famous, most definitely!! 😬
Best wishes.
Hi Ramesh, thanks so much for your support and feedback. This motivates me to keep learning and doing the illustrations.
I will definitely add the topics you suggested to my learning list.
I already have some other articles in mind, I hope to be able to publish them here soon.
Best, Marina
Wow, a programmer with an illustration background praising both my illustrations and my article? You made my day. Thanks. :D
Wow you amaze me with ability to explain complex concept to simple.
thx u help me
Oh, thanks. :D
hi marina, i'm new in javascript. do you have any tips for me to improve skills quickly ?
thx
After some time learning programming, but not being able to retain most things I learned, I realised that I was getting a lot of input and returning very little output.
In other words, I was learning a lot, but I wasn't writing about it or applying everything I learned, so I was forgetting the concepts and performing poorly in job interviews.
So I suggest that you start writing about the things you learn and apply everything building projects. Also, it is important to share everything you do and ask for feedback, the community is great and supportive and you will learn faster that way.
I hope it helps. 😀
unfortunately I do not believe in myself to publish my work. I learned a lot but always lost during job interviews so that's how I just freelance and keep learning. maybe after reading your tips I will try to publish my work soon.
Hey marina thanks for the advice, very helpful.
❤️ from me 😎
I face the same issue and I know many other developers feel the same way, it's the imposter syndrome.
Try to keep in mind that the worst thing that can happen when you publish your work is that someone will tell you that you made a mistake, but in that case you just fix it and learn something new. :D
I wish you all the luck. 😊