diff --git a/module2/lessons/js_array_prototype_methods.md b/module2/lessons/js_array_prototype_methods.md index 98c555f..7752622 100644 --- a/module2/lessons/js_array_prototype_methods.md +++ b/module2/lessons/js_array_prototype_methods.md @@ -124,7 +124,7 @@ We are going to focus on: ## How to use `Array.filter(callbackFunction)` -First, let's do `filter` together. The instructor will model how they would use documentation to research. +First, let's do `filter` together. The instructor will model how they would use documentation to research. Note that MDN's syntax uses some shortcuts that we do NOT recommend you use at this time. Write it out long hand until you're very comfortable with using these methods effectively (post-Mod 2)
### Exercises @@ -166,6 +166,22 @@ Be sure to include these in your notes, if you haven't already! Note that depending on the syntax you use for your callback function, you may not need to explicitly write the `return` keyword. You can leverage the *implicit return* available in certain arrow function syntax. + + +
## How to use `Array.map(callbackFunction)` @@ -200,6 +216,21 @@ Be sure to include these in your notes, if you haven't already! * `map` will *ALWAYS* return a **new array of the same length** as the original array.
+ +
## How to use `Array.reduce(callbackFunction)` @@ -218,7 +249,7 @@ _Initial Value_ - The initial value to be used as the accumulator (the first arg ### Exercises #### Example #1 -Using `reduce`, sum up all of the numbers. +Using `reduce`, get the sum by adding up all of the numbers. ```js const numbers = [1, 2, 3, 4, 5]; @@ -228,6 +259,16 @@ const numbers = [1, 2, 3, 4, 5]; ``` #### Example #2 +Using `reduce`, get the product of multiplying all of the numbers. Consider what your acc's initalValue needs to be. + +```js +const numbers = [1, 2, 3, 4, 5]; + +// console output +=> 120 +``` + +#### Example #3 Using `reduce`, create a new object the stores the lengths of each word. ```js @@ -250,8 +291,89 @@ Be sure to include these in your notes, if you haven't already! + +
+## How to use `Array.forEach(callbackFunction)` + +`forEach` is the prototype method that is most similar to a `for` loop. It simply iterates. It doesn't have additional built in functionality like some others (filter, map, etc). + +There are _occasional_ times when it makes more sense to use a for loop over something like a forEach. For example: + +- If you need to run something a specific number of times, you would want to use a `for` loop. `forEach` always iterates over every element in an array. +- If you want to stop (`break`) a `for` loop, you can do that. There is no way to stop a `forEach` loop. + + +
+### Exercises + +#### 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 = []; +``` + +#### Example #2 +- Using the dogs array above, log the dog's name and how many legs it has. + +```js +const dogs = [ + {name: "Fido", numLegs: 4}, + {name: "Greg", numLegs: 5} +]; + +// console output +=> 'Fido has 4 legs.' + 'Greg has 5 legs.' +``` + +
+ + + + + + ## How to use `Array.sort(callbackFunction)` -
- -## How to use `Array.forEach(callbackFunction)` - -`forEach` is the prototype method that is most similar to a `for` loop. It simply iterates. It doesn't have additional built in functionality like some others (filter, map, etc). - -There are _occasional_ times when it makes more sense to use a for loop over something like a forEach. For example: - -- If you need to run something a specific number of times, you would want to use a `for` loop. `forEach` always iterates over every element in an array. -- If you want to stop (`break`) a `for` loop, you can do that. There is no way to stop a `forEach` loop. - - -
-### Exercises + -```js -const dogs = [ - {name: "Fido", numLegs: 4}, - {name: "Greg", numLegs: 5} -]; - -// console output -=> 'Fido has 4 legs.' - 'Greg has 5 legs.' -``` - -
- - +
-### Before we close out today... - -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! +Take some time 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!

@@ -508,7 +588,68 @@ To be prepared for final assessments (and interview code challenges), you should * **filter()** - iterates over each element in an array and returns a new array of only the elements that match the specified condition * **map()** - iterates over each element in an array and returns a new array of the same length with the modified elements * **reduce()** - iterates over each element in an array and returns a single value (the accumulator) of your specifications -* **sort()** - iterates over each element in an array and sorts the elements (in place) based on your specified sorting + +You will not be expect to use sort in your final assessment. + + +
### Checks for Understanding