1.1 What is JavaScript?
JavaScript is a lightweight, high-level, interpreted (and JIT-compiled) programming language that serves as the universal engine of the interactive web. Originally created in 1995 by Brendan Eich in just 10 days at Netscape under the name Mocha (later LiveScript, then JavaScript), it has grown from a simple browser scripting utility into a multi-paradigm powerhouse powering web frontends, distributed backends, mobile apps, desktop software, and cloud microservices.
Unlike languages like C++ or Java that require a separate compilation step to produce native binaries or bytecode before execution, JavaScript was engineered to execute directly inside client environments. Modern browsers embed high-performance execution engines like Google's V8 (Chrome, Node.js), Mozilla's SpiderMonkey (Firefox), and Apple's JavaScriptCore (Safari). These engines employ advanced Just-In-Time (JIT) compilation to parse source code into an Abstract Syntax Tree (AST), generate intermediate bytecode via an interpreter (like V8's Ignition), and dynamically compile hot code paths into optimized machine instructions via a compiler (like V8's TurboFan).
Figure 1.1: How a modern JavaScript engine parses source code into an AST, generates bytecode, and JIT-optimizes hot execution paths into machine instructions.
Core Architectural Pillars
- Single-Threaded Call Stack: JavaScript has exactly one main execution thread with one call stack. Only one statement executes at any given millisecond, eliminating low-level thread concurrency bugs like deadlocks.
- Non-Blocking Event Loop: While the execution thread is single-threaded, asynchronous operations (timers, network requests, disk reads) are offloaded to background C++ threads in the browser or Node.js runtime and queued back to the main thread.
- Dynamically & Weakly Typed: Variables hold references to values whose types can change at runtime. Type conversions can happen implicitly unless strict operators (
===) are enforced.
1.2 Adding JS to a Web Page
JavaScript executes inside web browsers when linked to an HTML document. The placement of your <script> tag and the loading attributes you select directly impact page load performance, Time-to-Interactive (TTI), and Largest Contentful Paint (LCP).
Figure 1.2: HTML Parser Timeline comparison. defer downloads in parallel without blocking HTML parsing and guarantees execution in document order right after DOM tree creation.
Best Practice Implementation
<!-- Placed in the <head> with defer -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ReadyToGo Web App</title>
<!-- Non-blocking parallel download, executes in exact source order -->
<script src="app.js" defer></script>
</head>
<body>
<h1 id="title">JavaScript Mastery</h1>
</body>
</html>
1.3 Variables (var, let, const)
A variable is a labeled memory location that holds a value or a memory reference. Prior to ECMAScript 2015 (ES6), JavaScript had only one declaration keyword: var. ES6 introduced let and const, which establish block-scoping and eliminate common scoping pitfalls.
Figure 1.3: Architectural difference between function-scoped var and block-scoped let/const within curly braces { }.
// 1. const prevents re-assignment of the variable identifier
const MAX_USERS = 100;
// MAX_USERS = 200; // TypeError: Assignment to constant variable
// 2. const objects remain internally mutable!
const config = { theme: "dark" };
config.theme = "light"; // Valid property mutation!
console.log(config.theme); // "light"
// 3. let is block-scoped and allows re-assignment
let score = 0;
score += 10; // Valid reassignment
1.4 Data Types
JavaScript is dynamically typed, meaning values have types, not variables. ECMAScript categorizes all values into two distinct memory groups: 7 Primitive Types and Reference Types (Objects).
Figure 1.4: Hierarchy of JavaScript primitive data types (immutable, stored directly) vs reference types (objects and functions living in heap memory).
1.5 Operators
Operators perform computations, comparisons, and boolean evaluations. A critical skill in JavaScript interviews is mastering strict equality versus type coercion.
Figure 1.5: Strict equality (===) checks types first and fails fast, preventing implicit coercion surprises.
// 1. Strict equality check
console.log(false === 0); // false (boolean vs number)
console.log(false == 0); // true (implicit coercion converts false to 0)
// 2. Nullish Coalescing (??) vs Logical OR (||)
const userPort = 0; // Valid port number
console.log(userPort || 3000); // 3000 (Oops! 0 is falsy, overrides port)
console.log(userPort ?? 3000); // 0 (Correct! Only falls back on null or undefined)