Today, JavaScript is everywhere. Whether scrolling through your favourite social media feed, ordering takeout, or streaming music, JavaScript is quietly powering that smooth experience behind the scenes. If you are a Web Developer, you definitely use it one way or the other. JavaScript is the core of modern web development.
It's pretty mind-blowing when you think about it - this language has transformed from a simple website enhancement tool into the backbone of the entire web. But have you ever stopped to wonder about what is happening under the hood? What's going on when you click that button or submit that form? How does JavaScript communicate with your browser to make magic happen on your screen?
In this series, I will try to answer all these questions. If you have ever pondered these, follow along with me. Let's begin with the first article in this series.
What is JavaScript?
Across the internet, you'll find various answers: scripting language, high-level language, the language of the web and whatnot. Let me give you a descriptive definition of JavaScript.
"JavaScript is a High-level, Dynamically Typed, Multi-paradigm, Garbage Collected, JIT Compiled, Single Threaded programming language with First class functions and Non-Blocking Event Loop Concurrency model."
Well, I know that's a lot of technical jargon. But don't worry - we will break it into bite-sized pieces that anyone can understand.
Let's tackle the basics first - I promise it's not as scary as it sounds!
High-Level Language: These programming languages allow humans to write computer programs without specific knowledge of the hardware. That's how we work in JavaScript. We focus on program logic, not low-level hardware details like memory management.
Dynamically Typed: JavaScript is pretty laid back regarding how you declare variables. Unlike its stricter cousins (C, C++, and Java), which demand to know the exact type of data you're working with upfront, JavaScript figures it out by itself. We do not need to specify data types when declaring and defining variables.
Multi-Paradigm: JavaScript is versatile because it supports procedural, object-oriented, and functional programming paradigms. It doesn't force you into one way of coding. You can organize your code any way you want. JavaScript's got your back!
Garbage Collected: Garbage collection is a feature that tracks objects and variables created and frees their memory when they are no longer required. It is like having a tidy roommate who automatically cleans up after you. It keeps track of what you're using and what you're not, clearing out unused memory so your program runs smoothly.
First Class Functions: In JavaScript, functions are objects as well. They're not just actions. They're values you can play with. Do you want to hand a function to another function as a parameter? Go for it! Store it in a variable? Absolutely! Return it from another function? You bet!
Now that we've covered the basics, let's dive into more interesting stuff!
Just In Time Compilation
Have you ever wondered how your computer understands JavaScript? JavaScript is a high-level language. A computer cannot execute it directly; instead, we convert the code to a machine-understandable form. Across all programming languages, the conversion of source code to machine code happens in one of the following two ways -
Compilation: The entire source code is converted into machine code at once and is stored separately. Then, we use this compiled file for execution. It's like meal-prepping for the week - you do all the work upfront!
Interpretation: This is more like having a real-time translator at a conference. The code gets translated line by line as it runs, with the interpreter working on the fly. Every time you run the program, the translator needs to be there doing its thing.
Now, JavaScript? It's clever - it takes the "why not both?" approach. You may have heard that JS is an interpreted language. But that's not the complete truth. What JS does is known as JIT Compilation or "Just In Time" Compilation.
JIT Compilation in JavaScript combines the best of both compilation and interpretation. Like compilation, the entire code converts to machine code at once. But, we do not store it in a separate binary file. Instead, the machine code executes as soon as the compilation ends, like interpreted languages.
This approach allows JavaScript to start quickly like an interpreted language while achieving performance similar to compiled languages for frequently executed code. It's constantly adapting and optimizing based on how your code actually runs - pretty smart, right?
Different JavaScript engines (like V8 for Chrome or SpiderMonkey for Firefox) implement JIT compilation in their ways, but they all follow this general principle to balance speed and flexibility.
I won't get into the exact details. Let's leave that for another article (\#contentPlanning 😁).
Single Threaded Programming Language
JavaScript is a single-threaded programming language. As a result, it can only do one thing at a time. Think of JavaScript as a one-track mind - it's like a chef with a single cutting board who can only chop one ingredient at a time. Here's what this means in practice:
Execution Order: JavaScript code is executed line by line, from top to bottom, one step at a time. No skipping ahead or multitasking!
Synchronous Execution: By default, JavaScript runs synchronously, meaning each line of code waits for the previous one to complete before executing.
Blocking Operations: If a particular operation takes a long time to complete, it will block the execution of subsequent code until it finishes.
Now, you might be scratching your head and thinking, "Wait a minute... if JavaScript can only do one thing at a time, wouldn't our apps freeze up whenever something takes too long?" Great question! Well, this is where the Event Loop comes into play.
Non Blocking Event Loop Concurrency Model
A non-blocking event loop is a programming model that allows a single-threaded application to handle multiple concurrent operations efficiently without getting stuck or blocking the main execution thread. In simple terms, this is what happens. When JavaScript encounters a time-consuming task (like fetching data from a server or reading a file), instead of standing around waiting, it hands it off to the background workers in the Runtime Environment and keeps moving forward with other tasks.
Once that background task is complete, the Event Loop acts like a notification system, tapping JavaScript on the shoulder to say, "Hey, that thing you asked for? It's ready!" It brings the callbacks or the continuation of that task to the main thread.
It is just scratching the surface of how the Event Loop keeps everything running smoothly. We'll dive deeper into all its inner workings when we explore the JavaScript Runtime environment!
That’s all for now !
Well, that's all in this brief overview of JavaScript. I hope it was helpful and informative for you. If your mind is buzzing with questions right now - perfect! That's what I was aiming for.
Stay tuned for the upcoming articles in this series, where we'll roll up our sleeves and dig deep into JavaScript's inner workings. No stone will be left unturned as we explore every nook and cranny of this fascinating language.
I'm super eager to hear your thoughts and experiences. If you want to connect with me, here are my socials:
Thanks for joining me on this JavaScript adventure! Remember - the best developers are the ones who never stop asking, "but how does it work?" Keep that curiosity burning! ✨