# Dojocodinglabs Code Sensei Javascript

> JavaScript — CodeSensei Teaching Module

- Skill: `tomevault-io/dojocodinglabs-code-sensei-javascript` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/dojocodinglabs-code-sensei-javascript`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/dojocodinglabs-code-sensei-javascript/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/dojocodinglabs-code-sensei-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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/dojocodinglabs) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->