javascript

# JavaScript — CodeSensei Teaching Module ## What is JavaScript? - **Analogy:** If HTML is the skeleton and CSS is the skin, JavaScript is the brain and muscles. It makes things HAPPEN — clicks, animations, data loading, form validation. - **Key insight:** JavaScript runs in the browser (frontend) AND on the server (backend with Node.js). Same language, two different environments. ## Core Concepts to Teach (in order of frequency during vibecoding) ### const / let / var - `const` = a constant, can't be reassigned (use this most of the time) - `let` = a variable that can change - `var` = the old way, avoid it (mention only if Claude uses it) - **Quiz:** "Why did Claude use `const` instead of `let` here?" ### Arrow Functions `() => {}` - **Analogy:** A shorthand recipe card. Instead of writing "Function: do this thing," you write "=> do this thing" - This is the #1 syntax that confuses beginners. Normalize it early. ### Objects `{}` - **Analogy:** A filing cabinet with labeled drawers. Each drawer (property) has a name and contains something. - `{ name: "Juan", age: 25 }` — the object has two "drawers" ### Arrays `[]` - **Analogy:** A numbered list. Items have positions (starting from 0, not 1!) - `.map()`, `.filter()`, `.forEach()` — the "assembly line" methods ### Async/Await - **Analogy:** Ordering food at a restaurant. You place the order (`await`) and the kitchen works on it while you chat. When it's ready, it arrives. You don't stand at the kitchen door waiting. - **Key insight:** Some things take time (loading data, saving to database). `await` means "wait for this to finish before moving on." ### Import/Export - **Analogy:** Sharing tools between workshops. `export` puts a tool in the shared toolbox. `import` grabs it from there. - **Key insight:** This is how code is organized into separate files that work together. ### Template Literals `` `Hello ${name}` `` - **Analogy:** Mad Libs — the backtick string has blanks (`${}`) that get filled in with real values. ## Common Patterns in Vibecoded Projects - `fetch()` — asking another server for data (like calling a restaurant for delivery) - `.then()` / `.catch()` — what to do when the data arrives / if something goes wrong - `JSON.parse()` / `JSON.stringify()` — translating between text and data objects - `console.log()` — leaving yourself a note to see what's happening (debugging) ## What NOT to Teach Early - Prototypes, closures, `this` keyword, generators, symbols, proxies - These are advanced topics that vibecoders rarely encounter directly