› Module 1: Getting Started › 1.3 Variables (var, let, const)
M O D U L E

Module 1: Getting Started

The foundation every JavaScript program is built on

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: Modern JavaScript Engine Execution Pipeline (e.g., Google V8) Your .js Code Source Text const x = 10; Parser Lexical Analysis → AST Tree Interpreter (e.g. Ignition) Fast Bytecode JIT Compiler (TurboFan) Optimized Code Runs! Native CPU Inst.

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 — Default vs. Async vs. Defer Script Loading Default <script>: HTML Parsing Fetch JS Execute Resume HTML <script async>: HTML Parsing Fetch (Parallel) Execute Resume HTML <script defer>: Complete HTML Parsing (DOM Ready) Fetch (Parallel) Execute (Order)

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: Scope and Reassignability Boundaries in JavaScript var Function-scoped • Hoisted let Block-scoped • Reassignable const Block-scoped • Constant Binding { let x = 1; // Only accessible inside this { } block var y = 2; // Leaks outside block to the enclosing function }

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: JavaScript Data Types — Primitive vs. Reference Types JavaScript Data Types Primitive (Immutable, Stack) string number boolean undefined null symbol bigint Reference (Mutable, Heap) object { } array [ ] function( )

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 (===) vs Loose Equality (==) Evaluation Matrix Strict Equality (===) • SAFE Compares Type AND Value directly 5 === 5 → true (both numbers) 5 === '5' → false (number !== string) Loose Equality (==) • DANGEROUS Applies implicit coercion rules 5 == '5' → true ('5' coerced to 5) 0 == '' → true ('' coerced to 0)

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)
MODULE COMPREHENSIVE QUIZ

Module 1 Final Quiz

Test your understanding across all 5 topics of this module with interview-grade questions, tricky edge cases, and code output predictions.

Take Module 1 Final Quiz →
Yukti Mascot