This guide is for mentors. It outlines how to run the session, what to emphasize, and why we introduce certain terminology.
By the end of this session, trainees should:
- Understand when to use
forEach,map, andfilter - Be able to chain array methods together
- Write arrow functions with implicit and explicit returns
- Connect array methods to the Data → Logic → Rendering model
| Term | Why we introduce it |
|---|---|
| Declarative vs Imperative | Frames the shift from for-loops to array methods. Helps them understand why this style is preferred. |
| Higher-order function | They'll encounter this term in docs, tutorials, and interviews. Demystifies "functions that take functions." |
| Side effect | Critical for understanding forEach vs other methods. Foundation for async concepts in Week 2. |
| Predicate | Precise term for filter functions. Common in documentation and libraries. |
| Pipeline | Mental model for chaining. Useful metaphor they'll use throughout their career. |
- Connect to the course theme: Data → Logic → Rendering
- Array methods live in the Logic layer - transforming data between storage and display
- Show the tea shop context they'll work with
Use: Slides (first few sections)
- Start with
function()syntax, NOT arrow functions - Emphasize: no return value - it's for side effects
- Live code example: logging tea names
Key point: "If you need to do something for each item but don't need a result back, use forEach."
Exercises: Part 1 (exercises 1-3)
- Still using
function()syntax - Emphasize: same count in, same count out
- Contrast with
forEach: map returns a new array, forEach doesn't - Live code: extract tea names, calculate prices
Key point: "If you need to transform each item into something else, use map."
Exercises: Part 2 (exercises 4-6)
- Introduce the term predicate - a function returning true/false
- Emphasize: items stay the same shape, count changes
- Live code: organic teas, Japanese teas
Key point: "If you need to select some items based on a condition, use filter."
Exercises: Part 3 (exercises 7-10)
- Introduce pipeline metaphor
- Show chaining: filter → map
- Discuss order: usually filter first (reduce data), then map (transform)
Exercises: Part 4 (exercises 11-13)
- NOW introduce arrow syntax
- Show the progression:
function()→ arrow → implicit return - Practice converting earlier exercises
Key point: "Arrow functions are shorter syntax for the same thing. They're popular because they reduce noise in array methods."
Exercises: Part 5 (exercises 14-16)
- Recap the three methods and when to use each
- Show the "questions to ask" slide
- Introduce the assignment
The exercises are intentionally numerous - trainees progress at different speeds. Here's how to manage this:
- Let trainees work on Part 1 - observe how far each gets individually
- Solve one exercise in plenum - pick one that weaker trainees struggled with but stronger trainees just finished. This way everyone benefits
- Move on to Part 2 - weaker trainees skip remaining Part 1 exercises (they can revisit later)
- Repeat for each part
Exercises marked with ⭐ are optional stretch goals. If your fastest trainees finish all exercises while others haven't solved the first one, that part needs an additional challenge - let us know, or create a PR with a creative challenging exercise!
All examples should use the tea shop data. This builds familiarity and shows how the same dataset can be queried different ways.
Regularly remind them: "This is what happens on every API request. Data comes in one shape, goes out another."
- Slides - Reveal.js presentation
- Exercises - In-session exercises
- Assignment - Take-home work
- Tea Data - Shared dataset that you can find in your assignment repo