JavaScript / TypeScript / Node.js on Software Engineering Learning Paths

JavaScript Fundamentals

Mon, 01 Jan 0001 00:00:00 +0000

The Language at a Glance#

JavaScript is a dynamically typed, prototype-based, multi-paradigm language. It was created in 10 days in 1995 and has evolved into the most widely deployed programming language in history — running in every browser, on servers (Node.js), mobile apps, desktop apps, and even embedded systems.

flowchart LR
 subgraph Engine["JavaScript Engine (V8, SpiderMonkey, JSC)"]
 P["Parser"] --> AST["Abstract Syntax Tree"]
 AST --> I["Interpreter (Ignition)"]
 I --> BC["Bytecode"]
 BC --> OC["Optimizing Compiler (TurboFan)"]
 OC --> MC["Machine Code"]
 end
 
 Source[".js source"] --> P
 MC --> Exec["Execution"]

Types and the Type System#

JavaScript has 7 primitive types and 1 structural type (object). Primitives are immutable and compared by value. Objects are mutable and compared by reference.

Prototypes and `this`

Mon, 01 Jan 0001 00:00:00 +0000

The Prototype Chain#

JavaScript uses prototypal inheritance — objects inherit directly from other objects. There are no classes at the engine level (ES6 class is syntactic sugar).

Every object has an internal [[Prototype]] slot pointing to another object (or null). When you access a property, the engine walks up this chain until it finds the property or reaches null.

flowchart TD
 subgraph Chain["Prototype Chain"]
 direction TB
 myObj["myObj<br>{name: 'Alice'}"]
 Person["Person.prototype<br>{greet(), toString()}"]
 ObjProto["Object.prototype<br>{hasOwnProperty(), valueOf()...}"]
 Null["null"]
 end
 
 myObj -->|"[[Prototype]]"| Person
 Person -->|"[[Prototype]]"| ObjProto
 ObjProto -->|"[[Prototype]]"| Null
 
 style Null fill:#ffcdd2

const animal = {
 type: "animal",
 speak() {
 return `${this.name} says ${this.sound}`;
 }
};

const dog = Object.create(animal); // dog's [[Prototype]] = animal
dog.name = "Rex";
dog.sound = "woof";

dog.speak(); // "Rex says woof" — found on animal via chain
dog.type; // "animal" — inherited
dog.hasOwnProperty("name"); // true — own property
dog.hasOwnProperty("type"); // false — inherited

Property Lookup Mechanics#

sequenceDiagram
 participant Code
 participant obj as myObj
 participant proto as Prototype
 participant objProto as Object.prototype
 
 Code->>obj: Access obj.property
 alt Found on obj
 obj-->>Code: Return value
 else Not found
 obj->>proto: Check [[Prototype]]
 alt Found on prototype
 proto-->>Code: Return value
 else Not found
 proto->>objProto: Check [[Prototype]]
 alt Found
 objProto-->>Code: Return value
 else Reached null
 objProto-->>Code: undefined
 end
 end
 end

Property Shadowing#

const parent = { x: 1, y: 2 };
const child = Object.create(parent);

child.x = 10; // Creates OWN property on child (shadows parent.x)

child.x; // 10 (own property)
child.y; // 2 (inherited from parent)
parent.x; // 1 (unchanged)

// Deleting own property reveals inherited one
delete child.x;
child.x; // 1 (now reads from parent)

Property Descriptors#

const obj = {};

Object.defineProperty(obj, "id", {
 value: 42,
 writable: false, // Cannot reassign
 enumerable: true, // Shows in for...in
 configurable: false // Cannot delete or reconfigure
});

obj.id = 100; // Silently fails (or TypeError in strict mode)
obj.id; // 42

// Getters and setters
const user = {
 _name: "Alice",
 get name() { return this._name; },
 set name(val) {
 if (val.length < 2) throw new Error("Name too short");
 this._name = val;
 }
};

user.name; // "Alice" (calls getter)
user.name = "Bo"; // Error: Name too short

Constructor Functions and `new`#

Before ES6 classes, constructor functions were the standard pattern:

ES6+ Features

Mon, 01 Jan 0001 00:00:00 +0000

The Modern JavaScript Revolution#

ES6 (ECMAScript 2015) was the biggest single update to JavaScript. Subsequent yearly releases (ES2016–ES2024) added incremental improvements. This file covers the features that fundamentally changed how JavaScript is written.

Destructuring#

Destructuring extracts values from objects and arrays into distinct variables using a pattern that mirrors the data structure.

Object Destructuring#

const user = { name: "Alice", age: 30, city: "Barcelona", role: "admin" };

// Basic
const { name, age } = user;

// Rename
const { name: userName, age: userAge } = user;

// Default values
const { name, country = "Unknown" } = user; // country = "Unknown"

// Nested
const response = {
 data: {
 user: { id: 1, profile: { avatar: "url" } }
 }
};
const { data: { user: { profile: { avatar } } } } = response;

// Rest (collect remaining)
const { name, ...rest } = user; // rest = { age: 30, city: "Barcelona", role: "admin" }

// Computed property names
const key = "name";
const { [key]: value } = user; // value = "Alice"

Array Destructuring#

const coords = [41.3851, 2.1734, 12];

// Basic
const [lat, lng] = coords;

// Skip elements
const [, , altitude] = coords;

// Default values
const [x, y, z, w = 0] = coords;

// Rest
const [first, ...remaining] = [1, 2, 3, 4, 5]; // remaining = [2, 3, 4, 5]

// Swap variables (no temp needed)
let a = 1, b = 2;
[a, b] = [b, a]; // a = 2, b = 1

Function Parameter Destructuring#

// Object parameters with defaults
function createUser({ name, age, role = "user", active = true } = {}) {
 return { name, age, role, active, createdAt: new Date() };
}

createUser({ name: "Alice", age: 30 });
createUser(); // uses all defaults (the = {} handles undefined argument)

// Array parameters
function head([first, ...rest]) {
 return { first, rest };
}

head([1, 2, 3]); // { first: 1, rest: [2, 3] }

Spread and Rest Operators#

The ... syntax serves two purposes depending on context:

Asynchronous JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Why Async Matters#

JavaScript is single-threaded — it has one call stack and can execute one thing at a time. Without asynchronous mechanisms, any I/O operation (network request, file read, timer) would freeze the entire program. The event loop solves this by enabling non-blocking concurrency on a single thread.

The Event Loop#

flowchart TD
 subgraph Runtime
 CS["Call Stack<br>(one frame at a time)"]
 WA["Web APIs / Node APIs<br>(setTimeout, fetch, fs)"]
 MQ["Microtask Queue<br>(Promise callbacks, queueMicrotask)"]
 TQ["Task Queue (Macrotask)<br>(setTimeout, setInterval, I/O)"]
 EL["Event Loop"]
 end
 
 CS -->|"Async call"| WA
 WA -->|"Callback ready"| TQ
 WA -->|"Promise resolved"| MQ
 EL -->|"Stack empty?"| MQ
 MQ -->|"Drain ALL microtasks"| CS
 EL -->|"Microtasks empty?"| TQ
 TQ -->|"ONE task"| CS

Execution Order Rules#

Synchronous code runs first (fills the call stack)
When the stack is empty, the event loop checks the microtask queue and drains it completely
After all microtasks are processed, one macrotask is dequeued and executed
After that macrotask, microtasks are drained again before the next macrotask

console.log("1 - sync");

setTimeout(() => console.log("2 - macrotask"), 0);

Promise.resolve().then(() => console.log("3 - microtask"));

queueMicrotask(() => console.log("4 - microtask"));

Promise.resolve().then(() => {
 console.log("5 - microtask");
 queueMicrotask(() => console.log("6 - nested microtask"));
});

console.log("7 - sync");

// Output: 1, 7, 3, 4, 5, 6, 2
// All sync first, then ALL microtasks (including nested), then macrotask

Microtasks vs Macrotasks#

Microtasks	Macrotasks
`Promise.then/catch/finally`	`setTimeout` / `setInterval`
`queueMicrotask()`	`setImmediate` (Node.js)
`MutationObserver`	I/O callbacks
`process.nextTick` (Node.js, even higher priority)	`requestAnimationFrame` (browser)

Callbacks#

The original async pattern — pass a function to be called when the operation completes.

TypeScript: The Type System

Mon, 01 Jan 0001 00:00:00 +0000

What TypeScript Is#

TypeScript is a structural type system layered on top of JavaScript. Types exist only at compile time — they are completely erased before execution. The output is plain JavaScript.

flowchart LR
 TS[".ts source"] --> TSC["tsc (compiler)"]
 TSC --> TC["Type Checking<br>(compile-time only)"]
 TSC --> JS[".js output<br>(no types)"]
 TC -->|"Errors"| Dev["Developer"]
 JS --> Runtime["V8 / Node.js"]

Structural vs Nominal Typing#

// TypeScript is STRUCTURAL — shape matters, not name
interface Point { x: number; y: number }
interface Coordinate { x: number; y: number }

const p: Point = { x: 1, y: 2 };
const c: Coordinate = p; // OK! Same shape = compatible

// In Java/C# (nominal), this would fail — different types despite same shape

Basic Types#

// Primitives
const name: string = "Alice";
const age: number = 30;
const active: boolean = true;
const big: bigint = 9007199254740993n;
const id: symbol = Symbol("id");

// Special types
const nothing: null = null;
const missing: undefined = undefined;
const anything: any = "escape hatch"; // disables type checking
const safe: unknown = getUserInput(); // type-safe alternative to any

// void — function returns nothing
function log(msg: string): void { console.log(msg); }

// never — function never returns (throws or infinite loop)
function fail(msg: string): never { throw new Error(msg); }

Arrays and Tuples#

// Arrays (homogeneous)
const numbers: number[] = [1, 2, 3];
const names: Array<string> = ["a", "b"]; // generic syntax

// Tuples (fixed-length, heterogeneous)
const pair: [string, number] = ["age", 30];
const triple: [number, number, number] = [41.38, 2.17, 12];

// Named tuples (documentation only)
type Coordinate = [lat: number, lng: number, alt?: number];

// Rest elements in tuples
type StringAndNumbers = [string, ...number[]];
const data: StringAndNumbers = ["header", 1, 2, 3, 4];

Interfaces and Type Aliases#

Interfaces#

interface User {
 readonly id: string; // immutable after creation
 name: string;
 email: string;
 age?: number; // optional
 role: "admin" | "user"; // literal type
}

// Extension
interface Admin extends User {
 permissions: string[];
 department: string;
}

// Declaration merging (interfaces can be extended across files)
interface Window {
 myApp: { version: string }; // adds to existing Window interface
}

// Index signatures
interface Dictionary {
 [key: string]: string; // any string key → string value
}

// Call signatures
interface Formatter {
 (value: unknown): string;
 locale: string;
}

Type Aliases#

// Unions (OR)
type Status = "loading" | "success" | "error";
type ID = string | number;

// Intersections (AND)
type Admin = User & { permissions: string[] };

// Mapped types, conditional types, template literals — only with type
type Readonly<T> = { readonly [K in keyof T]: T[K] };

// Function types
type Handler = (event: Event) => void;
type AsyncFn<T> = () => Promise<T>;

When to Use Which#

Use `interface` when…	Use `type` when…
Defining object shapes	Unions or intersections
You want declaration merging	Mapped/conditional types
Extending other interfaces	Aliasing primitives or tuples
Public API contracts	Complex type computations

Generics#

Generics parameterize types, enabling reusable code that works with any type while preserving type safety.

Node.js Runtime and Architecture

Mon, 01 Jan 0001 00:00:00 +0000

What Node.js Is#

Node.js is a JavaScript runtime built on Chrome’s V8 engine. It takes JavaScript out of the browser and into servers, CLIs, and system tools. Its key innovation: non-blocking I/O on a single thread using an event-driven architecture.

flowchart TD
 subgraph Node["Node.js Runtime"]
 V8["V8 Engine<br>(JavaScript execution)"]
 Bindings["C++ Bindings<br>(bridge JS ↔ system)"]
 UV["libuv<br>(async I/O, event loop)"]
 SL["Standard Library<br>(fs, http, crypto, stream...)"]
 end
 
 UV --> TP["Thread Pool<br>(4 threads default)<br>DNS, fs, crypto, zlib"]
 UV --> OS["OS Async Primitives<br>epoll (Linux)<br>kqueue (macOS)<br>IOCP (Windows)"]
 
 App["Your JavaScript"] --> SL
 SL --> Bindings
 Bindings --> UV

The Node.js Event Loop (Detailed)#

Unlike the simplified browser event loop, Node.js has phases:

npm Ecosystem and Package Management

Mon, 01 Jan 0001 00:00:00 +0000

The JavaScript Package Ecosystem#

npm (Node Package Manager) is the world’s largest software registry with over 2 million packages. Understanding how it works — dependency resolution, versioning, security — is essential for any JavaScript project.

package.json#

The manifest file that defines your project:

{
 "name": "@myorg/api-server",
 "version": "2.1.0",
 "description": "REST API server",
 "type": "module",
 "main": "./dist/index.js",
 "types": "./dist/index.d.ts",
 "exports": {
 ".": {
 "import": "./dist/index.js",
 "require": "./dist/index.cjs",
 "types": "./dist/index.d.ts"
 },
 "./utils": {
 "import": "./dist/utils.js",
 "types": "./dist/utils.d.ts"
 }
 },
 "scripts": {
 "dev": "node --watch src/index.js",
 "build": "tsc",
 "test": "vitest",
 "test:coverage": "vitest --coverage",
 "lint": "eslint src/",
 "format": "prettier --write src/",
 "prepare": "husky"
 },
 "dependencies": {
 "express": "^4.18.2",
 "zod": "^3.22.0"
 },
 "devDependencies": {
 "typescript": "^5.3.0",
 "vitest": "^1.0.0",
 "@types/express": "^4.17.21"
 },
 "peerDependencies": {
 "react": "^18.0.0"
 },
 "engines": {
 "node": ">=20.0.0"
 },
 "files": ["dist/"],
 "license": "MIT"
}

Dependency Types#

Field	Installed in	Purpose
`dependencies`	Production + dev	Runtime requirements
`devDependencies`	Dev only	Build tools, test frameworks, linters
`peerDependencies`	NOT auto-installed	“I work with this, but you provide it”
`optionalDependencies`	If available	Non-critical enhancements

Semantic Versioning (SemVer)#

MAJOR.MINOR.PATCH
 │ │ └── Bug fixes (backward-compatible)
 │ └──────── New features (backward-compatible)
 └─────────────── Breaking changes

Version Ranges#

Syntax	Meaning	Example: `^1.2.3`
`1.2.3`	Exact	Only 1.2.3
`^1.2.3`	Compatible	≥1.2.3, <2.0.0
`~1.2.3`	Patch-level	≥1.2.3, <1.3.0
`>=1.0.0`	Minimum	1.0.0 or higher
`1.x`	Any minor/patch	≥1.0.0, <2.0.0
`*`	Any	Latest

flowchart LR
 subgraph "^1.2.3 (caret)"
 A["1.2.3"] --> B["1.2.4 ✓"]
 B --> C["1.3.0 ✓"]
 C --> D["1.9.9 ✓"]
 D --> E["2.0.0 ✗"]
 end

Best practice: Use ^ (caret) for most dependencies. Use exact versions for critical production dependencies where even patch updates could cause issues.

Error Handling Patterns

Mon, 01 Jan 0001 00:00:00 +0000

Error Philosophy in JavaScript#

JavaScript has a unique error landscape: dynamic typing means errors that other languages catch at compile time only surface at runtime. TypeScript helps, but runtime errors from external data, network failures, and edge cases are inevitable.

The Error Object#

// Built-in error types
new Error("Something went wrong"); // generic
new TypeError("Expected string, got number"); // wrong type
new RangeError("Index out of bounds"); // value out of range
new ReferenceError("x is not defined"); // undeclared variable
new SyntaxError("Unexpected token"); // parse error
new URIError("Invalid URI"); // malformed URI

// Error properties
const err = new Error("Connection failed");
err.message; // "Connection failed"
err.name; // "Error"
err.stack; // Stack trace (non-standard but universal)
err.cause; // Chained error (ES2022)

Custom Error Classes#

class AppError extends Error {
 constructor(
 message: string,
 public readonly code: string,
 public readonly statusCode: number = 500,
 options?: ErrorOptions
 ) {
 super(message, options);
 this.name = "AppError";
 }
}

class NotFoundError extends AppError {
 constructor(resource: string, id: string) {
 super(`${resource} with id '${id}' not found`, "NOT_FOUND", 404);
 this.name = "NotFoundError";
 }
}

class ValidationError extends AppError {
 constructor(
 message: string,
 public readonly fields: Record<string, string>
 ) {
 super(message, "VALIDATION_ERROR", 400);
 this.name = "ValidationError";
 }
}

// Usage with error cause (ES2022)
async function fetchUser(id: string) {
 try {
 const response = await fetch(`/api/users/${id}`);
 if (!response.ok) throw new Error(`HTTP ${response.status}`);
 return await response.json();
 } catch (err) {
 throw new AppError("Failed to fetch user", "FETCH_ERROR", 502, { cause: err });
 }
}

Try/Catch Patterns#

Synchronous#

function parseJSON<T>(raw: string): T {
 try {
 return JSON.parse(raw);
 } catch (err) {
 throw new ValidationError("Invalid JSON input", {
 raw: "Must be valid JSON"
 });
 }
}

// Catch specific error types
function handleError(err: unknown) {
 if (err instanceof NotFoundError) {
 return { status: 404, body: { error: err.message } };
 }
 if (err instanceof ValidationError) {
 return { status: 400, body: { error: err.message, fields: err.fields } };
 }
 // Unknown error — don't expose internals
 console.error("Unexpected error:", err);
 return { status: 500, body: { error: "Internal server error" } };
}

Asynchronous#

// async/await — try/catch works naturally
async function processOrder(orderId: string) {
 try {
 const order = await fetchOrder(orderId);
 const payment = await chargePayment(order);
 await sendConfirmation(order, payment);
 return { success: true };
 } catch (err) {
 if (err instanceof PaymentError) {
 await refund(orderId);
 throw new AppError("Payment failed", "PAYMENT_FAILED", 402, { cause: err });
 }
 throw err; // re-throw unexpected errors
 } finally {
 await releaseInventoryLock(orderId); // always runs
 }
}

The Result Pattern#

Instead of throwing exceptions for expected failures, return a discriminated union that forces the caller to handle both paths:

Testing in JavaScript/TypeScript

Mon, 01 Jan 0001 00:00:00 +0000

Testing Philosophy#

Tests exist to give you confidence that your code works and will continue to work as it changes. The goal is not 100% coverage — it’s meaningful coverage of behavior that matters.

flowchart TD
 subgraph Pyramid["Testing Pyramid"]
 direction TB
 E2E["E2E Tests<br>(few, slow, expensive)"]
 INT["Integration Tests<br>(moderate, test boundaries)"]
 UNIT["Unit Tests<br>(many, fast, isolated)"]
 end
 
 E2E -.->|"Confidence in<br>user flows"| E2E
 INT -.->|"Confidence in<br>component interaction"| INT
 UNIT -.->|"Confidence in<br>logic correctness"| UNIT

Vitest (Modern Test Runner)#

Vitest is the standard test runner for modern JavaScript/TypeScript projects. It’s compatible with Jest’s API but faster (native ESM, Vite-powered).

Module Resolution and Build Systems

Mon, 01 Jan 0001 00:00:00 +0000

Why Module Resolution Matters#

Module resolution is the process of turning an import specifier (import x from 'foo') into an actual file on disk. It’s where many TypeScript/Node.js issues hide — mismatched configs, missing extensions, incompatible module formats, and confusing error messages.

Module Formats#

CommonJS (CJS)#

// Synchronous, dynamic, Node.js original
const fs = require('fs');
const { add } = require('./math');

module.exports = { myFunction };
exports.helper = function() {};

ES Modules (ESM)#

// Asynchronous, static, standard
import fs from 'node:fs';
import { add } from './math.js'; // extension required in Node.js ESM

export function myFunction() {}
export default class MyClass {}

Interoperability#

// ESM can import CJS (default export = module.exports)
import cjsModule from './legacy.cjs'; // gets module.exports as default

// CJS cannot require() ESM synchronously
// Must use dynamic import:
const esmModule = await import('./modern.mjs');

Node.js Resolution Algorithm#

flowchart TD
 A["import 'specifier'"] --> B{Starts with<br>'.' or '..'?}
 B -->|Yes| REL["Relative Resolution"]
 B -->|No| C{Starts with<br>'node:'?}
 C -->|Yes| BUILTIN["Built-in Module<br>(fs, path, http...)"]
 C -->|No| PKG["Package Resolution"]
 
 REL --> R1["Resolve from current file's directory"]
 R1 --> R2["Check: exact path → .js → .json → /index.js"]
 
 PKG --> P1["Walk up directories looking for node_modules/"]
 P1 --> P2["Found package? Check package.json 'exports'"]
 P2 --> P3["No exports? Check 'main' field"]
 P3 --> P4["No main? Try index.js"]

ESM Resolution (Strict)#

In Node.js ESM mode, resolution is strict:

Vue Ecosystem: Vue 3, Vite, and Nuxt

Mon, 01 Jan 0001 00:00:00 +0000

Vue 3 Core Concepts#

Vue is a progressive framework — you can adopt it incrementally, from enhancing a single page to building a full SPA. Vue 3 introduced the Composition API, a new reactivity system, and significant performance improvements.

flowchart TD
 App["Vue Application"] --> Components["Components<br/>(SFC: .vue files)"]
 Components --> Template["Template<br/>(declarative rendering)"]
 Components --> Script["Script<br/>(logic + state)"]
 Components --> Style["Style<br/>(scoped CSS)"]
 Script --> Reactivity["Reactivity System<br/>(ref, reactive, computed)"]
 Script --> Lifecycle["Lifecycle Hooks<br/>(onMounted, onUnmounted)"]
 Script --> Composables["Composables<br/>(reusable logic)"]

Single-File Components (SFC)#

<script setup lang="ts">
import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
 count.value++
}
</script>

<template>
 <button @click="increment">Count: {{ count }} (doubled: {{ doubled }})</button>
</template>

<style scoped>
button { padding: 0.5rem 1rem; }
</style>

<script setup> is the recommended syntax — it compiles to a more efficient render function and provides better TypeScript inference than the Options API.

React Ecosystem: React and Next.js

Mon, 01 Jan 0001 00:00:00 +0000

React Core Model#

React is a library for building user interfaces from components. Its core idea: UI is a function of state. When state changes, React efficiently re-renders only what’s needed through a virtual DOM diffing algorithm.

flowchart TD
 State["State Change"] --> Render["Render Phase<br/>(build virtual DOM)"]
 Render --> Diff["Reconciliation<br/>(diff old vs new)"]
 Diff --> Commit["Commit Phase<br/>(apply DOM updates)"]
 Commit --> Effects["Effects Run<br/>(useEffect callbacks)"]

JSX and Components#

// Function component with TypeScript
interface UserCardProps {
 name: string
 email: string
 role?: 'admin' | 'user'
}

function UserCard({ name, email, role = 'user' }: UserCardProps) {
 return (
 <div className="card">
 <h2>{name}</h2>
 <p>{email}</p>
 {role === 'admin' && <span className="badge">Admin</span>}
 </div>
 )
}

JSX compiles to React.createElement() calls. It’s not HTML — it’s JavaScript expressions that produce a virtual DOM tree.

JavaScript / TypeScript / Node.js on Software Engineering Learning Paths

JavaScript Fundamentals

The Language at a Glance#

Types and the Type System#

Prototypes and `this`

The Prototype Chain#

Property Lookup Mechanics#

Property Shadowing#

Property Descriptors#

Constructor Functions and new#

ES6+ Features

The Modern JavaScript Revolution#

Destructuring#

Object Destructuring#

Array Destructuring#

Function Parameter Destructuring#

Spread and Rest Operators#

Asynchronous JavaScript

Why Async Matters#

The Event Loop#

Execution Order Rules#

Microtasks vs Macrotasks#

Callbacks#

TypeScript: The Type System

What TypeScript Is#

Structural vs Nominal Typing#

Basic Types#

Arrays and Tuples#

Interfaces and Type Aliases#

Interfaces#

Type Aliases#

When to Use Which#

Generics#

Node.js Runtime and Architecture

What Node.js Is#

The Node.js Event Loop (Detailed)#

npm Ecosystem and Package Management

The JavaScript Package Ecosystem#

package.json#

Dependency Types#

Semantic Versioning (SemVer)#

Version Ranges#

Error Handling Patterns

Error Philosophy in JavaScript#

The Error Object#

Custom Error Classes#

Try/Catch Patterns#

Synchronous#

Asynchronous#

The Result Pattern#

Testing in JavaScript/TypeScript

Testing Philosophy#

Vitest (Modern Test Runner)#

Module Resolution and Build Systems

Why Module Resolution Matters#

Module Formats#

CommonJS (CJS)#

ES Modules (ESM)#

Interoperability#

Node.js Resolution Algorithm#

ESM Resolution (Strict)#

Vue Ecosystem: Vue 3, Vite, and Nuxt

Vue 3 Core Concepts#

Single-File Components (SFC)#

React Ecosystem: React and Next.js

React Core Model#

JSX and Components#

Constructor Functions and `new`#