Chapter 1.1☕ 10 min read

What is JavaScript & How It Runs

Auto stand jaisa — har jagah milega, bas sahi tareekeh se chalaao.

01JavaScript Origin & ECMAScript

In May 1995, Brendan Eich created JavaScript in just 10 days at Netscape Communications. It was originally called "Mocha", then "LiveScript", and finally renamed to "JavaScript" — a pure marketing move to ride Java's popularity. The two languages have nothing in common.

ECMAScript (ES) is the official specification maintained by the TC39 committee. "JavaScript" is the implementation. Think of it like: ECMAScript = blueprint, JavaScript = the actual building. Every browser and Node.js implements this spec.

Major ES milestones:

ES5  (2009)  → "use strict", JSON, forEach, map, filter, reduce
ES6  (2015)  → let, const, arrow functions, classes, Promises,
                template literals, destructuring, modules
ES2017       → async / await
ES2020       → optional chaining (?.), nullish coalescing (??)
ES2024       → Promise.withResolvers, Array.groupBy(), etc.

ES6 was the biggest single update in JS history. It transformed the language from a "scripting toy" into a serious programming language.

02Kahan Chalta Hai? Browser vs Node.js

JavaScript doesn't live in one place — it runs wherever there's a JS engine:

Browser engines: Chrome & Edge use V8, Firefox uses SpiderMonkey (the original JS engine, also by Brendan Eich), Safari uses JavaScriptCore (JSC). All three implement the same ECMAScript spec but have different APIs available.

Browser environment provides:

window          → the global object
document        → DOM access
localStorage    → persistent key-value storage
fetch           → HTTP requests
setTimeout      → timers
console         → debugging output

Node.js environment (also uses V8!) provides:

process         → runtime info (env, argv, pid)
require / import → module system
fs              → file system access
http            → create servers
__dirname       → current directory path
Buffer          → binary data handling

Key difference: Node.js has no window, no document, no DOM. These are browser-only APIs. Conversely, Node.js has fs, http, process — which browsers don't have. When writing Angular SSR code, your components run on Node.js too, so never access window/document directly!

03HTML Mein Kaise Lagaate Hain?

Three ways to add JavaScript to an HTML page:

1. Inline (avoid in production):

<button onclick="alert('Hi')">Click Me</button>

Quick for testing, terrible for maintainability. Mixes concerns.

2. Internal script tag:

<script>
  console.log('Hello from internal script');
</script>

OK for small demos. Not cacheable by the browser.

3. External file (best practice):

<script src="app.js"></script>

Why external is best: Separation of concerns (HTML vs JS), browser caches the .js file, reusable across pages, easier to debug in DevTools, works with bundlers like webpack/esbuild. This is what every professional project uses.

04defer vs async — Most Important!

This is THE most important concept in this entire chapter. Pay attention.

Normal script (no attribute): Browser STOPS parsing HTML → downloads the script → executes it → then continues parsing. The entire page appears frozen during this time.

defer: Downloads the script in parallel with HTML parsing → waits until DOM is fully parsed → executes scripts in document order.

async: Downloads in parallel → executes immediately when download finishes → no order guarantee — whichever downloads first runs first.

📋 Golden Rule:
• Your app scripts that need the DOM → use defer
• Independent third-party scripts (analytics, ads) → use async
• Never use plain <script src="..."> in <head> without defer/async

<!-- Best practice pattern -->
<head>
  <script defer src="vendor.js"></script>
  <script defer src="app.js"></script>
  <script async src="analytics.js"></script>
</head>

Why defer is almost always better than async: defer guarantees execution order and ensures DOM is ready. async can execute in any order and might run before DOM is complete. Only use async when a script truly has no dependencies and order doesn't matter.

05Console Methods

The console object is your best debugging friend. Beyond console.log, it has powerful methods:

// Basic output
console.log("Normal message");
console.warn("Something suspicious");   // Yellow ⚠
console.error("Something broke!");      // Red ✗ with stack trace

// Table — beautiful for arrays of objects
console.table([
  { name: "Biryani", price: 180 },
  { name: "Chai", price: 15 }
]);

// Timing — measure performance
console.time("loop");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("loop");  // loop: 12.345ms

// Grouping — organize related logs
console.group("User Details");
console.log("Name: Sai");
console.log("City: Hyderabad");
console.groupEnd();

Pro tip: In Chrome DevTools, console.table() renders a sortable, filterable table for arrays and objects. It's infinitely better than console.log for inspecting data. Also, console.trace() shows the full call stack — extremely useful for debugging "who called this function?"

Lo kar liya — Key Points:

✅ JavaScript was created by Brendan Eich in 1995 — just 10 days!
✅ ECMAScript is the spec, JavaScript is the implementation
✅ Browser has window/document/DOM — Node.js has fs/http/process
✅ defer for your scripts (order + DOM ready), async for analytics
✅ typeof null returns "object" — a 1995 bug, never fixed
✅ console.table() is your best friend for inspecting data

Previous—📋 All Chapters Next Chapter1.2 — Variables & Hoisting →