So,What is Javascript?
' JavaScript is a High-level,single-threaded,JIT-compiled,Garbage collected,prototype-based, multi-paradigm,dynamic language with a non-blocking event loop also with functions as first class citizens. '
Frightened by these terms? Don't worry, I'll try to explain them such that at the end, you may realize how beautiful these aspects are!
A little History..
Back When JavaScript was created, it was just considered as a visual tool that made websites a little more fun and attractive. But today you can develop a full-stack web application using Javascript. Not only web, you can also develop mobile, and desktop applications using React(A Javascript framework), React Native, and Electron, and you can even get involved in Information Security, Software Engineering, Machine Learning, and Artificial Intelligence by learning Javascript.
-> 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(Atleast I had that thought as a newbie to CS)..
But as a general example, just like cat has nothing to do with catfish, Java has nothing to do with JavaScript. They are completely different !
Now let's try to define all the terms which we said in the definition earlier... So, by the end of the article if you didn't have any idea initially, you may end up learning what makes Js a pretty popular language and some of it's core functionalities too.
Firstly, I'll start with asking How do browsers understand JavaScript Code?
You may think that there will be a program which converts it into Machine code so that the computer understands.
Yes, you're almost right. And that is called a JavaScript Engine. JavaScript Engine converts your script to machine code and your computer executes it.
(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 do?
First your Js file will be broken into 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 familiar with a programming language, I'm sure that you would have heard both the names.
A compiler or an interpreter is the one which spots the errors in your program and executes it.
A Compiler is something which takes over your complete code, reads it to find errors and if there is no error it converts into 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.
//Ofcourse, it is not concise, but I hope you can get the Idea//
So, you would have guessed what is suitable for executing Js. Ofcourse the Interpreter, as I mentioned JavaScript is something which runs in the browser, the user don't want all the functionalities(in 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, interpreter does not figure it out.That is, it doesn't make any optimizations in the code. Whereas 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 which is intermediate between High Level code and 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 execution phase.
Next, I'll explain why Js is called a 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 JavaScript 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 abstraction level or simplification that is provided by the language over the utilization of hardware/processor.
For example, 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 think 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 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 features which Js provides us is Garbage collectors, Dynamic typing to simplify the code that developers write.
That brings us to our next topic: Garbage collection.
If you have never used a High-level programming language then 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 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 the memory management. Ofcourse, 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 JavaScript developer, just keep in mind that "Memory is Limited!" and code, then you're good to go.
Next we will discuss what does it mean by Dynamic Typing...
If you have some experience in working with low level languages like C, you would have noticed that at every declaration of the variable we explicitly mention the data type of the variable coming before it(Eg: int a=10). But when you take a look at Js code, you can find every variable to be preceded only by these three keywords that is let,const,var. Here we don't specify what the variable is to hold in future or now, the type of that variable will be figured out by the Js Engine at the time of execution or runtime. And this is known as Dynamic Typing. So, you may ask me why should it be as such? Because, you literally don't know what it is going to hold when you're writing the script. Dynamic languages are more likely to allow or encourage a prototype-based approach, Javascript being a great example.
So, what does it mean by Prototype Approach?
This is a really big topic, which may take up a complete blog to explain.But chill ! I'll try to give some key notes or takeaways of it.. Frankly speaking everything in JavaScript is an Object. Even function is an object.But, function is a special type of object.
When it comes to Inheritance, JavaScript only has one construct: Objects. Each object has a private property which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final place in this prototype chain anyone can reach.
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 reuse of code. We are programmers!! We don't repeat the code right? :)
JavaScript is a Single-Threaded, Non-blocking programming language with an Event Loop in it.
Ok So, What does it all mean?
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?
And my answer is Yes. But I think you can remember what I told! Initially, Js was developed just to add interactivity to websites right. And that's the reason it was made Single threaded, so that the language processes don't seem complex. And because of this, JavaScript is Synchronous (One at a time performed in an order). Now You may argue with me that then why use Js? Don't worry.. We've got the Runtime environments to the rescue.
What it is: Runtime is a superpower or a weapon which the browser provides us and which is something built with C/C++ programs like Node.js to make Js code Asynchronous.
Eg: setTimeout(),DOM APIs.
What do 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 case of Node.js) to respond but take up another call from the client or execute 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 be constantly running, checking whether the call stack is empty.. If it finds that the stack is empty, it pushes the processes left out in the callback queue one by one and executes it. This is how Js work Asynchronously. Ofcourse there are a lot of abstractions I made, but as I mentioned this article just gives you an overview of the working !
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?**
console.log("Sentence 1");
setTimeout( () => {console.log("Sentence 2"),1000});
console.log("Sentence 3");
[Hint: setTimeout is not defined in the Js Engine to handle]
So guess what's the output?
Here's the Output:
Sentence 1
Sentence 3
Sentence 2
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 which Web APIs(Runtime) provide. 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, 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 are 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 function as a parameter to another function.
-> We can also return functions as a value from a function.
I'll try to explain more about Js functions in a separate article.
Lastly,
We saw that the Js is a Multi-Paradigm language. And what does it mean?
A paradigm is a way of looking at something or we call in what perspective. Multi-Paradigm means that Js supports to write code in multiple approaches or methods or even ideas.
JavaScript supports both object-oriented programming(OOP) with prototypal inheritance as well as functional programming(FP). At present,OOP is considered more enterprise-ready and reusable, though large OOP apps can have problems related to nested inheritance of objects. Even OOPs has its own cons.
But as a Js Developer, we don't have to worry since Js is a Multi-paradigm language. And that's it for this article.
Hope that was useful and you really enjoyed it :)
I thought of providing just an overview of all of them, since every topic could have taken a separate blog to explain. Do like this post if you learnt something new from this article! Thank you !
Top comments (0)