> For the complete documentation index, see [llms.txt](https://program.hackyourfuture.dk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://program.hackyourfuture.dk/course-content/backend/advanced-javascript/week1/session-plan.md). # Session Plan > This guide is for mentors. It outlines how to run the session, what to emphasize, and why we introduce certain terminology. *** ## Session Goals By the end of this session, trainees should: 1. Understand when to use `forEach`, `map`, and `filter` 2. Be able to chain array methods together 3. Write arrow functions with implicit and explicit returns 4. Connect array methods to the Data → Logic → Rendering model *** ## Glossary Goals | 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. | *** ## Session Outline ### 1. Introduction * 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](https://github.com/HackYourFuture-CPH/program/blob/main/courses/backend/advanced-javascript/week1/session-materials/slides/index.html) (first few sections) ### 2. forEach * 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](https://github.com/HackYourFuture-CPH/program/blob/main/courses/backend/advanced-javascript/week1/session-materials/exercises.md#part-1-foreach) (exercises 1-3) ### 3. map * 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](https://github.com/HackYourFuture-CPH/program/blob/main/courses/backend/advanced-javascript/week1/session-materials/exercises.md#part-2-map) (exercises 4-6) ### 4. filter * 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](https://github.com/HackYourFuture-CPH/program/blob/main/courses/backend/advanced-javascript/week1/session-materials/exercises.md#part-3-filter) (exercises 7-10) ### 5. Combining methods * Introduce **pipeline** metaphor * Show chaining: filter → map * Discuss order: usually filter first (reduce data), then map (transform) **Exercises:** [Part 4](https://github.com/HackYourFuture-CPH/program/blob/main/courses/backend/advanced-javascript/week1/session-materials/exercises.md#part-4-combining-methods) (exercises 11-13) ### 6. Arrow functions * 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](https://github.com/HackYourFuture-CPH/program/blob/main/courses/backend/advanced-javascript/week1/session-materials/exercises.md#part-5-arrow-functions) (exercises 14-16) ### 7. Wrap-up * Recap the three methods and when to use each * Show the "questions to ask" slide * Introduce the assignment *** ## Teaching Tips ### Managing exercises with mixed skill levels The exercises are intentionally numerous - trainees progress at different speeds. Here's how to manage this: 1. **Let trainees work on Part 1** - observe how far each gets individually 2. **Solve one exercise in plenum** - pick one that weaker trainees struggled with but stronger trainees just finished. This way everyone benefits 3. **Move on to Part 2** - weaker trainees skip remaining Part 1 exercises (they can revisit later) 4. **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! ### Use the tea data consistently All examples should use the tea shop data. This builds familiarity and shows how the same dataset can be queried different ways. ### Connect to backend context Regularly remind them: "This is what happens on every API request. Data comes in one shape, goes out another." *** ## Materials * [Slides](https://github.com/HackYourFuture-CPH/program/blob/main/courses/backend/advanced-javascript/week1/session-materials/slides/index.html) - Reveal.js presentation * [Exercises](https://github.com/HackYourFuture-CPH/program/blob/main/courses/backend/advanced-javascript/week1/session-materials/exercises.md) - In-session exercises * [Assignment](/course-content/backend/advanced-javascript/week1/assignment.md) - Take-home work * Tea Data - Shared dataset that you can find in your assignment repo --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://program.hackyourfuture.dk/course-content/backend/advanced-javascript/week1/session-plan.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.