Introduction to JavaScript Runtime Environments

4 min readApr 16, 2022

Today was another sunny day, I and my husband had a fun time basking in sun and enjoying food and drinks 😋

I am not able to find time to put regular updates on Medium, if you are curious and interested in following what I am learning each day, please feel free to check 😁

The Journey of #100DaysOfCode (@henna_dev)

Hello Everyone, 👋 I had heard a lot on #100DaysOfCode and really wanted to work together with friends on this. I would…

www.mongodb.com

I am also excited to share that we would be organizing our very first Dublin MongoDB user-group event on April 27, 2022. If you are around Dublin, you are more than welcome to join us 🤗

Dublin MUG: Let's talk Atlas, Realm and MongoDB Queries

G'Day, Folks, 👋 It's great to know we are now starting to get back to normal and more exciting things have started…

www.mongodb.com

Let’s head over to Runtime environments, it was new information for me.

What is a Runtime Environment?

A runtime environment is where the program is executed. It determines what global objects a program can access and it can also impact how it runs. Today I am writing about two environments

A browser (Chrome, or Firefox) runtime environment
The Node runtime environment

A Browser’s Runtime Environment

The most common place where JavaScript code is executed is in a browser. For example, using any text editor ( notepad, VS Code, Atom, etc), an HTML file, say website.htmlwith some code inside can be created on the computer:

<!-- website.html -->
<html>
  <body>
    <h1> Random Website </h1>
    <script> window.alert('Hello World'); </script>
  </body>
</html>

This file can be saved and opened in a browser. Upon loading, the embedded <script></script> executes and the window.alert() method creates a pop-up box in the browser with the text “Hello World”.

Now the question pops: Where did the window.alert() method comes from and how can it control the browser?

This is because the code is getting executed in the browser’s runtime environment. The window.alert() method is built into this environment and any program executed in a browser has access to this method. In fact, the window object provides access to a huge amount of data and functionality relating to the open browser window beyond just .alert().

Try replacing window.alert() with window.prompt() or window.confirm()

Applications created for and executed in the browser are known as front-end applications.

For a long time, JavaScript code could only be executed in a browser and was used exclusively for creating front-end applications. In order to create back-end applications that could run on a computer WITHOUT a browser, other programming languages such as Java or PHP were used.

The Node Runtime Environment

In 2009, the Node runtime environment was created for the purpose of executing JavaScript code without a browser, enabling the creation of full-stack (front-end and back-end) applications using only the JavaScript language.

Node is an entirely different runtime environment, meaning that browser-environment data values and functions, like window.alert(), can’t be used.

Instead, the Node runtime environment gives back-end applications access to a variety of features unavailable in a browser, such as access to the server’s file system, database, and network.

For example, it's easy to check the directory of a file name myApp.js using the Node runtime environment variable process

console.log(process.env.PWD);

process is an object containing data relating to the JavaScript file being executed. process.env is an object containing environment variables such as process.env.PWD which contains the current working directory (and stands for “Print Working Directory”).

To execute the JavaScript code in this file, open up the terminal and run the following command: (provided node is set up on the system)

$ node myApp.js
/path/to/working/directory

The node command tells the computer to execute the myApp.js file in the Node environment. The node command can also be used without a file argument to open up the Node Read-Eval-Print-Loop (REPL):

$ node
> process.env.HOME
'/home/ccuser'

To Review

A runtime environment is where the program is executed. JavaScript code may be executed in one of two runtime environments:

a browser’s runtime environment
the Node runtime environment

In each of these environments, different data values and functions are available, and these differences help distinguish front-end applications from back-end applications.

Front-end JavaScript applications are executed in a browser’s runtime environment and have access to the window object.
Back-end JavaScript applications are executed in the Node runtime environment and have access to the file system, databases, and networks attached to the server.