How JavaScript works

by

JavaScript is a programming language that allows websites and applications to perform actions.

When you write JavaScript code, the browser does not simply display that code as text. A JavaScript engine reads the code, processes it, and executes the instructions.

For example:

let name = "John";

console.log("Hello " + name);

When this code runs, the JavaScript engine processes the instructions and produces the output:

Hello John

This process happens very quickly.

Modern JavaScript engines use several techniques to make JavaScript execution fast and efficient.

Understanding how JavaScript works helps you understand concepts such as the JavaScript engine, execution context, call stack, memory, compilation, and runtime.

How JavaScript Runs

JavaScript can run in several environments.

The most common environment is a web browser.

Browsers such as Chrome, Microsoft Edge, Firefox, and Safari contain JavaScript engines.

When a webpage contains JavaScript, the browser sends the JavaScript code to its JavaScript engine.

The engine processes the code.

It then executes the instructions.

The basic process looks like this:

JavaScript Code
      ↓
JavaScript Engine
      ↓
Parsing
      ↓
Compilation
      ↓
Execution
      ↓
Output

The exact internal implementation differs between JavaScript engines.

However, the general idea remains similar.

JavaScript in a Web Browser

When you open a webpage, the browser performs several tasks.

It downloads the webpage resources.

These resources can include:

  • HTML
  • CSS
  • JavaScript
  • Images
  • Fonts
  • Other files

The browser parses the HTML.

It processes the CSS.

It also identifies JavaScript code.

The JavaScript engine then processes the JavaScript.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>

<button onclick="showMessage()">Click Me</button>

<script>
    function showMessage() {
        alert("Hello!");
    }
</script>

</body>
</html>

The browser displays the button.

When the user clicks the button, JavaScript runs the showMessage() function.

The function displays an alert.

This is a simple example of JavaScript responding to a user action.

JavaScript Is Usually Single-Threaded

JavaScript is traditionally described as a single-threaded language.

This means JavaScript code is generally executed one piece of JavaScript at a time within a given execution context.

For example:

console.log("First");
console.log("Second");
console.log("Third");

The statements are executed in order.

The output is:

First
Second
Third

This does not mean JavaScript applications cannot handle multiple activities.

Browsers provide additional Web APIs.

The JavaScript runtime can use mechanisms such as the event loop to coordinate asynchronous operations.

This allows JavaScript applications to remain responsive while waiting for tasks such as network requests or timers.

JavaScript Engine

A JavaScript engine is a program that reads JavaScript code and executes it.

Different browsers use different JavaScript engines.

Browser or EnvironmentJavaScript Engine
Google ChromeV8
Microsoft EdgeV8
Node.jsV8
Mozilla FirefoxSpiderMonkey
SafariJavaScriptCore

The JavaScript engine is responsible for executing JavaScript.

It handles many internal tasks.

These can include:

  • Parsing source code
  • Creating internal representations
  • Compiling code
  • Executing code
  • Optimizing frequently executed code
  • Managing memory
  • Performing garbage collection

The implementation details differ between engines.

What Does a JavaScript Engine Do?

A JavaScript engine takes JavaScript source code and turns it into instructions that the computer can execute.

Consider this code:

const price = 100;
const quantity = 2;

const total = price * quantity;

console.log(total);

The JavaScript engine needs to understand:

  • Variables
  • Values
  • Operators
  • Expressions
  • Function calls
  • Program flow

It then executes the appropriate operations.

The engine also manages memory for values and objects created by the program.

JavaScript Engine Workflow

A simplified JavaScript engine workflow can be represented as:

Source Code
     ↓
Parsing
     ↓
Abstract Syntax Tree
     ↓
Compilation
     ↓
Machine-Level Instructions
     ↓
Execution

Modern engines can use multiple stages and optimization techniques.

The exact workflow is more complicated than this simplified diagram.

Parsing JavaScript

Parsing is the process of analyzing JavaScript source code.

The engine checks whether the code follows JavaScript’s syntax rules.

For example:

let message = "Hello";

The engine identifies different parts of the statement.

It recognizes:

  • let as a declaration keyword
  • message as an identifier
  • "Hello" as a string value

The engine builds an internal representation of the code.

One important representation is called an Abstract Syntax Tree, commonly known as an AST.

Abstract Syntax Tree

An Abstract Syntax Tree represents the structure of source code.

For example:

let total = 10 + 20;

The engine can represent the code as a tree-like structure.

Conceptually:

Variable Declaration
        |
      total
        |
    Addition
     /    \
   10      20

The actual AST used by an engine contains much more information.

The AST allows the engine to understand the structure and meaning of the source code.

Compilation

After parsing, the JavaScript engine prepares the code for execution.

Modern JavaScript engines use compilation techniques.

JavaScript engines can compile code into lower-level instructions that the computer can execute.

Some engines use Just-In-Time compilation, commonly called JIT compilation.

JIT compilation allows code to be compiled during program execution.

The engine can also optimize code that appears to be executed frequently.

Just-In-Time Compilation

Just-In-Time compilation means that compilation happens while the program is running.

A simplified process looks like this:

JavaScript Source
       ↓
     Parser
       ↓
   Interpreter
       ↓
   Execute Code
       ↓
Collect Runtime Information
       ↓
 Optimize Hot Code
       ↓
Optimized Execution

Modern engines use sophisticated techniques.

They do not simply interpret every JavaScript statement in the same basic way.

They monitor execution and optimize code when useful.

Execution

After the engine prepares the code, it executes the instructions.

For example:

const a = 10;
const b = 20;

const result = a + b;

console.log(result);

The engine processes the statements.

It creates and accesses values.

It performs the addition.

It calls console.log().

The output becomes:

30

Memory Management

JavaScript automatically manages memory.

When JavaScript creates objects, arrays, functions, and other values, memory is required to store them.

For example:

const user = {
    name: "John",
    age: 25
};

The JavaScript runtime allocates memory for the object.

Developers generally do not manually allocate and release this memory.

JavaScript uses automatic memory management.

Garbage Collection

Garbage collection is the process of identifying memory that is no longer needed and reclaiming it.

For example:

let user = {
    name: "John"
};

user = null;

After the object is no longer reachable, it can eventually become eligible for garbage collection.

The exact timing and implementation of garbage collection depend on the JavaScript engine.

Developers do not normally control exactly when garbage collection happens.

Call Stack

The call stack is an important part of JavaScript execution.

It keeps track of function calls.

Consider:

function first() {
    second();
}

function second() {
    console.log("Hello");
}

first();

When first() runs, it is placed on the call stack.

Then second() is called.

second() is placed above first().

After second() finishes, it is removed.

Then first() finishes.

A simplified representation is:

Call Stack

second()
first()
global

The stack follows the Last In, First Out principle.

The last function added to the stack is the first one removed.

What Is the Event Loop?

The event loop helps JavaScript handle asynchronous operations.

For example:

console.log("Start");

setTimeout(() => {
    console.log("Timer finished");
}, 2000);

console.log("End");

The output is:

Start
End
Timer finished

The timer does not block the rest of the JavaScript code for two seconds.

The browser provides timer functionality through Web APIs.

When the timer is ready, its callback can be scheduled for execution.

The event loop coordinates this process with the JavaScript execution environment.

JavaScript Runtime

A JavaScript engine is not the same thing as the complete JavaScript runtime.

The engine executes JavaScript.

The runtime environment provides additional features.

For example, a browser provides APIs such as:

  • DOM APIs
  • Timer APIs
  • Fetch API
  • Storage APIs
  • Web APIs

Node.js provides a different collection of runtime capabilities.

This distinction is important.

ComponentPurpose
JavaScript engineExecutes JavaScript
RuntimeProvides the environment around the engine
Web APIsProvide browser functionality
Event loopCoordinates asynchronous work

V8 Engine

V8 is a JavaScript engine developed by Google.

It is used by Google Chrome.

It is also used by Node.js.

V8 is written primarily in C++.

Its purpose is to execute JavaScript and WebAssembly code efficiently.

V8 has played an important role in the performance of modern JavaScript applications.

Where Is V8 Used?

V8 is used in several important environments.

EnvironmentV8 Used?
Google ChromeYes
ChromiumYes
Node.jsYes
Microsoft EdgeYes
Mozilla FirefoxNo
SafariNo

Chrome and Chromium-based browsers use V8.

Node.js also uses V8 to execute JavaScript outside the browser.

How V8 Works

V8 receives JavaScript source code.

It parses the code.

It creates internal representations.

It executes the code.

It also collects information about how the code behaves.

Frequently executed code can be optimized.

A simplified representation is:

JavaScript
    ↓
V8 Parser
    ↓
Internal Representation
    ↓
Execution
    ↓
Optimization
    ↓
Optimized Execution

Modern V8 uses several sophisticated internal components.

The exact implementation changes as V8 evolves.

V8 and JIT Compilation

V8 uses Just-In-Time compilation techniques.

This allows V8 to optimize JavaScript while the program is running.

For example, suppose a function is repeatedly called with similar types of values.

V8 can collect information about those calls.

It may use that information to optimize the function.

If later assumptions become invalid, the engine can adjust its execution strategy.

This process contributes to JavaScript performance.

V8 and Node.js

Node.js uses V8 as its JavaScript engine.

However, Node.js is not the same thing as V8.

V8 provides the JavaScript execution engine.

Node.js provides a runtime environment around V8.

This runtime provides features that are useful for server-side development.

Examples include:

  • File system access
  • Networking
  • HTTP servers
  • Process management
  • Streams
  • Modules

For example, Node.js can run:

console.log("Hello from Node.js");

The JavaScript code is executed by V8.

Node.js provides the environment in which the code runs.

V8 and the Browser

When JavaScript runs in Chrome, V8 is responsible for executing JavaScript.

The browser also provides many APIs.

For example:

document.querySelector("h1");

The document object is part of the browser environment.

It is not a basic feature supplied by the V8 engine itself.

The browser connects JavaScript with browser functionality.

This distinction is important when learning how JavaScript works.

JavaScript Engine Comparison

Different environments use different JavaScript engines.

EngineMain Association
V8Chrome, Chromium, Node.js
SpiderMonkeyFirefox
JavaScriptCoreSafari
ChakraLegacy Microsoft browser technology

V8, SpiderMonkey, and JavaScriptCore are actively important JavaScript engines in their respective environments.

The JavaScript language is standardized, but engine implementations can differ internally.

ECMAScript vs JavaScript

ECMAScript and JavaScript are closely related.

However, they are not exactly the same thing.

ECMAScript is the language specification.

JavaScript is an implementation of the ECMAScript standard along with additional environment-specific capabilities.

This distinction is important.

What Is ECMAScript?

ECMAScript is a standardized specification for a scripting language.

The specification defines language features and behavior.

It describes concepts such as:

  • Variables
  • Functions
  • Objects
  • Classes
  • Operators
  • Statements
  • Data types
  • Modules
  • Promises
  • Iterators
  • Generators
  • Other language features

JavaScript implementations use the ECMAScript specification as a foundation.

What Is JavaScript?

JavaScript is the name commonly used for implementations of the ECMAScript language.

When developers write:

const name = "John";

they are writing JavaScript.

The language follows ECMAScript specifications.

JavaScript environments also provide additional APIs.

For example, browsers provide:

document
window
fetch
localStorage
setTimeout

These are provided by the host environment and web platform specifications rather than being defined entirely by ECMAScript.

ECMAScript and JavaScript Relationship

The relationship can be understood like this:

ECMAScript
    ↓
Language Specification
    ↓
JavaScript Implementations
    ↓
JavaScript Engine
    ↓
Runtime Environment

For example:

ECMAScript
    ↓
JavaScript Language
    ↓
V8
    ↓
Chrome / Node.js

Another example is:

ECMAScript
    ↓
JavaScript Language
    ↓
JavaScriptCore
    ↓
Safari

ECMAScript Versions

ECMAScript has evolved through different editions.

The first ECMAScript standard was published in 1997.

Later editions introduced many improvements.

One particularly important release was ECMAScript 2015, commonly known as ES6.

ES6 introduced many features that are now common in modern JavaScript.

These included:

  • let
  • const
  • Arrow functions
  • Classes
  • Template literals
  • Destructuring
  • Default parameters
  • Modules
  • Promises
  • Spread syntax

For example, older JavaScript often used:

var name = "John";

Modern JavaScript commonly uses:

const name = "John";

ECMAScript 2016 and Later

After ES6, ECMAScript moved to an annual release model.

New features have been added regularly.

Examples include:

FeatureExample
let and constconst name = "John"
Arrow functionsconst add = (a, b) => a + b
Classesclass User {}
Template literals`Hello ${name}`
Destructuringconst { name } = user
PromisesPromise.resolve()
Async functionsasync function getData() {}
Optional chaininguser?.name
Nullish coalescingvalue ?? "Default"

JavaScript engines gradually implement these standardized language features.

ECMAScript vs JavaScript Table

ECMAScriptJavaScript
Language specificationProgramming language implementation
Defines language rulesUses those rules
Maintained as a standardImplemented by engines
Defines syntax and semanticsRuns in environments
Does not define browser DOM APIsCan use browser APIs
Includes core language featuresIncludes ECMAScript plus host environment features

A simple way to remember the difference is:

ECMAScript defines the language standard. JavaScript is the language developers use based on that standard.

ECMAScript vs JavaScript vs V8

These three terms are sometimes confused.

They represent different things.

TermMeaning
ECMAScriptStandard specification
JavaScriptProgramming language implementation and ecosystem
V8JavaScript engine

For example, when you write:

const message = "Hello";
console.log(message);

ECMAScript defines the rules for features such as const.

V8 can execute the JavaScript code in environments that use V8.

Chrome provides additional browser functionality such as the console and DOM.

JavaScript Execution Example

Consider this code:

function greet(name) {
    return `Hello, ${name}!`;
}

const message = greet("John");

console.log(message);

Several things happen.

The JavaScript engine parses the source code.

It understands the function declaration.

It processes the variable declaration.

The greet() function is called.

The function receives "John".

The function creates the resulting string.

The returned value is assigned to message.

console.log() displays the result.

The output is:

Hello, John!

Why Understanding JavaScript Internals Matters

Beginners can write JavaScript without understanding the engine.

However, understanding the basics becomes useful as applications become larger.

It helps explain:

  • Why functions execute in a particular order
  • How variables are handled
  • How memory is managed
  • How asynchronous code works
  • Why callbacks behave differently from normal statements
  • How promises work
  • Why some operations block execution
  • How JavaScript engines optimize code

This knowledge becomes especially useful when learning advanced JavaScript.

Key Takeaways

JavaScript is executed by JavaScript engines.

A JavaScript engine parses and executes JavaScript code.

Modern engines use compilation and optimization techniques.

V8 is Google’s JavaScript engine.

Chrome and Node.js use V8.

Firefox uses SpiderMonkey.

Safari uses JavaScriptCore.

A JavaScript engine is different from a complete runtime environment.

Browsers provide additional APIs such as the DOM and Fetch API.

Node.js provides server-side runtime capabilities around V8.

JavaScript is traditionally executed through a single main JavaScript thread in an execution context.

The event loop helps coordinate asynchronous operations.

ECMAScript is the standardized specification for the JavaScript language.

JavaScript implementations follow ECMAScript standards.

Understanding these concepts provides a foundation for learning advanced JavaScript topics.

Frequently Asked Questions

What is a JavaScript engine?

A JavaScript engine is software that parses, compiles, executes, and optimizes JavaScript code.

What is V8?

V8 is a JavaScript engine developed by Google. It is used by Chrome, Chromium, and Node.js.

Is V8 a programming language?

No. V8 is a JavaScript engine.

Is Node.js the same as V8?

No. Node.js is a runtime environment that uses V8 to execute JavaScript.

Is Chrome the same as V8?

No. Chrome is a web browser. V8 is the JavaScript engine used by Chrome.

What is ECMAScript?

ECMAScript is the standardized specification that defines the core JavaScript language.

Is ECMAScript the same as JavaScript?

They are closely related but are not exactly the same. ECMAScript defines the language standard, while JavaScript is the commonly used implementation and ecosystem based on that standard.

What is JIT compilation?

JIT stands for Just-In-Time compilation. It is a technique where code can be compiled and optimized during program execution.

What is the call stack?

The call stack is a mechanism used to keep track of function execution.

What is the event loop?

The event loop coordinates JavaScript execution with asynchronous tasks and their callbacks in a JavaScript runtime.

Does JavaScript run directly on the computer?

JavaScript runs through a JavaScript engine. The engine is provided by an environment such as a browser or a runtime such as Node.js.

Which JavaScript engine does Chrome use?

Google Chrome uses the V8 JavaScript engine.

Which JavaScript engine does Firefox use?

Mozilla Firefox uses the SpiderMonkey JavaScript engine.

Which JavaScript engine does Safari use?

Safari uses the JavaScriptCore engine.

Why should beginners learn about JavaScript engines?

Learning the basic role of JavaScript engines helps developers understand how their code is parsed, executed, optimized, and managed at runtime.

Leave a Comment