JavaScript - The language of the Web

Introduction

The JavaScript programming language dominates the web development world. Almost all websites use the JavaScript language.

Created in 1995 by Netscape Corporation to make web pages more dynamic and responsive. JavaScript is now one of the key technologies of the World Wide Web.

JavaScript makes a web page interactive. It allows a web page to respond to user actions and perform tasks such as loading content without reloading the page, having small pop-up chat fields and advertisements on a webpage, visually pleasing animations while scrolling through a page, and many other cool tricks.

Gone are the days when you needed to have the flash player plugin in your browser to have a web page function fully, thanks to the adoption of JavaScript in modern browsers instead of Adobe’s flash player.

Even though, JavaScript was once intended only for use in browsers for web pages, it is currently used to develop desktop applications (such as Microsoft Teams, Visual Studio Code, Slack, and others) as well as server-side implementations like Node.js, MongoDB, and others.

It's important to note that JavaScript has nothing to do with the other widely used programming language, Java. As Java was popular at that time, the term JavaScript was chosen solely for marketing reasons.

JavaScript (JS) is also called ECMAScript or ES for short, as it is maintained and standardized by the ECMA International organization (European Computer Manufacturing Association).

Features of JavaScript

JavaScript is a single threaded, multi-paradigm, dynamic typing, imperative, synchronous and JIT compilation language.

• Single Threaded and Synchronous: JavaScript executes one line of code at a time and performs each action only after one is completed.
• Multi-Paradigm: JavaScript supports multiple types of programming styles, like functional and object-oriented (prototypal) programming, event-driven and procedural.
• Dynamic typing: One doesn’t have to declare the type of variables while writing the program. Type checking is done at the runtime, i.e., the interpreter takes care of the variable’s type assignment at runtime.
• Imperative: We explicitly mention each step, the program needs to perform, so programs run as intended with less abstraction.
• JIT Compilation: JavaScript is interpreted, but the latest JavaScript Run-Time Environments in browsers uses the best of both Interpreter and Compiler features. It is called Just-in-Time Compilation, making it a bit quicker than interpretation.

There are other notable features of JavaScript as well, such as high-level, garbage collection, non-blocking event loop.

How JavaScript work?

You don’t have to set up any environment to have the JavaScript up and running. Any modern browser is enough to start coding in JavaScript.

Let’s take chrome for our demonstration purposes, since it is the most commonly used browser.

Open a new tab on your Chrome browser and press CTRL + SHIFT + J on your windows or COMMAND + OPTIONS + J on your Mac, to open the console window of Chrome dev tools.

Once you are on the console window, type this and hit Enter. Congrats, you have just written your first JavaScript program.

Your this program should return an object called ‘Window’, which is nothing but the global object. When you expand the ‘Window’ object, you see that he has access to the all methods.

Here thisis a keyword in JavaScript, which helps us in pointing to a particular program context. Since the ‘Window’ object is always available at a global level, the thiskeyword gives us the ‘Window’ object context.

To be clear, the ‘Window’ object is not a part of the JavaScript language, but it is a part of the Browser API, which gives us more functionalities added to the JS functions and methods. More on this in a future discussion.

Type this.document in the console and check that, you have the whole HTML document. Now, context is limited to the document object (HTML document).

This is important to understand that, each JavaScript program/function has its own environment called execution context along with the global environment.

Each execution context will have access to the global object, which is our ‘Window’ object and its own environment.

A JS program would be run in two phases: Creation Phase and Execution Phase.

In the Creation Phase, the program is parsed line by line and memory is allocated to each variable, function in the program.

During the execution phase, the program is executed from the start, each line at a time. In this phase, execution context is created as needed and pushed into the Call Stack.

The Call Stack keeps the track of each execution context. The Call Stack follows the last-in-first-out approach, where the execution context, which enters the Call Stack at the end, will be completed first.

Let’s try to understand how the execution is done in detail with a small example.

Creation Phase: The JS parser would run through the whole code, line after a line from the start. It will create a context for the whole program and allocate memory for the variable ‘a’ and function ‘add’.

Execution Phase: JS engine will now start executing the program from line 1. It will assign the value of 7 to the variable ‘a’ created in the creation phase. Then it will go to the next line and sees that it is a function expression which is not invoked yet, so it goes to the last line, where the function ‘add’ is invoked with 51 and 5.

For the ‘add’ function, a new context is created in the Call Stack, this execution context will be named as ‘add’ and this will have access to all the variables declared within itself, along with the global context with the variable ‘a’.

Again, the ‘add’ execution context will have a creation phase and an execution phase. So the memory would be allocated first and each line of code is executed.

Since, the first line is ‘console.log(a)’, this will print 7 first and then moves to the next line where the function returns the sum of 51 and 5, that is 56.

If you check the Call Stack while the ‘add’ function is being executed, then you can see that you would have two execution context in it, with the ‘add’ execution context at last.

When the return statement is completed, the result - 56 would be printed to the console and the ‘add’ execution context would be removed from the Call Stack.

After this, the outer execution context would also be terminated and the Call Stack would be empty as it was before the start of the program.

There are many other things happening under the hood, when the JS program is being run, like hoisting, garbage collection, scope, event loop, micro stack queue and all. We will look into those details at a later stage.

Refer to the below screenshot from the Source tab in the Chrome developer tools.

You can navigate to Source >> Snippets in the Dev Tools, to create and run a JS program. You can use the Snippets as a mini-IDE to run and debug JS programs.

Salient points of JS

JavaScript is liberal. It has no static typing, meaning, it will allow you to declare variables without the type mentioned. JS is also flexible, as its type converts automatically based on a few conditions. For an example, it lets you add a number to a string number (5 + ‘3’ = 8).

JS allows easy export of programs, giving rise to packages. A code piece can be exported as a package and used in another program. NPM (Node package manager) is a repository of packages, where a package can be distributed on its own without any dependency. Just run a NPM command in your terminal to download a package you want from the NPM repository.

The JS ecosystem is constantly evolving, owing to its wide range of libraries available on open source. You can find well funded open source projects from big corporations like React from Facebook, angular from Google, electron and others.

Resources and References:

A must-read book on JavaScript: Eloquent JavaScript

JavaScript YouTube series by Akshay Saini - Namaste JavaScript

Subscribe to the newsletter for more insightful info on web development and more technical info, tips and tricks.