Javascript in a Nutshell

Javascript in a Nutshell

JavaScript is a language that, if I may say, makes web development alive. Imagine a website as a mannequin — HTML is the bones, CSS is the clothes, and JavaScript? It gives it a soul. It makes things interactive and responsive. You get the idea :3

Here are some basic principles about JavaScript that I’ve learned (and struggled with, lol).

JavaScript is a Single-Threaded Language

Yup, JavaScript was originally built just to handle “simple things” on websites. But as the internet evolved, user interactions got more complex, and JS had to level up too.

But here’s the catch — even with all those upgrades, JavaScript is still a single-threaded language. It processes code line by line, from top to bottom. However, thanks to some clever workarounds, JavaScript can act like it’s multi-threaded. How? Let’s keep going.

JavaScript Execution Context

When you run a JavaScript file, think of it like creating a giant box. That box is filled with all your variables, functions, etc. This box is what we call the global execution context — it stores everything and acts as the environment where your code runs.

Now, whenever you call a function, JavaScript makes a new smaller box just for that function. This smaller box has its own variables and its own “path” of execution. Once it’s done, it gets thrown away, and JavaScript moves back to the bigger box.

These boxes are managed through something called a call stack — a place where all your running functions are stacked. You can only get out of a function (small box) once everything inside it is done. Classic stack behavior :3.

JavaScript Wasn’t Meant for OOP (At First)

At the beginning of its life, JavaScript didn’t even have a class keyword. So, developers had to get creative. Want to know how they mimicked classes back then? Using functions 😱.

Yup, just plain old functions — plus a sprinkle of magic called prototype. This is an object that’s automatically attached to functions and can hold methods, acting like a blueprint. That’s how JavaScript did OOP before class even existed. Wild 🤯.

How JavaScript "Fakes" Multithreading

Okay, this part is where things get spicy.

So, how can JavaScript — a single-threaded language — handle things like fetching data or waiting for user input without freezing everything?

It has its own BFF, Mr. Browser!

JavaScript runs inside a browser, and that browser gives it access to Web APIs. So, when you do something like fetch() or setTimeout(), JavaScript basically says, “Hey browser, you handle this for me, I’ll be back.” And the browser gladly does.

When the job’s done, the browser puts the result in a queue and waits for JavaScript to be ready to pick it up. This whole process is managed by something called the Event Loop.

So, what Is the Event Loop?

The Event Loop is like a bouncer in a club. Just to be clear, The Event Loop run in the browser engine. It basically checks:

  1. Is the main thread (call stack) empty?
  2. If yes, it looks at the Microtask Queue (like Promise, async/await) and runs whatever’s there.
  3. After that, it checks the Task Queue or Callback Queue (like setTimeout, fetch, eventListener) and runs those next.

In short: Main Code → Microtasks → Tasks.

So yeah, JavaScript looks like it’s running things simultaneously, but in reality, it’s just really good at faking it :3.

What a Language...

After learning all this, I’m starting to fall in love with JavaScript (I hope so 😅). If the base language is already this exciting, I wonder how crazy and powerful the frameworks must be.

Well, thanks for reading this little chaos of mine. I hope I can make more posts like this — informative and maybe even helpful. Good luck to all of us chasing dreams, debugging life, and learning code.

Let’s keep going. Life’s just a life anyway :3