JavaScript — The Demonic Language
Let us begin the journey to learn a demonic language.
You have already heard of JavaScript and why we use it for. But surprisingly, JavaScript (or JS) is a type of “scripting” language that evolves day by day because of its active community interactions. New modules and libraries are formed that can be used inside JS to make the coding done easier and faster. So sometimes, learning JS for beginners might get little bit tricky and hard to grasp immediately because of these regularly updating new techniques and deprecation of old techniques. There is an enormous difference between JS we saw in earlier 2000s and current version. Most of the time nowadays developers use wide variety of JS frameworks without directly using vanilla JS for web development because frameworks simplify their work. But to get into any JS framework, we must know from basic to deep concepts in vanilla JS because those same concepts that are applied in those frameworks as well. So, this article I will give you a basic introduction about JavaScript and some core concepts like single-threaded feature and asynchronous behavior will be explained as well. These terms are so much important before getting into any of the JS framework. Some other concepts like Closures, Callbacks, Promises will be discussed with in-detail explanation of the concepts in future articles. First, let us see a little bit of JavaScript and how it is born.
What is JavaScript?
“JavaScript, also we called it as JS, is a lightweight, interpreted, loosely typed (you do not have to specify what type of information will be stored in a variable), scripting language that is used for browser-based web applications, developing IoT-based applications, building web servers, and developing server applications and Game Development as well.”
But nowadays we can use JavaScript outside the browser using a JavaScript runtime environment known as NodeJS. JavaScript is a prototype based, multi-paradigm, single threaded, dynamic language which has an asynchronous behavior as well. It also supports both object-oriented and functional programming. JavaScript is derived from ECMAScript which defines all the standards in the JavaScript language. ECMAScript is a general-purpose programming language, which describes all the standards that JavaScript requires to ensure the interoperability of web pages among different browsers. ECMAScript standards are released on yearly basis and currently the latest version of ECMAScript is ECMAScript2020–11th edition (ES11).
JavaScript is a case sensitive language (which means a variable name called ‘Example’ is different to ‘example’). JavaScript uses DOM (Document Object Model) which is specified by the respective web browser that contains HTML elements that can be used and interacted by JavaScript. JS uses these DOM to add, change and remove HTML elements, change attributes of HTML elements, change the CSS, and react upon page events as well.
History of JavaScript
Back in the day, before JS was born, developers used LiveScript which is introduced by Netscape developers, around September 1995 to make static websites more interactive and give some dynamic behavior. It was later renamed as JavaScript. The name JavaScript is derived from Java which is a popular programming language back in the day. Netscape company used it as a marketing ploy to make JS popular. You can read more on history of JS here.
ES5 vs ES6
ES is a scripting language which is defined by the ECMA international. ES stands for ECMAScript so ES5 (fifth edition of ECMAScript) stands for ECMASript5 (also known as ECMAScript 2009) and ES6 (sixth edition of ECMAScript) stands for ECMASript2015. ES5 was released in 2009 and ES6 was released in 2015. This ES thing was created to maintain standards in JavaScript which helps it to evolve more further without getting developers confused with concepts. Other than JS, ES has many other implementations as well. When compared to ES5, ES6 which was released in 2016 has some major improvements in JS that allows developer to write complex programs. Below table describes some key differences between ES5 and ES6.
Why is JS considered as Single-Threaded?
You might have encountered a word called “Single-threaded” in the previous section. So, what actually “Single-threaded” means. Normally high-level languages like Java uses a multithreaded approach that uses multiple threads to run the program by giving some asynchronous (one code doesn’t wait until previous code finishes its execution) nature to the code. Programming languages like JavaScript are single threaded which means JS has only one thread (one call stack and one memory heap) therefore it must have the synchronous behavior (one should wait while previous one finishes its execution). But as we know JS has an asynchronous behavior. How is it possible to have asynchronous behavior in a single-threaded language like JS? Well, thanks to the JavaScript engines like V8 (Chrome), SpiderMonkey (Firefox) we can accomplish async behavior even it is single threaded. Let us see how it happens.
JavaScript Asynchronous Behavior
As we know earlier, even though JS is single threaded, it shows asynchronous behavior. It’s like this.
Let us take a simple example code segment.
Above function is “setTimeout” which is an in-built function provided by the browser. This function accepts two arguments which the first argument is the function that contains the code to be executed and the second argument is the time in milliseconds. So, in above example, the “console.log” statement inside the setTimeout function executes after 1000 milliseconds (1 second). So, before the setTimeout function finishes its execution you will notice that the second “console.log” statement which displays as “Hello World 2” gets executed. So, the output will be shown as below.
Hello World 2Hello World 1 <- this display after 1 second
So, this describes the asynchronous behavior in JavaScript which simply means the console.log(“Hello World 2”) doesn’t wait until the setTimeout methods finishes its execution. So, the program first displays the second console.log statement and then after 1 second (because of 1000 milliseconds) the first console.log statement gets executed. So, since JS is single-threaded, according to theory, the second console.log statement should wait until the setTimeout method finishes its execution as a synchronous behavior. But it doesn’t happen. So how this happened. These all are managed by the JavaScript engine itself. Let us dive into the science behind JavaScript engine.
So, in the above image, you can see three modules or parts inside the JavaScript engine named as Call Stack, Web API and the Call back queue. These are the main three parts in the JS engine (maybe Chrome’s V8 engine or Forefox’s SpiderMonkey engine or etc.). So, what the Call Stack does is it’s a stack (which uses last-in first-out approach) that holds data temporary until it gets executed (in this case until it gets printed in the console). What Web API does is that it holds all the built-in methods like setTimeout and executes them inside web API instead of sending them to the Call Stack. The Call back Queue holds the data return from the Web API and then push them to the Call Stack to get printed in the console. So, below video shows how it happens.
For the simplicity, I named the setTimeout function as #1 and second console.log statement as #2 (# means ‘number’). First, the setTimeout begins its execution. Since the setTimeout is a method which is in the Web API, its execution happens inside the Web API. Not in the call stack. So, while it gets executed in the Web API, the #2 which is the second console.log statement pushed to the Call Stack to get executed. After it gets executed and printed in the console as “Hello World 2”, it gets deleted inside Call Stack. (Once a code segment in the Call Stacks finishes its execution, it automatically gets deleted from the Call Stack). In the meantime, the setTimeout method finishes its execution and waits inside the Callback Queue. Then it gets pushed into the Call Stack and gets display in the console. That why we first see Hello World 2 and then after 1 second (setTimeout execution time as stated in the method as 1000 milliseconds) we see “Hello World 1”.
So that’s how JavaScript gain its asynchronous behavior although being a single-threaded language.
So now you might have a brief understanding about JavaScript. So, in future articles, I would like to elaborate more concepts like Callbacks, Promises, Async-await, Closures and many more. So, stay tuned for the next part and stay safe.
Peace. 😉✌
