I understand that definition is super long but don’t worry, we’ll simplify it as we go on.
Here, I’ll also try to break the confusion of its name too. “JAVA-script”.
If you’re new to development or haven’t heard of JS you may think it has some sort of association with the language JAVA.
Now let’s try to define all the terms which we said in the definition earlier… So, at the end of the article if you didn’t have any idea at the start, you may end up learning what makes JS a pretty popular language and it’s functionalities.
Browsers Understanding JS Code
You may end up saying that there will be a program that converts it into Machine code so that the computer understands.
(Don’t spend time thinking why we call it an Engine. Just to show things are faster, it is being used.)
Different browsers have different Engines in them to execute JS Code.
So, what does it really does?
First, your JS file will be broken in not tokens by the parser inside the engine. Then, it forms a tree-like structure called the Abstract Syntax Tree. And this form will be taken over by something called the Interpreter. Just a quick definition of what an Interpreter and Compiler is..
If you’re into Computer Science, I am sure that you would have heard both the names.
That is how your code spots errors and executes in many languages.
A Compiler is something that takes over your complete file, reads over it to find errors and if there is no error it converts into an MC and executes it, whereas an Interpreter goes line by line and executes it if it finds an error in some line it stops executing. That is on the fly(meaning the execution phase). If there is an error on the 32 lines the program stops executing.
//Of course, there are a lot of abstractions, but I hope you can get the Idea//
So, you would have guessed what is suitable for executing JS. Of course, the Interpreter, as I mentioned JS is something that runs in the browser, the user doesn’t want all the functionalities(in the case of a compiler) to stop just because there is an error somewhere. But, there is a drawback in the interpreter. For example, If there is a loop executing the same piece of code, the interpreter does not figure it out. That is, it doesn’t make any optimizations in the code. Whereas the compiler is capable of making it. Initially, JS was just an interpreted language, but to make optimizations in our code and to make JS work faster they introduced the so-called JIT-Compiler. (where, JIT-stands for Just-in-time).
So, what difference does it make?
As usual, the code gets interpreted and something called the bytecode is created..(Bytecode is something that is 1 step above Machine Code).
There is something called the profiler, which checks the code that can be optimized. As soon as it finds the repeating code, it passes it onto the compiler to optimize it, and finally, the compiler provides us the optimized code. Note, the processes which I mentioned all happens in the fly that is in the execution phase.
Next, I’ll explain why JS is called a high-level programming language?
High-level Programming Language
Generally, any JS program/script you write on a browser or node environment needs memory to store your variables and a CPU core thread to execute what you’ve written. But as a JS developer, you really don’t need to worry about that since it is a high-level programming language. But what does the level indicate? the level gives us the level of abstraction or simplification that is provided by the language over the utilization of hardware/processor.
For example, a computer understands Machine code or the piece of information in binary format. But it is extremely difficult for developers to provide a stream of 1s and 0s for every piece of information that they thought to implement. So leveling up, we have the assembly…You may think assembly has some sort of advantage but writing code in assembly language takes a much longer time than in a high-level language Also Assembly code is more difficult to debug and verify because there are more possibilities for errors than in high-level code. So moving up another step, we have C. Still in C we may have to take care of the memory management(malloc, free);
So, further moving up we arrive at our case, a High-level programming language like JS, Python.
As a high-level language, some of the abstractions which JS provides us are Garbage collectors, dynamic typing to simplify the code that developers write.
If you had never used a High-level programming language this may be a new term to hear. I’ll explain what it is.
In low-level languages like C, as a programmer, we will have the power to allocate or deallocate memory. But in the case of high-level languages, the language takes the task of cleaning the unused or not referenced memory in the code. So as a JS developer you don’t have to be concerned about memory management. Of course, the Garbage collection has its own flaws. But since in this article we are discussing the pros of JS, I’m skipping the part of the cons of using the Garbage Collectors. If you’re a new JS developer, just try to get to your mind that “Memory is Limited!”, then you’re good to go.
So, what does it mean by prototype approach?
But Why use Prototypal Inheritance among all this complexity?
Simply to be efficient.. Prototypal Inheritance helps us to inherit properties, functions from already existing objects. And that helps in the reuse of code. We are programmers!! We don’t repeat the code right? 🙂
That means it can execute only a single piece of information at a time. So you may think that if a task takes a lot of time, the entire execution will become slow right?
What it is: Runtime is a superpower or a weapon that the browser provides us or which is something built with C/C++ programs like Node.js to make JS code Asynchronous.
Eg: setTimeout(),DOM API’s.
What does the term Asynchronous really mean?
It means that it can handle some tasks in the background without causing any pause or stop in the execution of synchronous code.
In the context of Node.js, That is what Non-blocking is.
Node.js scripted servers are Asynchronous by default. That is they don’t wait for the servers(in the case of Node.js) to respond but take up another call from the client or execute the next piece of code. After completing the task that was assigned to the runtime, it can’t be returned directly to the call stack since it would produce a mess. When the task or the event(Could be a timer or a fetch API) is done, it will be put up in something called the Callback Queue or the Event Queue(In Node). And there is something called the Event Loop in Runtime which will constantly be running, checking whether the call stack is empty.. If it finds out that the stack to be empty, it pushes the processes left out in the callback queue 1 by 1 and executes it. This is how JS works Asynchronously. Of course, there are a lot of abstractions I made, but as I mentioned this just gives you an overview of the work!
Why not have a code example, to get a pause from long theories..
I’ll give you an example:
What do you think will be the output of this code snippet?
[Hint: setTimeout is not defined in the JS Engine to handle. So guess what’s the output?]
Here’s the Output:
Got that right? Awesome. So, why is that weirdness?
First, as usual JS Engine looks over the code and finds the first console statement and executes it. But when it visits the setTimeout, as I told that is something that Web APIs (Runtime) provides. So, that will be passed onto the Web API and meanwhile, the JS engine goes to the next line and finds another console statement then it prints out “Sentence 3”..After the execution of all the processes is done, the Callstack becomes empty, In the background, if 1000ms had passed then the Event loop checks if the call stack is empty and then pushes the callback function onto the stack and now the “Sentence 2” gets printed. Pretty cool right?
Function is first-class Citizens in JS.
So, what do you know about functions in general?
You may say, Functions are “self-contained” modules of code that accomplish a specific task. Functions usually “take in” data, process it, and “return” a result.
But see what JS functions can provide you with!
-> We can assign functions to variables.
-> We can pass a function as a parameter to another function.
-> We can also return functions as a value from a function.
Cool isn’t it?
I’ll try to explain in more detail about functions in a later article.
We saw that JS is a multi-paradigm language. And what does it mean?
A paradigm is a way of looking at something or we call in wat perspective. As its name gives the meaning that JS supports writing code in multiple approaches or methods or even ideas.
But as JS Developers, we don’t have to worry since JS is a Multi-paradigm supported language.
Hopee that was useful ! Thank you !