How to check the current runtime environment is a browser in JavaScript?

Front End Technology Javascript Web Development

A runtime environment is an environment where your code will be executed. It tells what global objects your code can access and it also impacts its result. A JavaScript code can run in different types of environments some of them are Node.js, Service Workers, or in a web browser. So, to start coding in JavaScript, you don’t have to install any additional software. Each web browser comes with a JavaScript engine. You can simply run scripts you write inside any browser but it ensures that it follows all the rules of the ECMAScript (ES6) functionality.

Here we will detect in which runtime environment our code is running. A JavaScript code written in Node.js can also run in any of the environments whether it is a browser environment, service worker environment, or a Node.js environment itself. On running a code in a different environment you need to match all the needs of that environment.

Check if Runtime Environment is Browser

To check if the runtime environment of a code is a browser or not there is no direct method. So to check the runtime environment we have to put some conditions to match with every environment and check in which environment our code is running.

Syntax

Following is the syntax to check if the current runtime environment is a browser or not −

type of window === "object"

Here if the above statement returns true then the current runtime environment is a browser else not.

Algorithm

STEP 1 − Check the condition typeof window === "object".
STEP 2 − If it returns true, display a message as the current runtime environment is a window.
STEP 2 − If it returns false, display a message as the current runtime environment is NOT window.

Example

In the example below, we check if the current runtime environment is browser or not.

<!DOCTYPE html>
<html>
<body>
   <div>
   <h2>Check if the Current Runtime Environment is Browser</h2>
   <p>Click the below button to know if the runtime environment is browser or not</p>
   <button onclick = "isBrowser()"> Check Runtime Environment </button>
   <p id="result1"></p>
   <p id="result2"></p>
   </div>
   <script>
      function isBrowser() {
         var text="Runtime environment";

         // Check if the runtime environment is a Browser
         if (typeof window === "object") {
            document.getElementById("result1").innerHTML = text + " is Browser";
         } else {
            document.getElementById("result2").innerHTML = text + " is NOT Browser";
         }
      }
   </script>
</body>
</html>

Check Different Runtime Environment

There are different-different conditions for each environment.

For a browser environment, the type of window should be equal to an “object”.
For a node.js environment we have to check 2 conditions first is to check if the process is of the type “object” and the type of require is a “function”.
When both these conditions are true only then the environment is node.js environment.
For the service worker environment, we check whether the type of import scripts is equal to a “function” or not when it is equal to a function then only the environment is the service worker environment.

Syntax

Following is the syntax to check the runtime environment −

// Condition if Runtime Environment is Node.js
typeof process === "object" &&typeof require === "

// Condition if Runtime Environment is Service Worker
typeof importScripts === "function

// Condition if Runtime Environment is Browser
typeof window === "object"

Algorithm

STEP 1 − First we check if the runtime environment is Node.js. If true display proper message.
STEP 2 − Next we check if the current runtime environment is Service Worker. If true display proper message.
STEP 3 − Finally we check if the runtime environment is Browser. If true display proper message.

Example

We can use the below code to check the runtime environment of your program.

<!DOCTYPE html>
<html>
<body>
   <div>
   <h2>Check the Current Runtime Environment</h2>
   <p>Click the below button to know the runtime environment</p>
   <button onclick = "isBrowser()"> Check Runtime Environment </button>
   <p id="result1"></p>
   <p id="result2"></p>
   <p id="result3"></p>
   </div>
   <script>
      function isBrowser() {
         var text="Runtime environment";

         // Check if the runtime environment is Node.js
         if (typeof process === "object" &&typeof require === "function") {
            document.getElementById("result1").innerHTML = text + " is node.js"; }

            // Check if the runtime environment is a Service worker

            if (typeof importScripts === "function") {
               document.getElementById("result2").innerHTML = text + " is service worker";
            }

            // Check if the runtime environment is a Browser
            if (typeof window === "object") {
               document.getElementById("result3").innerHTML = text + " is Browser";
            }
         }
   </script>
</body>
</html>

On clicking the button “Check Runtime Environment” the screen will show you the output according to the environment in which your program is running.

This feature of JavaScript allows you to write your code in any environment and run it in any other different environment especially in the web browser while using a web page that only runs in a web browser.

Note − The type of method used here will give us the data type of the variable, function, or method like it gives output as a string, number, object, function, or any other type of data type.