What is JavaScript and why it is used?

What is JavaScript and why it is used? History of JavaScript

What is JavaScript and why it is used? History of JavaScript

What is JavaScript? | Full JavaScript Guide for Beginners

 

Note: This article is for someone who had recently started learning JS language. If you don’t understand some terms or functionalities please leave them in the comment, because the whole in depth processes can’t be expressed in this one blog. So this blog is an overview on what is JavaScript.

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.

I understand that definition is super long but don’t worry, we’ll simplify it as we go on.

History of JavaScript

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 even develop a full-stack web application using Javascript ,thanks to Ryan Dahl who introduced Node.js in 2009 which made JS code to get outside of the bars of browser.

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.

The Meaning of JavaScript

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.

But as a general example, just like a 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, 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 its functionalities.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

First and foremost I’ll start by asking how do browsers understand JavaScript Code?

Browsers Understanding JavaScript Code

You may end up saying that there will be a program that 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 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 names.

5+ HTML CSS Projects With Source Code

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.

ADVERTISEMENT

//Of course, there are a lot of abstractions, but I hope you can get the Idea//

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

Currency Formatter With HTML, CSS, & JavaScript

ADVERTISEMENT

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 with the optimized code. Note, the processes which I mentioned all happen on the fly that is in the execution phase.

Next, I’ll explain why JavaScript 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);

Portfolio Website using HTML and CSS (Source Code)

So, further moving up we arrive at our case, a High-level programming language like JS, or Python.

As a high-level language, some of the abstractions which JS provides us are Garbage collectors, and dynamic typing to simplify the code that developers write.

Garbage Collection

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.

How To Create Movie App UI Using HTML & CSS

Dynamic Typing

If you had 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 type of variable coming before it(Eg: int a=10). But when you take a look at JavaScript code, you can find every variable to be preceded only by these three keywords let, const, and 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 that we call 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 a script. Dynamic languages are more likely to allow or encourage a prototype-based approach, JavaScript being a great example.

Prototype Approach

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 keynotes or takeaways of it.. Frankly speaking everything in JavaScript is an Object. Even a function is an object. But, the function is a special type of object.

When it comes to Inheritance, JavaScript only has one construct: Objects. Each object has a private property that 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.

Restaurant Website Using HTML And CSS With Source Code

But Why use Prototypal Inheritance among all this complexity?

Simply to be efficient.. Prototypal Inheritance helps us to inherit properties, and functions from already existing objects. And that helps in the reuse of code. We are programmers!! We won’t repeat the code right? 🙂

Single-Threaded

->JavaScript is a Single-Threaded, Non-blocking programming language with an event loop in it. Ok so, 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 that the browser provides us or which is something built with C/C++ programs like Node.js to make JS code Asynchronous.

50+ HTML, CSS & JavaScript Projects With Source Code

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?

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 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?

10+ Javascript Projects For Beginners With Source Code

Functions in JavaScript

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.

Multi-Paradigm Language

Lastly,

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.

Responsive Navbar using HTML,CSS and JavaScript

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 the nested inheritance of objects. I’m also not completely into OOP. Even that has its own cons.

But as JS Developers, we don’t have to worry since JS is a Multi-paradigm supported language.

Hopee that was useful ! Thank you !

written by @codingporium



Leave a Reply