- 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.
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 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.
thiskeyword gives us the ‘Window’ object context.
this.document in the console and check that, you have the whole HTML document. Now, context is limited to the document object (HTML document).
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
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:
Subscribe to the newsletter for more insightful info on web development and more technical info, tips and tricks.