What is JavaScript & How Browsers Run It

AiTechWorlds

JavaScript is the only programming language that runs natively in every web browser. That single fact explains its dominance — it's not the most elegant language ever designed, but it's everywhere, and that ubiquity makes it indispensable.

A Brief History That Actually Matters

In 1995, Brendan Eich wrote JavaScript in 10 days while working at Netscape. Originally called Mocha, then LiveScript, then JavaScript (a marketing decision to ride the Java hype wave).

Those rushed origins explain some of JavaScript's quirks:

console.log(typeof null);         // "object" — a famous bug
console.log(0.1 + 0.2);          // 0.30000000000000004
console.log("5" - 3);            // 2 (type coercion)
console.log("5" + 3);            // "53" (different coercion!)
console.log([] + []);            // "" (empty string?!)

Understanding these oddities isn't about memorizing tricks — it's about understanding the type coercion system, which we'll cover in depth in Lesson 3.

What JavaScript Can Do in 2026

What started as a language to make web pages move has evolved into something you can use almost anywhere:

In the browser:

Respond to user clicks, form submissions, and keyboard input
Fetch data from APIs without refreshing the page
Animate elements, validate forms, render charts
Build entire applications (Single Page Apps)

On the server (Node.js):

Handle web requests, process files, connect to databases
Build REST APIs and GraphQL servers
Run build tools, bundlers, test runners

Mobile (React Native): Build iOS and Android apps with JavaScript code

Desktop (Electron): VS Code, Slack, Discord, WhatsApp Desktop — all built with JavaScript

AI applications:

Call OpenAI, Anthropic, and Gemini APIs
Build conversational interfaces and AI-powered features

How Browsers Run JavaScript

Understanding this makes you a better debugger and developer.

The JavaScript Engine

Every browser has a JavaScript engine that compiles and runs your code:

Browser	Engine
Chrome, Edge	V8
Firefox	SpiderMonkey
Safari	JavaScriptCore

V8 is also what powers Node.js — same engine, different environment.

The Execution Pipeline

When your browser encounters JavaScript:

JavaScript Source Code
        ↓
    Parsing (AST)
        ↓
    Compilation (JIT)
        ↓
    Machine Code Execution
        ↓
    Output / Side Effects

Modern engines use Just-In-Time (JIT) compilation — they analyze your code as it runs and optimize hot paths. JavaScript is no longer an "interpreted slow language" — V8 can be within 2-3x of equivalent C++ code for optimized programs.

The Event Loop

This is the single most important concept for understanding async JavaScript. More on this in Lesson 18, but the fundamental mental model:

Call Stack          Event Queue
-----------         -----------
console.log  ←---   setTimeout callback
fetch()              click handler
                     network response

JavaScript is single-threaded — it can only do one thing at a time. The event loop handles asynchronous operations by queuing callbacks and processing them when the stack is empty.

Your First JavaScript

In the Browser Console

Open any web page → Right-click → Inspect → Console tab:

console.log("Hello, World!");    // prints to console
alert("Hello!");                 // popup dialog
document.title = "My New Title"; // changes the page title

In an HTML File

<!DOCTYPE html>
<html>
<head>
  <title>My JS Page</title>
</head>
<body>
  <h1 id="heading">Hello</h1>
  <button onclick="changeText()">Click Me</button>

  <script>
    function changeText() {
      document.getElementById("heading").textContent = "You clicked!";
    }
  </script>
</body>
</html>

External Script File (Best Practice)

index.html:

<!DOCTYPE html>
<html>
<head><title>JS App</title></head>
<body>
  <script src="app.js" defer></script>
</body>
</html>

app.js:

console.log("Script loaded!");

const button = document.querySelector("button");
button.addEventListener("click", () => {
  console.log("Button clicked!");
});

The defer attribute tells the browser to download the script in the background and run it after the HTML is fully parsed — this is the modern best practice.

JavaScript vs TypeScript

You'll hear about TypeScript constantly. Here's the simple explanation:

TypeScript = JavaScript + static types

// JavaScript — no type checking
function add(a, b) {
  return a + b;
}
add(5, "3");  // "53" — bug! but no error

// TypeScript — type checking catches bugs
function add(a: number, b: number): number {
  return a + b;
}
add(5, "3");  // Error: Argument of type 'string' is not assignable to parameter of type 'number'

This course teaches pure JavaScript first. TypeScript is the next step — and learning it becomes dramatically easier once you have solid JavaScript foundations.

Setting Up Your Environment

Minimum setup (just need a browser):

Any modern browser has a developer console
Great for experimenting

Recommended setup:

Install VS Code
Install the "JavaScript (ES6) code snippets" extension
Open a terminal and install Node.js from nodejs.org

Verify Node.js:

node --version   # v20.x.x or higher
npm --version    # 10.x.x or higher

Key Takeaway

JavaScript has quirks because of its history, but it's also the most versatile language in existence. The same language runs in your browser, on servers, in mobile apps, and in AI applications.

In this course, you'll master not just the syntax but the mental models — closures, the event loop, prototypal inheritance — that separate JavaScript beginners from developers who can build anything.

Next lesson: Variables — understanding var, let, and const and why the distinction matters more than it looks.

What is JavaScript & How Browsers Run It