DEV Community: Aiviraj Rajput

Introduction to JavaScript Runtime Environments

Aiviraj Rajput — Sun, 29 Jun 2025 20:26:08 +0000

What is a Runtime Environment

A runtime environment is where your program will be executed. It determines what global objects your program can access and it can also impact how it runs. This article covers the two JavaScriptruntime environments:

the runtime environment of a browser (like Chrome, or Firefox)
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, you could create a file on your own computer called my_website.html and put the following HTML code inside:

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

Save your file, then open your favorite browser. Most browsers will allow you to load websites that you have created locally by going to the menu File > Open File > my_website.html.

Upon loading, the embedded will execute and the window.alert() method will create a pop-up box in your browser with the text "Hello World". How is this possible? Where did the window.alert() method come from and how can it control your browser?

The answer is that you are executing this code 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, you would need to use other programming languages such as Java or PHP.

The Node Runtime Environment

In 2009, the Node runtime environment was created for the purpose of executing JavaScript code without a browser, thus enabling programmers to create 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, suppose you created a file called my-app.js. We can check to see the directory that this file is located in using the Node runtime environment variable process:

// my-app.js
console.log(process.env.PWD);

Notice that we are using console.log now instead of window.alert() since the window object isn’t available
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, first make sure that you have set up Node on your computer. Then, open up a terminal and run the following command:

$ node my-app.js
/path/to/working/directory

The node command tells your computer to execute the my-app.js file in the Node environment. You can also use the node command without a file argument to open up the Node Read-Eval-Print-Loop (REPL):

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

Summary

A runtime environment is where your program will be 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.

1.Front-end JavaScript applications are executed in a browser’s runtime environment and have access to the window object.
2.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.

Asynchronous Programming With Examples

Aiviraj Rajput — Mon, 19 May 2025 18:26:51 +0000

Asynchronous programming is a very important concept in JavaScript, through which tasks execute in a concurrent manner, making applications perform better and enhancing user experience. It does not work like synchronous programming, where tasks are executed one after the other. In order to run parallelly and perform better, asynchronous programming does not allow the code execution to wait for any time-consuming operations, be it the fetching of data from a server or reading files.

The Basics of Asynchronous programming Execution

In this, functions are executed independently of the main program flow. It means, if one task is processing, the rest of the program can continue running and executing other tasks without waiting for asynchronous operation to finish. There are several ways in JavaScript to run program asynchronously:

Callbacks
Promises
Async/ Await

Callback

Callbacks are one of the essential concepts for the asynchronous programming of JavaScript. Basically, a callback is a function that is passed as an argument to another function and is invoked or called later, after some operation has been completed. Callbacks find major use in cases where an operation will take some time to complete, for example, fetching data from a server or reading a file. Therefore , nesting of callback-based code to achieve control flow makes it hard to read and leads to phenomenon known as "callback hell".

function fetchData(callback) {
    setTimeout(() => {
        callback("Data fetched successfully");
    }, 2000);
}

fetchData((data) => {
    console.log(data);
});

Data fetched successfully

The fetchData function simulates an asynchronous operation using setTimeout. When the operation completes, it invokes the callback function passed to it with the fetched data.

Promises

It was introduced in ES6 as a cleaner alternative to callbacks. A promise represents the eventual completion or failure of an asynchronous operation and allows chaining of multiple asynchronous operations. This chaining really makes promise-based code far more readable and manageable than callback-based code. Therefore , promises can be in one of the three states : pending , resolved(fulfilled) and rejected.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched successfully");
        }, 2000);
    });
}

fetchData().then((data) => {
    console.log(data);
});

Data fetched successfully

Async/Await

Async/await is a feature in modern JavaScript, which makes the writing of asynchronous code easier for both reading and maintenance. It builds on top of the concept of promises and introduces a more natural and synchronous-like way of dealing with asynchronous operations.

Basics of Async/Await

Async Functions

An async function is a special type of function that is capable of executing operations asynchronously within it. This is defined using the async keyword before a function declaration.

async function fetchData() {
    // Asynchronous operations go here
}

Await Functions

The await keyword is used inside async functions to pause the execution of the function until the Promise is resolved. It can only be used inside async functions, and it is followed by a promise. When await is used, the function execution is paused until the promise is resolved, returning its resolved value.

async function fetchData() {
    const data = await fetch('https://api.example.com/data');
    console.log(data);
}

In the above example, the async function fetchData fetches data from an API using the fetch function. The await keyword pauses the function’s execution until it fetches the data from the API. Once fetched, it assigns the data to the data variable.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched successfully");
        }, 2000);
    });
}

async function fetchDataAsync() {
    const data = await fetchData();
    console.log(data);
}

fetchDataAsync();

Data fetched successfully

The function fetchDataAsync is marked as async, so await can be used inside it. Inside fetchDataAsync, the await keyword causes the function to pause its execution until the fetchData promise resolves, then assigns the resolved value to the data variable.

Conclusion

Asynchronous programming lies at the heart of JavaScript development, allowing developers to create effective and responsive web applications. Understand the fundamentals of asynchronous execution and how to master modern patterns in the asynchronous world, such as promises and async/await, to write clean, scalable, and maintainable code. Learn how to write high-quality and maintainable, asynchronous programs with proper error handling and dependency management to achieve top-level performance in digital environments today.

Scope in Javascript with example

Aiviraj Rajput — Sat, 10 May 2025 19:42:59 +0000

JavaScript is a powerful and versatile programming language that is widely used for web development. One of the key concepts in JavaScript is scope, which refers to the accessibility of variables, functions, and objects within a program. In this blog post, we will explain the different types of scope in JavaScript, including global scope, local scope, and function scope, and provide examples to help you understand how they work.

Global scope

Global scope in JavaScript refers to variables, functions, and objects that can be accessed from anywhere within a program. These variables, functions, and objects are defined outside of any function or block of code.
For example, consider the following code:

let globalVariable = "Hello, World!";

function myFunction() {
  console.log(globalVariable); // prints "Hello, World!"
}

console.log(globalVariable); // prints "Hello, World!"

In this example, the variable globalVariable is declared outside of any function or block of code, making it accessible from anywhere within the program. Both the myFunction function and the console.log statement outside of the function are able to access and print the value of globalVariable.

Local scope
Local scope in JavaScript refers to variables, functions, and objects that can only be accessed within a specific block of code. These variables, functions, and objects are defined within a block of code, such as a if statement or a for loop.
For example, consider the following code:

if (true) {
  let localVariable = "Hello, World!";
  console.log(localVariable); // prints "Hello, World!"
}

console.log(localVariable); // throws an error, localVariable is not defined

In this example, the variable localVariable is defined within the if statement, making it only accessible within that block of code. The console.log statement within the if statement is able to access and print the value of localVariable, but the console.log statement outside of the if statement throws an error because localVariable is not defined in the global scope.

In conclusion, understanding the concept of scope in JavaScript is essential for writing clean, efficient, and maintainable code. JavaScript has three main types of scope: global scope, function scope, and block scope (commonly referred to as local scope).

Global scope applies to variables and functions that are declared outside of any function or block, making them accessible throughout the entire program.
Function scope means variables declared within a function are only accessible inside that function.
Block scope, introduced with let and const in ES6, restricts variable access to the block (e.g., within {}) in which they are defined.