JavaScript serves as a client-side scripting language and is recognized as one of the most effective and widely utilized scripting languages. The phrase "client-side scripting language" indicates that it operates on the client-side (or on the user's machine) within web browsers. However, it is crucial to note that the web browser being used by the client must be compatible with JavaScript or must have JavaScript enabled. In the present day, the majority of contemporary web browsers provide support for JavaScript and come equipped with their own JavaScript engines. For instance, Google Chrome features its proprietary JavaScript engine known as V8.
Additional web browsers along with their respective JavaScript engines include:
| Web Browser | JavaScript engines | |
|---|---|---|
1. |
Edge | Chakra |
2. |
Safari | JavaScript Core |
3. |
Firefox | Spidermonkey |
It totally depends on the web-developers how they use JavaScript and for what, because it can be used for several things in web development. One of the most common uses of JavaScript is to validate data given by the user in the form fields.
By examining the example below, we can gain insight into the functionality of JavaScript:
In this illustration, we have constructed a basic HTML file and incorporated our JavaScript code within it.
Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Working Process</title>
</head>
<body>
<h1>This how javascript works</h1>
<script>
alert("Hi,Their");
console.log("JavaScript");
</script>
</body>
</html>
In the program outlined above, we utilized the "alert" function, which is a built-in method in JavaScript, to present an alert message to the user. Additionally, we employed the "console.log;" function, providing "JavaScript" as a string argument. When inspecting the console, we can observe "JavaScript" displayed, as illustrated in the output below.
Output
As observed in the output, the applications function correctly within our web browser.
Another inquiry that arises is, "how does the browser interpret and execute JavaScript code?"
Nearly all modern web browsers come equipped with their own JavaScript engines, as previously mentioned. It is the responsibility of the JavaScript engine to interpret and execute the code.
Next, we will examine how the JavaScript engine processes and executes .js files.
In this instance, we have utilized the Chrome browser to execute our application, which incorporates the "V8" JavaScript engine, the same engine employed in the development of Node.js. As is well understood, JavaScript functions as an interpreted language, signifying that it is executed sequentially, line by line. This means the JavaScript engine translates the code one line at a time and executes it concurrently, rather than processing the entire program in a single conversion step.
A diagram can assist us in comprehending the functioning of a standard JavaScript engine:
Each time a JavaScript program is executed within a web browser, the browser's engine receives the JavaScript code, which it then processes to produce the desired output.
In a typical JavaScript engine, the source code undergoes multiple stages before it is executed, as illustrated in the diagram provided above.
Let us delve into each of these steps with greater detail.
Step 1: Parser
The initial phase of the engine occurs when we execute a JavaScript program; at this point, the "parser" within the JavaScript engine processes our code. The primary function of the parser is to examine the JavaScript code for any syntactical errors, analyzing it line by line. Since JavaScript operates as an interpretive scripting language, if the parser identifies an error, it generates a specific type of error and halts the code execution.
In summary, we can state that it analyzes and interprets JavaScript code.
Step 2: AST
After the parser thoroughly examines all JavaScript code and confirms that there are no errors or issues present, it generates a data structure known as the AST, which stands for Abstract Syntax Tree.
We can gain a clear understanding of Abstract Syntax Trees (AST) through the following example.
Example
Consider the following JavaScript program provided below:
Program
function fun(x) {
if (x > 15) {
var a = 4;
return a * x;
}
return x + 10;
}
After the parser analyzes the aforementioned JavaScript code, it will generate a data structure known as the AST (Abstract Syntax Tree), as we have previously covered. The resulting AST resembles the image provided.
Note: It is not the exact abstract syntax tree, but it is the pictorial representation of the Abstract Syntax Tree.
Step 3: Conversion to Machine code
After the parser generates the Abstract Syntax Tree, the JavaScript engine translates the JavaScript code into machine code, which is a format that the machine can comprehend.
Step 4: Machine code
When the JavaScript program is transformed into machine language (or bytecode), this converted code is dispatched to the system for execution. Ultimately, the system or engine executes that bytecode in a manner similar to what we observed in our initial example.