Table of contents
"Have you ever wondered why people can multitask but cannot perform any action while sneezing? Imagine sneezing while operating a vehicle; I guarantee you'd beg your guardian angel to take the wheel."😁
Let's now explore the synchronous world of JavaScript.
JavaScript's Synchronous Nature
Imagine a group of students waiting to speak with their guardian counselor; no matter how urgent the situation is, they all have to wait in line. Each student is a representation of a line of code, the guardian counselor represents JavaScript's call stack, and the condition placed on each student before they see their guardian counselor represents the synchronous nature of JavaScript.
A programming language with one thread is referred to as "single-threaded" (it operates sequentially). In other words, JavaScript runs a line of code before going on to the next because it is a single-threaded language.
Take a look at the example below. Try running the code snippet yourself on "Visual Studio Code." copy and paste the code into the <script></script>
tag of the HTML file you created. Do this for all examples.
Console.log('I Happend First' );
alert("I interrupted");
Console.log ('I Happend Second');
Since Javascript is single-threaded, you'd notice that in the example above, “I Happened Second” doesn't print immediately after “I Happened First,” until the function alert()
is attended to!
What's Happening Behind the Scene?
“At any given point in time, that single JS thread is running at most one line of JS code”
~COLT STEELE
Let's take a look at another code example to further explain and solidify the concept.
//SIMPLE ARETHMETIC CALCULATOR
//Copy and Run the Code Yourself
//Variable Declaration
let a = Number(prompt('Enter a Number'));
let b = Number(prompt('Enter another Number'));
let oprand = prompt("Enter an arethmetic operation '+ or -'");
//Functions
const add = () => a + b; //this is a function to add two numbers
const sub = () => a - b;//this is a function to subtract two numbers
//Conditional Statement
if (oprand == '+') {
alert('Excercise Patience, Your Request is on its Way');
alert(`The Answer is: ${add()}`);
} else if (oprand == '-') {
alert('Excercise Patience, Your Request is on its Way');
alert(`The Answer is: ${sub()}`);
} else alert('ERROR!');
In the preceding example, we simply wrote code to add or subtract two numbers. You'll notice that after you insert two numbers into theprompt()
function on your web browser with the sign "+" or "-," you don't get the answer immediately; instead, you get a alert()
prompt that says: "Exercise Patience, your request is on its way," then the call stack pushes it out and continues to the next line of code before the answer appears.
This shows us that JavaScript executes one line of code at a time. In my opinion, it's good because it promotes orderliness in flow control, leaving room for accountability. Imagine if JavaScript ran the entire code only to bring up some bugs at the end; you'd have to restructure the code all over from the top. But with time, as your code becomes more technical, it gets tiring because you will probably like to perform more than one request at a time, like handling HTTP requests, fetching APIs, etc. Don't worry, there's a way out! In my next article, I'll tell you how you can run JavaScript asynchronously. It's amazing to know that JavaScript can be both synchronous and asynchronous at the same time, right?
Thanks for reading; kindly drop some comments on the areas you feel I left out; drop some compliments if this article explained the concept of JavaScript's single-threaded nature (it'll mean a lot to me); and also feel free to contribute too. You can follow me to receive more updates❤