The JavaScript Curse! Why do people think it’s difficult?

JavaScript is the language of the web. You might argue that you can use endless other languages for the backend, but undoubtedly, it’s JavaScript that rules the frontend world.

Often developers don’t begin their programming journey with JavaScript but instead go through its syntax when they have to tinker with the frontend of a website. This causes them to relate it with other languages out there and makes JavaScript a really complicated language.

The only way to get over the mindset of JavaScript being complicated is to consider it a separate language that works in its own way, which is different from how most other languages function. And that requires starting over! Forget everything you know about other languages, and start fresh.

Originally JavaScript is a synchronous and single-threaded language. What does that mean? Well, it executes one thing at a time. Consider a loop that counts to 10000000. Well, that will take time (if you don’t have a super-computer), and while JavaScript is doing that operation, it can’t do anything else.

JavaScript is a synchronous language. It does one thing at a time.
Now you might ask, What about the time when the JavaScript embedded in a web page makes an API call? The page doesn’t become unresponsive during that time. So am I lying?

Lying won’t be the correct word if you listen me out. As you might know, JavaScript was designed for web browsers. Ever wondered what’s so special about a web browser? (NodeJS users, don’t leave!)

Web browsers have something exceptional that helps them execute JavaScript inside of them. That particular thing is JavaScript Engine. JavaScript in itself is just a programming language, but it’s the JavaScript Engine that makes it super strong.

For instance, Chrome uses V8 Engine, and Firefox uses Spider-monkey (cool name, I know). For some of you super-smart folks out there running JavaScript in NodeJS, well, NodeJS also uses the V8 Engine. NodeJS was just an attempt at making JavaScript-capable of running on bare-metal, which enabled it to be used as a server!

Everything that you think is asynchronous about JavaScript is actually what is provided to JavaScript by its Engine. Everything from setTimeout, Fetch API, and DOM (in case of Browser) are features of JavaScript Engine. These features are usually called Web APIs. These Web APIs are available to JavaScript using the window object in a web browser, and the global object incase of NodeJS.

The window object has so many functionalities on it that I won’t be able to share all of them in like 10 screenshots. So what you can do is, open the console in your browser and type “window” and press enter. The window object will be returned, and you can have a look at it.

I hope that clears out how JavaScript is actually different from other languages that you are used to. Even though JavaScript is synchronous in nature, it can behave like an asynchronous language with the help of the JavaScript Engine.

With JavaScript Engine comes more terminology like Event Loop, Call Stack, Callback Queue, Micro-task Queue. I know this sounds overwhelming, but it’s extremely easy, and by understanding these terminologies, you would be better than 90% of the JavaScript Developers out there who still think JavaScript is just a programming language with a slightly different syntax.

Before discussing these fancy terms, let’s understand how the JS Engine and JavaScript handle asynchronous functionality. Consider, in your JavaScript code, you set a timeout for 10 seconds, such that it console logs “10 seconds completed”. Now before we talk about the functionality, surprise surprise, even the console.log is provided to JavaScript by the Engine.

console.log('This is the first line')
setTimeout(function() {console.log('10 seconds completed')}, 10000)
console.log('This is the last line')

If you have had a bit of hands-on experience with JavaScript, you can easily guess the output. The above code segment returns the following output. You can also copy and paste the above code snippet in the console and see the output for yourself.

This is the first line         // Printed Immediately
This is the last line          // Printed Immediately
10 seconds completed           // Printed after 10 seconds

Now to understand the complete functionality of JavaScript and its Engine, let’s take an analogy. Consider JavaScript as a really annoying friend of the Engine. JavaScript doesn’t like the concept of notes and is always in a hurry to complete its work, and it cannot do multiple tasks at a time. So what it does?

It tells its friend Engine to remind it to do a certain task when a certain condition is met.

Let’s move line by line, and listen to the conversation of these 2 friends. In Line-1, there is a single task, which needs to be performed immediately, and hence the JavaScript handles it and does it.

Next, JavaScript sees Line-2. JavaScript sees that the execution of this line will take time, but guess who is in a hurry to complete its work? So Engine gets annoyed by JavaScript telling it to remind back when 10 seconds are completed to console.log(’10 seconds completed’).

Now, JavaScript is done with the second line and moves to the 3rd line. There is sees a simple console.log. It simply executes that and goes to sleep. (Doesn’t sleep in actual, just in the analogy).

Now it’s the job of the Engine to keep track of time and to wake JavaScript back when 10 seconds are completed. As soon as 10 seconds are completed, Engine wakes up JavaScript and hands it over the piece of work that was pending. JavaScript again in a hurry, logs that statement to the console, and now goes to permanent sleep. (Pretty sure it died)

While I was walking you through the analogy, you have already come across the Call Stack, Event Loop & Callback Queue. Surprised?

That’s how easy JavaScript is if you understand it from the ground-up, and not just consider it like any other programming language with a different syntax. I have moved to JavaScript from Python and never cared enough to understand the basics, but they really helped me write elegant code without randomly trying things to make something work.

I hope this article convinced you to learn JavaScript from its very basics. If it did, you are welcomed to continue reading through my series of JavaScript is easy!

The JavaScript Curse! Event-loop, Call Stack, Callback Queue & Micro-task Queue