JavaScript Coding Day 1 | Overview, JavaScript Engine, Variables

November 15, 2025

JavaScript Overview, JavaScript Engine, JavaScript Variables

Watch the lesson tutorial 🔻

💻 JavaScript Overview: Execution Models

JavaScript execution has evolved significantly. While traditionally known as an interpreted language, modern JavaScript engines use a sophisticated mix of interpretation and Just-in-Time (JIT) compilation for vastly improved performance.

Interpreter

The interpreter processes code line-by-line and executes it immediately. It is fast to start up but generally slower for repeated or complex code execution.

Process: The engine reads the raw JavaScript source code and converts it directly into machine code, which the computer's processor can run.
Best for: Initial script loading and code that runs infrequently.

Just-in-Time (JIT) Compiler

The JIT compiler takes the interpreted code that is run often ("hot code") and compiles it into highly optimized, native machine code. This compilation happens while the program is running.

Process:
1. The interpreter runs the code first.
2. A profiler/monitor tracks how often code segments are executed.
3. If a function or loop is run many times, the JIT compiler steps in, compiles it, and saves the optimized version for future use.
Result: Slower start-up cost (for the initial compilation), but much faster execution for long-running processes.

This hybrid approach gives JavaScript the flexibility of an interpreter and the speed of a compiler.

⚙️ JavaScript Engine

A JavaScript Engine is a program that executes JavaScript code. It is typically embedded within web browsers (like Chrome's V8 or Firefox's SpiderMonkey) or runtimes (like Node.js). The engine implements the interpreter/JIT compilation model described above.

Core Components

Parser: Reads the source code and checks its syntax. If valid, it converts the code into an Abstract Syntax Tree (AST).
Interpreter/Baseline Compiler: Takes the AST and generates fast, unoptimized bytecode to start execution immediately.
Profiler/Monitor: Tracks the execution of the bytecode to identify "hot" functions.
Optimizing JIT Compiler (e.g., V8's TurboFan): Takes the hot bytecode and compiles it into highly efficient machine code. It can de-optimize and recompile if assumptions about the code change (a process called deoptimization).
Garbage Collector: Manages memory, automatically freeing up space occupied by objects that are no longer needed.

Practical Example Code

This first example demonstrates a simple script running within a browser's JavaScript environment (handled by the engine).

HTML
<html>
  <head>
    <title>JS Engine Example</title>
    <script>
      // The JS Engine reads this entire script block.
      // 1. Parser creates an AST.
      // 2. Interpreter/Compiler executes the code.
      
      console.log("Hello World!"); 

      // If this line was in a loop running millions of times,
      // the JIT compiler would eventually optimize it.
    </script>
  </head>
  <body>
    </body>
</html>

Output (in Developer Console)
`Hello World!`

💾 JavaScript Variables

A variable is a named storage location for a value. You use them to hold data, like numbers or text, that can be accessed and manipulated throughout your program.

In modern JavaScript, variables are declared using one of three keywords:

let: Used for variables whose values might change. It is block-scoped.
const: Used for variables whose values should not change (constants). It is also block-scoped and must be initialized when declared.
var: The older way to declare variables. It is function-scoped or globally scoped and is generally discouraged in favor of let and const.

Practical Example Codes & Outputs

This second example demonstrates how to declare and use variables for a simple calculation.

HTML
<html>
  <head>
    <title>JS Variables Example</title>
    <script>
      // 1. Declaring and initializing variables using 'const' and 'let'
      const x = 5; // Use const for a value that won't change (the initial number)
      let y = 3;   // Use let for a value that might change later

      // 2. Performing a calculation and storing the result in a new variable
      let sum = x + y;
      
      console.log(sum); // Output: 8
      
      // 3. Re-assigning a 'let' variable
      y = 10; // This is allowed because 'y' was declared with 'let'
      
      // 4. Performing the calculation again with the new value
      sum = x + y; 

      console.log(sum); // Output: 15 (5 + 10)

      // 5. Trying to re-assign a 'const' variable (This will throw an error!)
      // x = 100; // Uncaught TypeError: Assignment to constant variable.

    </script>
  </head>
  <body>
    </body>
</html>

Output (in Developer Console)	Explanation
`8`	Initial calculation: $5 + 3$
`15`	Second calculation after `y` was changed: $5 + 10$

The original, simpler code you provided:

HTML
<html>
  <head>
       <script>
        
       x=5;
       y=3;
       
       console.log(x+y);

    
       </script>
  </head>

</html>

Output (in Developer Console): 8

Explanation: When you use a variable without declaring it (x=5;), JavaScript automatically makes it a global variable (in non-strict mode). It is highly recommended to explicitly use let or const (e.g., let x = 5;) to avoid creating unintended global variables and make your code safer and easier to maintain.

Run Today's Lesson Codes on NextLeap (Click Here)

- by Chirana Nimnaka

Search This Blog

ChiruCodes