JavaScript – Fast-Track Student
Guide
Basics → ES6+ → DOM → Async →
Tooling
Use in Web, [Link], and Projects
Why JavaScript?
• Runs in every browser and on servers
([Link])
• Powers interactivity, SPAs, and modern web
apps
• Huge ecosystem: NPM, frameworks, tooling
Where JS Runs
• Browser: DOM + BOM + Fetch API
• Server: [Link] (fs, http, express)
• Hybrid: React Native, Electron, Deno
Your First Script
• <script>[Link]('Hello JS');</script>
• Place before </body> or use defer to avoid
blocking
Variables
• let – block-scoped, mutable
• const – block-scoped, immutable binding
• var – function-scoped (avoid in modern code)
Data Types
• Primitive: string, number, boolean, null,
undefined, symbol, bigint
• Reference: object, array, function, date, map,
set
• typeof null === 'object' (legacy quirk)
Operators & Coercion
• Arithmetic, comparison, logical (&& || ??)
• === vs == (prefer strict equality)
• Truthy/falsy: 0, '', null, undefined, NaN, false
Strings & Templates
• Template literals: `Hello ${name}`
• Methods: slice, includes, split, join,
toLowerCase
• Multi-line strings and interpolation
Numbers & Math
• NaN, Infinity, parseInt/parseFloat, Number()
• Math: round, floor, ceil, random
• [Link] for formatting
Arrays
• Create: [], [Link](), new Array(n).fill(0)
• Iterate: for...of, forEach, map, filter, reduce
• Mutate vs immutable: push/splice vs spread
[...arr]
Objects
• Literals { key: value }
• Access: dot vs bracket, optional chaining
obj?.a?.b
• [Link]/values/entries, structuredClone
Functions
• Declarations vs expressions vs arrow functions
• Default params, rest (...args), spread
• Higher-order functions & callbacks
Scope & Hoisting
• Function vs block scope, lexical scope
• Hoisting: var/function hoisted; let/const TDZ
• Closures: functions remember outer scope
Control Flow
• if/else, switch, for, while
• for...of (values) vs for...in (keys)
• break, continue, labels (rare)
Modules (ESM)
• export const x = 1; export default fn
• import x, { y } from './[Link]'
• Use type="module" in browser or bundlers
DOM Basics
• Select: querySelector / querySelectorAll
• Create & update: createElement, textContent,
classList
• Render list: [Link] = ...
(sanitize!)
Events
• addEventListener('click', handler)
• Event object: target, key, preventDefault
• Delegation: listen on parent for dynamic
elements
Forms & Validation
• Access inputs via name/id
• Constraint validation API: required, pattern
• Fetch formData = new FormData(form)
Fetch & HTTP
• fetch(url, { method, headers, body }) returns
Promise
• await fetch(...).then(r => [Link]())
• Handle errors: try/catch and [Link]
Async Patterns
• Callbacks → Promises → async/await
• [Link] / allSettled / race
• Microtasks vs macrotasks (then vs setTimeout)
Storage
• localStorage/sessionStorage (strings only)
• [Link] / [Link]
• IndexedDB for larger structured data
ES6+ Essentials
• let/const, arrow fn, template literals
• Destructuring, default values, rest/spread
• Optional chaining ?. and nullish coalescing ??
Error Handling & Debugging
• try/catch/finally, throw new Error()
• console: log, warn, error, table, time
• DevTools: Sources, breakpoints, network
Performance Tips
• Minimize DOM reflows; batch updates
• Use requestAnimationFrame for animations
• Debounce/throttle frequent events
Tooling
• NPM scripts, Prettier, ESLint
• Bundlers: Vite, Webpack, Parcel
• Transpilers: Babel; TypeScript basics
Testing
• Unit tests: Jest/Vitest
• DOM testing: Testing Library
• End-to-end: Playwright/Cypress
[Link] Intro
• Non-blocking I/O; npm ecosystem
• Build a simple HTTP API with Express
• Use fetch/axios to call external APIs
Mini Project Ideas
• Todo app with localStorage
• Weather app using Fetch API
• Quiz app with dynamic DOM and scoring
Capstone Project Outline
• SPA with router (vanilla or framework)
• Auth (fake JSON server or real API)
• Testing, linting, and CI basics
Common Interview Qs
• Event loop & call stack
• var vs let vs const; hoisting
• this binding and arrow functions
Quick Quiz (5 Qs)
• 1) Difference between == and ===?
• 2) What does 'use strict' do?
• 3) [Link] vs allSettled?
• 4) What is closure?
• 5) Why use debouncing?
Further Learning
• MDN Web Docs, [Link]
• Build small projects weekly
• Read source code of libraries
