Skip to content

Commit

Permalink
Merge pull request #749 from Kalikoze/update-array-prototype-iterators
Browse files Browse the repository at this point in the history 
Update iterators lesson to no longer have it be a self taught lesson.…
  • Loading branch information
@Kalikoze
Kalikoze authored Nov 28, 2023
2 parents bb8a134 + 7e53f48 commit a150a81
Showing 1 changed file with 70 additions and 65 deletions.
135 changes: 70 additions & 65 deletions lessons/module-2/array-prototype-methods-iterators.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ someArrayData.somePrototypeMethod((/* parameter(s) */) => {

Many callbacks require a return statement. Remember that these statements determine what the CALLBACK returns, **not** what the METHOD returns. The method may return something different, and this value may need to be captured (in a variable, another return statement...).

**You will often need *TWO* return statements in a METHOD (or function) when working with iterator methods!**
**You will often need *TWO* return statements in a function when working with iterator methods!**

You can find more information on different prototype methods and their callbacks [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Instance_methods){:target='blank'}.
</section>
Expand All @@ -95,34 +95,23 @@ There are many array prototype methods out there, but we are going to focus on s
* `filter()`
* `reduce()`

<section class="call-to-action">
### Exploration Activity

You are going to be split into groups and be assigned one iterator method. It will be your job to research that method and then share out your learning with your peers. In your groups, you will need to create a document (use any tool you'd like: google docs, Notion, etc) and record the following information:
- What does the callback function return?
- What are the mandatory parameters? Optional parameters?
- What is the basic structure/skeleton of the method?
- What are common use cases? When would I use this method?
- Is there anything else people should know?
- Solve the problem(s) included below.

</section>
## How to use `Array.forEach(callbackFunction)`

First, let's do `forEach` together. The instructor will model how they would use documentation to research.

<section class="answer">
### `Array.forEach(callbackFunction)`

<section class="answer">
### Problem Set
<section class="call-to-action">
### Exercises

1 - Using `forEach`, iterate over the array of prices, increase the price by $1, and add new increased prices to the `increasedPrices` array.
#### Example #1
Using `forEach`, iterate over the array of prices, increase the price by $1, and add new increased prices to the `increasedPrices` array.

```js
const prices = [4.99, 5.50, 7.00, 10.25];
const increasedPrices = [];
```
2 - Using the dogs array above, log the dog's name and how many legs it has.

#### Example #2
- Using the dogs array above, log the dog's name and how many legs it has.

```js
const dogs = [
Expand All @@ -140,28 +129,28 @@ const dogs = [
<section class="answer">
### Important Takeaways

Be sure to include these in your document, if you haven't already!
Be sure to include these in your notes, if you haven't already!
* `forEach` is useful when you want to perform an operation on every element in an array.
* Is is the prototype method that is most similar to a `for` loop.
* `forEach` does **NOT** return anything (even if you have return statements). You can push element data into another array, but the array MUST exist outside of the `forEach`.
</section>
</section>

Now that we've done that one together, let's split up into groups and have y'all take it from here!
`forEach` is the building block for many of the other iterator methods. Let's have you experiment some with the other ones now!

<section class="answer">
### `Array.map(callbackFunction)`
## How to use `Array.map(callbackFunction)`

<section class="answer">
### Problem Set
<section class="call-to-action">
### Exercises

1 - Using `map`, iterate over the array of prices, increase the price by $1, and return a new array of increased prices. Store them in a variable called `increasedPrices`.
#### Example #1
Using `map`, iterate over the array of prices, increase the price by $1, and return a new array of increased prices. Store them in a variable called `increasedPrices`.

```js
const prices = [4.99, 5.50, 7.00, 10.25];
```

2 - Using an array of temperature data in Fahrenheit, convert the date to degrees Celsius and store them in a variable called `degreesC`. [Here is the formula](http://www.rapidtables.com/convert/temperature/how-fahrenheit-to-celsius.htm){:target='blank'} to convert from Fahrenheit to Celsius.
#### Example #2
Using an array of temperature data in Fahrenheit, convert the date to degrees Celsius and store them in a variable called `degreesC`. [Here is the formula](http://www.rapidtables.com/convert/temperature/how-fahrenheit-to-celsius.htm){:target='blank'} to convert from Fahrenheit to Celsius.

```js
const degreesF = [67, 32, 55, 102]
Expand All @@ -174,27 +163,28 @@ const degreesF = [67, 32, 55, 102]
<section class="answer">
### Important Takeaways

Be sure to include these in your document, if you haven't already!
Be sure to include these in your notes, if you haven't already!
* Use `map` when you want a new array based on your original, with some modification to each item.
* Although similar to `forEach`, each time the callback is executed in `map`, whatever is returned from the callback is added to the new array
* `map` will *ALWAYS* return a **new array of the same length** as the original array.
</section>
</section>

<section class="answer">
### `Array.find(callbackFunction)`

<section class="answer">
### Problem Set
## How to use `Array.find(callbackFunction)`

<section class="call-to-action">
### Exercises

1 - Find the first number that is greater than 20.
#### Example #1
Find the first number that is greater than 20.

```js
const numbers = [15, 6, 14, 2, 22, 9, 45];
```


2 - Find the first pet that is three years old and store it in a `foundPet` variable.
#### Example #2
Find the first pet that is three years old and store it in a `foundPet` variable.
```js
let pets = [
{ name: 'harvey', age: 1 },
Expand All @@ -207,29 +197,27 @@ let pets = [
<section class="answer">
### Important Takeaways

Be sure to include these in your document, if you haven't already!
Be sure to include these in your notes, if you haven't already!
* Useful for when you need to find a specific item in an array that matches a given condition.
* Always will return the first element where the callback function returns *true*. (even if there are other matches)
* The callback needs to return a **boolean**. You also cannot modify the element you're finding.
</section>
</section>

<section class="answer">
### `Array.filter(callbackFunction)`
## How to use `Array.filter(callbackFunction)`

<section class="answer">
### Problem Set
<section class="call-to-action">
### Exercises

1 - Return a new array of *odd* numbers using the `filter` prototype method.
#### Example #1
Return a new array of *odd* numbers using the `filter` prototype method.

```js
const numbers = [1, 2, 3, 4, 5, 6, 7];
```


2 - Create a new array of *living* beatles using the `filter` method and store them in a `livingBeatles` variable.
3 - Create another array of beatles that play the guitar use the `filter` method and store them in a `guitarPlayingBeatles` variable.

#### Example #2
Create a new array of *living* beatles using the `filter` method and store them in a `livingBeatles` variable.
```js
var beatles = [
{ name: 'John', living: false, instruments: ['guitar', 'bass', 'piano'] },
Expand All @@ -238,23 +226,24 @@ var beatles = [
{ name: 'Ringo', living: true, instruments: ['drums', 'bongos'] },
];
```

#### Example #3
Create another array of beatles that play the guitar using the `filter` method and store them in a `guitarPlayingBeatles` variable. (*continue to use the data from above*)

</section>

<section class="answer">
### Important Takeaways

Be sure to include these in your document, if you haven't already!
Be sure to include these in your notes, if you haven't already!
* Instead of returning the first match like `find`, `filter` will return a new **array** with all elements that match a condition.
* Useful for when you need to find a subset of elements in an array that matches a given condition.
* The callback needs to return a **boolean**. You also cannot modify the element you're finding.
</section>
</section>

## How to use `Array.reduce(callbackFunction)`

<section class="answer">
### `Array.reduce(callbackFunction, initialValue)`

<section class="answer">
<section class="note">
### Helpful Tips

Note that the `reduce` method is slightly different than the previous iterator methods. `reduce` takes two arguments:
Expand All @@ -264,10 +253,11 @@ _Callback Function_ - Within the callback, we have access to the accumulator, th
_Initial Value_ - The initial value to be used as the accumulator (the first argument to the first call of the callback). The accumulator is the *single value* that will eventually be returned. It's called an accumulator because each iteration over the array will modify the accumulator value until the loop is complete.
</section>

<section class="answer">
<section class="call-to-action">
### Problem Set

1 - Using `reduce`, sum up all of the numbers.
#### Example #1
Using `reduce`, sum up all of the numbers.

```js
const numbers = [1, 2, 3, 4, 5];
Expand All @@ -276,7 +266,8 @@ const numbers = [1, 2, 3, 4, 5];
=> 15
```

2 - Using `reduce`, create a new object the stores the lengths of each word.
#### Example #2
Using `reduce`, create a new object the stores the lengths of each word.

```js
const adjectives = ['fantastic', 'amazing', 'childish'];
Expand All @@ -289,27 +280,41 @@ const adjectives = ['fantastic', 'amazing', 'childish'];
<section class="answer">
### Important Takeaways

Be sure to include these in your document, if you haven't already!
Be sure to include these in your notes, if you haven't already!
* Useful for turning an array into a single value, be it a number, string, object, or another array.
* Useful for returning one that is a combination / sum of values from an original array.
* Also useful for converting an array into another data type.
* REMEMBER...you must always return the *accumulator* in the callback function.
</section>
</section>

<section class="note">
### Before we close out today...

Be sure that every member of your group has access to the document that you just made. You will be split up tomorrow and responsible for teaching your peers what you've learned. Save that document somewhere easy to find so you can easily share it tomorrow.
Take some time this afternoon to review what some of the highlights were for each prototype method. Often when trying to solve a problem, there isn't just one answer. Sometimes problems can be solved through a combination of prototype methods! We'll review these more tomorrow and continue working through a few more examples then!
</section>

## Share Out (Start of Day 2 lesson)
## Reviewing Our Prototype Iterator Methods *(Day 2)*

Now that we've had a chance to go through each of these iterator methods, let's review the highlights. Take a look at the activity below:

You will get into groups of 4, made up of one expert for each iterator method. In these groups, share the document you made yesterday. Then, walk each other through your example problems.
<section class="call-to-action">
### Exploration Activity

Take a few minutes to consider the following questions for each of the iterator methods (`forEach`, `map`, `find`, `filter`, & `reduce`)
- What does the callback function return?
- What are the mandatory parameters? Optional parameters?
- What are common use cases? When would I use this method?

As a class, let's go through these questions together in this [JamBoard](https://jamboard.google.com/d/1WHuyT2bIQsR4rZPie6KEuKsZuVYNpBKv1ZKFiokQhqA/edit?usp=sharing){:target='blank'}.
</section>

## Practice

The only way to get better and more comfortable with these prototype methods is to continue practicing them. Here are a [few more examples](https://github.com/turingschool-examples/iterator-methods-stations){:target='blank'} to work through.
<section class="call-to-action">
### More exercises

The only way to get better and more comfortable with these prototype methods is to continue practicing them. Here are a [few more examples](https://github.com/turingschool-examples/iterator-methods-stations){:target='blank'} to work through. Focus on the prototype methods that are more challenging for you first!
</section>

<section class="checks-for-understanding">
### Checks for Understanding
Expand All @@ -322,6 +327,6 @@ The only way to get better and more comfortable with these prototype methods is
</section>

### Additional Resources
* [Why and when to use forEach, map, filter, reduce, and find in JavaScript](https://medium.com/@JeffLombardJr/understanding-foreach-map-filter-and-find-in-javascript-f91da93b9f2c)
* [JavaScript Callback Functions - What are Callbacks in JS and How to Use Them](https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/)
* [Callback Functions MDN](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
* [Why and when to use forEach, map, filter, reduce, and find in JavaScript](https://medium.com/@JeffLombardJr/understanding-foreach-map-filter-and-find-in-javascript-f91da93b9f2c){:target='blank'}
* [JavaScript Callback Functions - What are Callbacks in JS and How to Use Them](https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/){:target='blank'}
* [Callback Functions MDN](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function){:target='blank'}

0 comments on commit a150a81

Please sign in to comment.