Chapter 1: JavaScript Fundamentals

Mastering modern JavaScript is the foundational prerequisite for React, state management architectures, and full-stack web applications. Understanding how the JavaScript engine executes code, allocates memory, handles asynchronous operations, and delegates events will turn you into an elite engineer.

---

🧭 Subtopics & Curriculum

Click anywhere on a card below to open that subtopic note, or use the Obsidian button to open it directly in the Obsidian app:

Memory & Scope1.1

📦

1.1 Variables, Scope & Data Types

• 1. Variable Declarations: var vs let vs const
• 2. Scope in JavaScript: Global, Function, & Block
  • A. Global Scope
  • B. Function Scope (Local Scope)
  • C. Block Scope (let and const)
  • D. The Scope Chain
• 3. Hoisting & The Temporal Dead Zone (TDZ)
• 4. Data Types: Primitives vs Reference Types
  • Stack vs Heap Memory Allocation
• 5. Type Coercion & Strict Equality (=== vs ==)
  • Implicit vs Explicit Coercion
  • Strict (===) vs Loose (==) Equality
  • Falsy Values in JavaScript
• 6. Summary Checklist

🔮 Open in Obsidian

Core Engine1.2

⚡

1.2 Functions, Closures & Context

• 1. Function Types & Variations
  • A. Function Declaration
  • B. Function Expression
  • C. Arrow Function (ES6)
• 2. Execution Context & Call Stack
• 3. Lexical Scope (Static Scoping)
• 4. What is a Closure?
• 5. Practical Applications of Closures
  • 1. Function Currying & Partial Application
  • 2. Memoization (Caching Expensive Operations)
• 6. Closures in React & The "Stale Closure" Problem
  • The Stale Closure Bug
  • The Solutions:
• 7. Summary Checklist

🔮 Open in Obsidian

Object Architecture1.3

🧩

1.3 Objects, Prototypes & 'this'

• 1. Object Creation Patterns
  • A. Object Literals
  • B. Constructor Functions & new
  • C. ES6 Classes (Syntactic Sugar over Prototypes)
• 2. Prototypal Inheritance & The Prototype Chain
• 3. The 4 Rules of Dynamic 'this' Binding
  • Rule 1: Default Binding (Standalone Function Call)
  • Rule 2: Implicit Binding (Method Call on an Object)
  • Rule 3: Explicit Binding (call, apply, bind)
  • Rule 4: new Binding (Constructor Calls)
• 4. Arrow Functions & Lexical 'this'
• 5. Summary Checklist

🔮 Open in Obsidian

Modern Syntax1.4

🚀

1.4 Modern ES6+ Syntax for React

• 1. Destructuring Assignment
  • Object Destructuring
  • Array Destructuring
• 2. Spread (...) & Rest (...) Operators
  • Spread for Immutability & Cloning
  • Rest Parameter in Functions
• 3. Default Parameters
  • Key Behaviors:
• 4. The Ternary Operator (condition ? trueExpr : falseExpr)
  • Conditional Rendering in React JSX
• 5. Optional Chaining (?.) & Nullish Coalescing (??)
  • Optional Chaining (?.)
  • Nullish Coalescing (??) vs Logical OR (||)
• 6. Template Literals & Tagged Templates
  • Tagged Templates
• 7. ES Modules (ESM) — import & export
  • Dynamic Imports & React Code Splitting
• 8. Summary Checklist

🔮 Open in Obsidian

Functional Patterns1.5

🔄

1.5 Array & Object Methods & Immutability

• 1. Higher-Order Array Methods
  • A. map(): Transforming Elements
  • B. filter(): Selecting Subsets
  • C. reduce(): Aggregating to Any Structure
  • D. forEach() vs map()
  • E. Search & Verification Methods
• 2. Object Methods
  • A. Object.keys(), Object.values(), and Object.entries()
  • B. Object.fromEntries(): Rebuilding Objects
  • C. Object.assign()
  • D. Object.freeze() vs Object.seal()
• 3. Shallow Copy vs Deep Copy
  • The Shallow Copy Trap
  • Deep Copy Solutions:
• 4. Immutable Operations in React
  • Why Immutability is Mandatory
  • The React Immutable Toolkit
• 5. Summary Checklist

🔮 Open in Obsidian

Concurrency & Async1.6

⏳

1.6 Async JS & Event Loop

• 1. JavaScript Concurrency Architecture
• 2. The Event Loop Cycle & Priority
• 3. Promises: Lifecycle & Combinators
  • Promise States
  • Chaining & Error Handling
  • Promise Combinator Methods
• 4. async / await Syntax
• 5. React Asynchronous Patterns & Race Conditions
  • Solution: Cancellation with AbortController
• 6. Summary Checklist

🔮 Open in Obsidian

Browser Runtime & Performance1.7

🌐

1.7 DOM Manipulation & Events

• 1. The DOM Tree & Querying Elements
  • Modern DOM Query Methods
• 2. Event Propagation: Capturing, Target & Bubbling
  • Controlling Event Flow
• 3. Event Delegation Pattern
  • Benefits of Event Delegation:
• 4. Browser Rendering: Reflow vs Repaint
• 5. Performance Optimization: Debouncing & Throttling
  • A. Debouncing (Wait for the Pause)
  • B. Throttling (Enforce a Maximum Rate)
  • C. Debounce vs Throttle Comparison
• 6. React Virtual DOM & Synthetic Events
  • 1. Virtual DOM Reconciliation
  • 2. Synthetic Event System
• 7. Summary Checklist

🔮 Open in Obsidian

Resilience & Quality1.8

🛡️

1.8 Error Handling & Debugging

• 1. Built-in Error Types in JavaScript
  • Anatomy of an Error Object
• 2. Structured Exception Handling: try...catch...finally
• 3. Creating Custom Error Hierarchies
• 4. Debugging Techniques & Browser DevTools
  • A. The debugger; Statement
  • B. Advanced console Methods
• 5. React Error Boundaries
• 6. Summary Checklist

🔮 Open in Obsidian