# Session Plan

## Session Materials

These are some examples of previously created materials by mentors that you can use yourself, or for inspiration.

* [Notion Page Handout](https://dandy-birth-1b2.notion.site/HYF-Aarhus-JS-2-Week-2-cd0c1163d0264215824dc17580c97825?pvs=4) (by [Thomas](https://github.com/te-online))

### Mentors demo

The [Mentors demo](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/mentors-demo/README.md) is an in-session demo for forEach, map, filter, and chained filter. Use **index.js** to implement the TODOs in class (FOREACH, MAP, FILTER, CHAINING). The [README](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/mentors-demo/README.md) describes the files, how tasks are marked, and how the code works. **index-solution.js** has the full implementation for reference.

## Session Outline

### Array functions

Write this code with traditional `function`s, no arrow functions yet!

* Try to write your own `forEach`, `map` and `filter` with the trainees. Shows very precisely how it works!
* `forEach` - Executes function for each item in the array, NO RETURN!
  * [Mentors demo](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/mentors-demo/README.md) – do **FOREACH TODO**
  * [Code inspiration](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/code-inspiration.md#foreach)
  * [forEach homemade](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/code-inspiration.md#foreach-homemade)
  * [Exercises](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/exercises.md#task-1-generate-and-show-listings-foreach)
* `map` - Changes/transforms the items in the array
  * [Mentors demo](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/mentors-demo/README.md) – do **MAP TODO**
  * [Code inspiration](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/code-inspiration.md#map)
  * [map homemade](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/code-inspiration.md#map-homemade)
  * [Exercises](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/exercises.md#task-2-show-prices-map)
* `filter` - Changes the number of items in the array. Let the trainees investigate `filter`
  * [Mentors demo](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/mentors-demo/README.md) – do **FILTER TODO**
  * [Code inspiration](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/code-inspiration.md#filter)
  * [filter homemade](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/code-inspiration.md#filter-homemade) - Get help from trainees to write this
  * [Exercises](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/exercises.md#task-3-filter-buttons-filter)
* [Mentors demo](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/mentors-demo/README.md) – do **CHAINING TODO** (multiple filter conditions)
* [Other example](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/code-inspiration.md#other-example)

### Arrow Functions

* [Code inspiration](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/code-inspiration.md#arrow-function)
* [Exercises](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/exercises.md#task-arrow-functions)

## Exercises

See the separate [Exercises](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/exercises.md) document.

## Code inspiration

See the separate [Code inspiration](https://github.com/HackYourFuture-CPH/program/blob/main/courses/frontend/advanced-javascript/week1/session-materials/code-inspiration.md) document.