Modern JavaScript Fundamentals Class Notes (2025)
Date: September 12, 2025
Overview These notes summarize the modern JavaScript you ll actually use in production:
modules, async patterns, performance tips, and common pitfalls. Designed for quick revision and
interview prep.
1) Language Basics
- Values & Types: primitives (string, number, bigint, boolean, null, undefined, symbol) vs
objects.
- Strict mode by default in modules; prefer `const` and `let` over `var`.
- Template literals for readable strings; destructuring for objects/arrays; rest/spread for
ergonomics.
// Destructuring with defaults
const {host = 'localhost', port = 3000} = config ?? {};
const [first, ...rest] = items;
2) Functions & Scope
- Arrow functions close over `this`; use normal functions for methods that require dynamic
`this`.
- Default parameters, named options objects, and pure functions improve testability.
function fetchUser(id, {signal} = {}) {
return fetch(`/api/users/${id}`, {signal}).then(r => r.json());
}
3) Modules
- Use ES modules (`import`/`export`) with clear index files and barrel exports only where
helpful.
- Avoid hidden side-effects in module top level; do initialization explicitly.
// user/index.js
export {getUser, saveUser} from './repo.js';
export {validateUser} from './validate.js';
4) Async & Concurrency
- Prefer `async/await` with `try/catch`; use `Promise.allSettled` for batch safety.
- Abortable fetch via `AbortController` to prevent orphaned requests.
© Educational Notes Use freely with attribution | Page 1/3
Modern JavaScript Fundamentals Class Notes (2025)
const controller = new AbortController();
try {
const res = await fetch(url, {signal: controller.signal});
const data = await res.json();
} catch (e) {
if (e.name === 'AbortError') {/* handle cancel */}
}
5) DOM & Events
- Query with `document.querySelector`; delegate events for dynamic content.
- Use `IntersectionObserver` for lazy-loading and `ResizeObserver` for responsive logic.
const io = new IntersectionObserver(entries => {
for (const e of entries) if (e.isIntersecting) e.target.classList.add('visible');
});
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
6) Performance Essentials
- Avoid layout thrash: batch reads/writes; debounce scroll/resize; use requestIdleCallback for
non-urgent work.
- Ship less JS: code-split, lazy-load, prefer CSS for effects when possible.
7) Patterns
- Dependency injection for testability; command/query separation; strategy & adapter for
extensibility.
// Strategy example
const strategies = {
sms: payload => sendSMS(payload),
email: payload => sendEmail(payload),
};
function notify(kind, payload) { return strategies[kind](payload); }
8) Testing & Tooling
- Vitest/Jest for unit tests; Playwright/Cypress for E2E; MSW for network mocking.
- ESLint + Prettier + TypeScript for correctness and consistency.
9) Pitfalls
© Educational Notes Use freely with attribution | Page 2/3
Modern JavaScript Fundamentals Class Notes (2025)
- Floating point: use integers or libraries for money; time zones: prefer UTC + Intl API.
- Mutability leaks: freeze config objects; avoid sharing mutable state between modules.
10) Quick Exercises
- Write a function that retries fetch with exponential backoff.
- Implement a cancellable async task using AbortController.
© Educational Notes Use freely with attribution | Page 3/3
