"5" + 3      // "53" (number → string, concatenation)
"5" - 3      // 2 (string → number, subtraction)
"5" * "2"    // 10 (both → number)
true + true  // 2 (boolean → number)
[] + []      // "" (arrays → strings → concatenation)
[] + {}      // "[object Object]"
{} + []      // 0 (block statement + unary plus)

// var — function-scoped, hoisted
function example() {
    console.log(x); // undefined (hoisted, not initialized)
    var x = 10;
}

// let — block-scoped, not hoisted (TDZ)
{
    // console.log(y); // ReferenceError: temporal dead zone
    let y = 20;
}

// const — block-scoped, binding is immutable (value may be mutable)
const arr = [1, 2, 3];
arr.push(4);      // OK — mutating the array
// arr = [5, 6];  // TypeError — reassigning the binding

function createCounter() {
    let count = 0; // enclosed variable
    return {
        increment: () => ++count,
        getCount: () => count,
    };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.getCount();  // 2
// count is not accessible directly — it's enclosed

const animal = {
    speak() { return `${this.name} makes a sound`; }
};

const dog = Object.create(animal);
dog.name = "Rex";
dog.speak(); // "Rex makes a sound" — found via prototype chain

class Timer {
    constructor() {
        this.seconds = 0;
    }
    start() {
        // Arrow function captures `this` from start()
        setInterval(() => {
            this.seconds++; // works — `this` is the Timer instance
        }, 1000);
    }
}

// Object destructuring
const { name, age, city = "Unknown" } = user;

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];

// Function parameters
function greet({ name, greeting = "Hello" }) {
    return `${greeting}, ${name}!`;
}

// Spread — expand iterable
const merged = [...arr1, ...arr2];
const copy = { ...original, overridden: "value" };

// Rest — collect remaining
function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}

// Named exports
export function add(a, b) { return a + b; }
export const PI = 3.14159;

// Default export
export default class Calculator { ... }

// Imports
import Calculator, { add, PI } from './math.js';
import * as math from './math.js';

// Custom iterator
const range = {
    [Symbol.iterator]() {
        let i = 0;
        return {
            next() {
                return i < 5 ? { value: i++, done: false } : { done: true };
            }
        };
    }
};

for (const n of range) console.log(n); // 0, 1, 2, 3, 4

// Generator function
function* fibonacci() {
    let [a, b] = [0, 1];
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

// Optional chaining — short-circuits to undefined
const city = user?.address?.city;
const first = arr?.[0];
const result = obj?.method?.();

// Nullish coalescing — only null/undefined trigger fallback
const port = config.port ?? 3000;
// Unlike ||, doesn't treat 0 or "" as falsy

console.log("1");                          // sync
setTimeout(() => console.log("2"), 0);     // macrotask
Promise.resolve().then(() => console.log("3")); // microtask
console.log("4");                          // sync

// Output: 1, 4, 3, 2

// Callback hell
fs.readFile("a.txt", (err, a) => {
    fs.readFile("b.txt", (err, b) => {
        fs.readFile("c.txt", (err, c) => {
            // deeply nested, hard to handle errors
        });
    });
});

// Promises
readFile("a.txt")
    .then(a => readFile("b.txt"))
    .then(b => readFile("c.txt"))
    .catch(err => console.error(err));

// Async/await (syntactic sugar over Promises)
async function readAll() {
    try {
        const a = await readFile("a.txt");
        const b = await readFile("b.txt");
        const c = await readFile("c.txt");
        return [a, b, c];
    } catch (err) {
        console.error(err);
    }
}

// Parallel — all at once
const [users, posts, comments] = await Promise.all([
    fetchUsers(),
    fetchPosts(),
    fetchComments(),
]);

// Race — first to resolve/reject
const result = await Promise.race([
    fetchData(),
    timeout(5000),
]);

// allSettled — wait for all, regardless of success/failure
const results = await Promise.allSettled([
    fetchA(), fetchB(), fetchC()
]);
// [{status: "fulfilled", value: ...}, {status: "rejected", reason: ...}]

// Primitives
let name: string = "Alice";
let age: number = 30;
let active: boolean = true;

// Arrays
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["a", "b"];

// Tuples
let pair: [string, number] = ["age", 30];

// Enums
enum Direction { Up, Down, Left, Right }

// Literal types
type Status = "loading" | "success" | "error";

// Interface — extendable, for object shapes
interface User {
    id: number;
    name: string;
    email: string;
    role?: string; // optional
    readonly createdAt: Date; // immutable
}

// Type alias — for unions, intersections, mapped types
type Result<T> = { success: true; data: T } | { success: false; error: string };

// Intersection
type Admin = User & { permissions: string[] };

// Generic function
function first<T>(arr: T[]): T | undefined {
    return arr[0];
}

// Generic constraint
function longest<T extends { length: number }>(a: T, b: T): T {
    return a.length >= b.length ? a : b;
}

// Generic interface
interface Repository<T> {
    findById(id: string): Promise<T | null>;
    save(entity: T): Promise<T>;
    delete(id: string): Promise<void>;
}

// Partial — all properties optional
type PartialUser = Partial<User>;

// Required — all properties required
type RequiredUser = Required<User>;

// Pick — subset of properties
type UserPreview = Pick<User, "id" | "name">;

// Omit — exclude properties
type UserWithoutEmail = Omit<User, "email">;

// Record — key-value map
type UserMap = Record<string, User>;

// ReturnType — extract return type
type FetchResult = ReturnType<typeof fetchUser>;

function process(value: string | number | null) {
    if (value === null) return; // narrowed: null eliminated
    
    if (typeof value === "string") {
        // narrowed: value is string
        console.log(value.toUpperCase());
    } else {
        // narrowed: value is number
        console.log(value.toFixed(2));
    }
}

// Discriminated unions
type Shape =
    | { kind: "circle"; radius: number }
    | { kind: "rectangle"; width: number; height: number };

function area(shape: Shape): number {
    switch (shape.kind) {
        case "circle": return Math.PI * shape.radius ** 2;
        case "rectangle": return shape.width * shape.height;
    }
}

   ┌───────────────────────────┐
┌─>│         timers            │ ← setTimeout, setInterval
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │ ← I/O callbacks deferred
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │ ← internal
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │          poll             │ ← I/O events, new connections
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │          check            │ ← setImmediate
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │      close callbacks      │ ← socket.on('close')
└──┴───────────────────────────┘

// CommonJS (CJS) — synchronous, Node.js original
const fs = require('fs');
module.exports = { myFunction };

// ES Modules (ESM) — async, standard, future
import fs from 'node:fs';
export function myFunction() { ... }

import { createReadStream, createWriteStream } from 'node:fs';
import { pipeline } from 'node:stream/promises';
import { createGzip } from 'node:zlib';

// Process large files without loading into memory
await pipeline(
    createReadStream('input.log'),
    createGzip(),
    createWriteStream('input.log.gz')
);

{
    "name": "my-app",
    "version": "1.0.0",
    "type": "module",
    "scripts": {
        "dev": "node --watch src/index.js",
        "build": "tsc",
        "test": "vitest",
        "lint": "eslint src/"
    },
    "dependencies": {
        "express": "^4.18.2"
    },
    "devDependencies": {
        "typescript": "^5.3.0",
        "vitest": "^1.0.0"
    }
}

{
    "workspaces": ["packages/*"]
}

my-monorepo/
├── package.json
├── packages/
│   ├── shared/
│   │   └── package.json
│   ├── frontend/
│   │   └── package.json
│   └── backend/
│       └── package.json

// Throw and catch
function parseConfig(raw: string): Config {
    try {
        return JSON.parse(raw);
    } catch (e) {
        throw new ConfigError(`Invalid config: ${e.message}`);
    }
}

// Async/await — try/catch works naturally
async function fetchUser(id: string): Promise<User> {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
        throw new ApiError(response.status, await response.text());
    }
    return response.json();
}

type Result<T, E = Error> =
    | { ok: true; value: T }
    | { ok: false; error: E };

function divide(a: number, b: number): Result<number, string> {
    if (b === 0) return { ok: false, error: "Division by zero" };
    return { ok: true, value: a / b };
}

const result = divide(10, 0);
if (result.ok) {
    console.log(result.value);
} else {
    console.error(result.error);
}

import { describe, it, expect, vi } from 'vitest';
import { fetchUser } from './api';

describe('fetchUser', () => {
    it('returns user data for valid id', async () => {
        const user = await fetchUser('123');
        expect(user).toEqual({ id: '123', name: 'Alice' });
    });

    it('throws on 404', async () => {
        await expect(fetchUser('999')).rejects.toThrow('Not found');
    });
});

// Mocking
vi.mock('./http', () => ({
    get: vi.fn().mockResolvedValue({ data: { id: '1', name: 'Alice' } }),
}));

// Spying
const spy = vi.spyOn(console, 'log');
doSomething();
expect(spy).toHaveBeenCalledWith('expected output');

// tsconfig.json
{
    "compilerOptions": {
        "module": "ESNext",
        "moduleResolution": "bundler", // or "node16"
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"],
            "@shared/*": ["packages/shared/src/*"]
        }
    }
}

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

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

<template>
  <button @click="count++">{{ count }} (× 2 = {{ doubled }})</button>
</template>

export function useFetch<T>(url: () => string) {
  const data = ref<T | null>(null)
  const loading = ref(true)
  watchEffect(async () => {
    loading.value = true
    data.value = await fetch(url()).then(r => r.json())
    loading.value = false
  })
  return { data, loading }
}

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
}

function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key)
    return stored ? JSON.parse(stored) : initial
  })
  useEffect(() => { localStorage.setItem(key, JSON.stringify(value)) }, [key, value])
  return [value, setValue] as const
}