fix(curriculum): Improve verbiage and add examples to the map, filter, and reduce challenges (#37709)
* fix: improve verbiage and add examples to challenges * fix: condensed map method wording Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: remove leading space Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: improved verbiage Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: shortened reduce challenge verbiage Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: shorten verbiage related to reduce 2nd parameter Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: added comma Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: shortened filter verbiage Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix; added comma Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: improved verbiage of map method Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: shortened reduce verbiage Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: correct map method verbiage Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: added word array Co-Authored-By: Manish Giri <manish.giri.me@gmail.com> * fix: added missing comma Co-Authored-By: Manish Giri <manish.giri.me@gmail.com> * fix: changed u to sumOfAges Co-Authored-By: Manish Giri <manish.giri.me@gmail.com> * fix: created one sentence out of many Co-Authored-By: Parth Parth <34807532+thecodingaviator@users.noreply.github.com> * fix: changed to on each iteration Co-Authored-By: Manish Giri <manish.giri.me@gmail.com> * fix: fixed verbiage in filter and map challenges
This commit is contained in:
committed by
Parth Parth
parent
58444af093
commit
b7949087e3
@ -7,13 +7,27 @@ forumTopicId: 18179
|
|||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id='description'>
|
<section id='description'>
|
||||||
Another useful array function is <code>Array.prototype.filter()</code>, or simply <code>filter()</code>. The <code>filter</code> method returns a new array which is at most as long as the original array, but usually has fewer items.
|
Another useful array function is <code>Array.prototype.filter()</code>, or simply <code>filter()</code>.
|
||||||
<code>Filter</code> doesn't alter the original array, just like <code>map</code>. It takes a callback function that applies the logic inside the callback on each element of the array. If an element returns true based on the criteria in the callback function, then it is included in the new array.
|
<code>filter</code> calls a function on each element of an array and returns a new array containing only the elements for which that function returns <code>true</code>. In other words, it filters the array, based on the function passed to it. Like <code>map</code>, it does this without needing to modify the original array.
|
||||||
|
The callback function accepts three arguments. The first argument is the current element being processed. The second is the index of that element and the third is the array upon which the <code>filter</code> method was called.
|
||||||
|
See below for an example using the <code>filter</code> method on the <code>users</code> array to return a new array containing only the users under the age of 30. For simplicity, the example only uses the first argument of the callback.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const users = [
|
||||||
|
{ name: 'John', age: 34 },
|
||||||
|
{ name: 'Amy', age: 20 },
|
||||||
|
{ name: 'camperCat', age: 10 }
|
||||||
|
];
|
||||||
|
|
||||||
|
const usersUnder30 = users.filter(user => user.age < 30);
|
||||||
|
console.log(usersUnder30); // [ { name: 'Amy', age: 20 }, { name: 'camperCat', age: 10 } ]
|
||||||
|
```
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id='instructions'>
|
<section id='instructions'>
|
||||||
The variable <code>watchList</code> holds an array of objects with information on several movies. Use a combination of <code>filter</code> and <code>map</code> to return a new array of objects with only <code>title</code> and <code>rating</code> keys, but where <code>imdbRating</code> is greater than or equal to 8.0. Note that the rating values are saved as strings in the object and you may want to convert them into numbers to perform mathematical operations on them.
|
The variable <code>watchList</code> holds an array of objects with information on several movies. Use a combination of <code>filter</code> and <code>map</code> on <code>watchList</code> to assign a new array of objects with only <code>title</code> and <code>rating</code> keys. The new array should only include objects where <code>imdbRating</code> is greater than or equal to 8.0. Note that the rating values are saved as strings in the object and you may need to convert them into numbers to perform mathematical operations on them.
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -286,6 +300,7 @@ var watchList = [
|
|||||||
"Response": "True"
|
"Response": "True"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
// Add your code below this line
|
// Add your code below this line
|
||||||
let filteredList = watchList.filter(e => e.imdbRating >= 8).map( ({Title: title, imdbRating: rating}) => ({title, rating}) );
|
let filteredList = watchList.filter(e => e.imdbRating >= 8).map( ({Title: title, imdbRating: rating}) => ({title, rating}) );
|
||||||
// Add your code above this line
|
// Add your code above this line
|
||||||
|
@ -11,12 +11,26 @@ So far we have learned to use pure functions to avoid side effects in a program.
|
|||||||
This is only the beginning. As its name suggests, functional programming is centered around a theory of functions.
|
This is only the beginning. As its name suggests, functional programming is centered around a theory of functions.
|
||||||
It would make sense to be able to pass them as arguments to other functions, and return a function from another function. Functions are considered <dfn>first class objects</dfn> in JavaScript, which means they can be used like any other object. They can be saved in variables, stored in an object, or passed as function arguments.
|
It would make sense to be able to pass them as arguments to other functions, and return a function from another function. Functions are considered <dfn>first class objects</dfn> in JavaScript, which means they can be used like any other object. They can be saved in variables, stored in an object, or passed as function arguments.
|
||||||
Let's start with some simple array functions, which are methods on the array object prototype. In this exercise we are looking at <code>Array.prototype.map()</code>, or more simply <code>map</code>.
|
Let's start with some simple array functions, which are methods on the array object prototype. In this exercise we are looking at <code>Array.prototype.map()</code>, or more simply <code>map</code>.
|
||||||
Remember that the <code>map</code> method is a way to iterate over each item in an array. It creates a new array (without changing the original one) after applying a callback function to every element.
|
The <code>map</code> method iterates over each item in an array and returns a new array containing the results of calling the callback function on each element. It does this without mutating the original array.
|
||||||
|
When the callback is used, it is passed three arguments. The first argument is the current element being processed. The second is the index of that element and the third is the array upon which the <code>map</code> method was called.
|
||||||
|
See below for an example using the <code>map</code> method on the <code>users</code> array to return a new array containing only the names of the users as elements. For simplicity, the example only uses the first argument of the callback.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const users = [
|
||||||
|
{ name: 'John', age: 34 },
|
||||||
|
{ name: 'Amy', age: 20 },
|
||||||
|
{ name: 'camperCat', age: 10 }
|
||||||
|
];
|
||||||
|
|
||||||
|
const names = users.map(user => user.name);
|
||||||
|
console.log(names); // [ 'John', 'Amy', 'camperCat' ]
|
||||||
|
```
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id='instructions'>
|
<section id='instructions'>
|
||||||
The <code>watchList</code> array holds objects with information on several movies. Use <code>map</code> to pull the title and rating from <code>watchList</code> and save the new array in the <code>rating</code> variable. The code in the editor currently uses a <code>for</code> loop to do this, replace the loop functionality with your <code>map</code> expression.
|
The <code>watchList</code> array holds objects with information on several movies. Use <code>map</code> on <code>watchList</code> to assign a new array of objects with only <code>title</code> and <code>rating</code> keys to the <code>ratings</code> variable. The code in the editor currently uses a <code>for</code> loop to do this, so you should replace the loop functionality with your <code>map</code> expression.
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -30,8 +44,8 @@ tests:
|
|||||||
testString: assert(!removeJSComments(code).match(/for\s*?\(.*?\)/));
|
testString: assert(!removeJSComments(code).match(/for\s*?\(.*?\)/));
|
||||||
- text: Your code should use the <code>map</code> method.
|
- text: Your code should use the <code>map</code> method.
|
||||||
testString: assert(code.match(/\.map/g));
|
testString: assert(code.match(/\.map/g));
|
||||||
- text: <code>rating</code> should equal <code>[{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}]</code>.
|
- text: <code>ratings</code> should equal <code>[{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}]</code>.
|
||||||
testString: assert(JSON.stringify(rating) === JSON.stringify([{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}]));
|
testString: assert(JSON.stringify(ratings) === JSON.stringify([{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}]));
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -159,9 +173,9 @@ var watchList = [
|
|||||||
|
|
||||||
// Add your code below this line
|
// Add your code below this line
|
||||||
|
|
||||||
var rating = [];
|
var ratings = [];
|
||||||
for(var i=0; i < watchList.length; i++){
|
for(var i=0; i < watchList.length; i++){
|
||||||
rating.push({title: watchList[i]["Title"], rating: watchList[i]["imdbRating"]});
|
ratings.push({title: watchList[i]["Title"], rating: watchList[i]["imdbRating"]});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add your code above this line
|
// Add your code above this line
|
||||||
@ -300,7 +314,7 @@ var watchList = [
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
var rating = watchList.map(function(movie) {
|
var ratings = watchList.map(function(movie) {
|
||||||
return {
|
return {
|
||||||
title: movie["Title"],
|
title: movie["Title"],
|
||||||
rating: movie["imdbRating"]
|
rating: movie["imdbRating"]
|
||||||
|
@ -7,10 +7,45 @@ forumTopicId: 301313
|
|||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id='description'>
|
<section id='description'>
|
||||||
|
|
||||||
<code>Array.prototype.reduce()</code>, or simply <code>reduce()</code>, is the most general of all array operations in JavaScript. You can solve almost any array processing problem using the <code>reduce</code> method.
|
<code>Array.prototype.reduce()</code>, or simply <code>reduce()</code>, is the most general of all array operations in JavaScript. You can solve almost any array processing problem using the <code>reduce</code> method.
|
||||||
This is not the case with the <code>filter</code> and <code>map</code> methods since they do not allow interaction between two different elements of the array. For example, if you want to compare elements of the array, or add them together, <code>filter</code> or <code>map</code> could not process that.
|
|
||||||
The <code>reduce</code> method allows for more general forms of array processing, and it's possible to show that both <code>filter</code> and <code>map</code> can be derived as a special application of <code>reduce</code>.
|
The <code>reduce</code> method allows for more general forms of array processing, and it's possible to show that both <code>filter</code> and <code>map</code> can be derived as special applications of <code>reduce</code>.
|
||||||
However, before we get there, let's practice using <code>reduce</code> first.
|
The <code>reduce</code> method iterates over each item in an array and returns a single value (i.e. string, number, object, array). This is achieved via a callback function that is called on each iteration.
|
||||||
|
|
||||||
|
The callback function accepts four arguments. The first argument is known as the accumulator, which gets assigned the return value of the callback function from the previous iteration, the second is the current element being processed, the third is the index of that element and the fourth is the array upon which <code>reduce</code> is called.
|
||||||
|
|
||||||
|
In addition to the callback function, <code>reduce</code> has an additional parameter which takes an initial value for the accumulator. If this second parameter is not used, then the first iteration is skipped and the second iteration gets passed the first element of the array as the accumulator.
|
||||||
|
|
||||||
|
See below for an example using <code>reduce</code> on the <code>users</code> array to return the sum of all the users' ages. For simplicity, the example only uses the first and second arguments.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const users = [
|
||||||
|
{ name: 'John', age: 34 },
|
||||||
|
{ name: 'Amy', age: 20 },
|
||||||
|
{ name: 'camperCat', age: 10 }
|
||||||
|
];
|
||||||
|
|
||||||
|
const sumOfAges = users.reduce((sum, user) => sum + user.age, 0);
|
||||||
|
console.log(sumOfAges); // 64
|
||||||
|
```
|
||||||
|
|
||||||
|
In another example, see how an object can be returned containing the names of the users as properties with their ages as values.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const users = [
|
||||||
|
{ name: 'John', age: 34 },
|
||||||
|
{ name: 'Amy', age: 20 },
|
||||||
|
{ name: 'camperCat', age: 10 }
|
||||||
|
];
|
||||||
|
|
||||||
|
const usersObj = users.reduce((obj, user) => {
|
||||||
|
obj[user.name] = user.age;
|
||||||
|
return obj;
|
||||||
|
}, {});
|
||||||
|
console.log(usersObj); // { John: 34, Amy: 20, camperCat: 10 }
|
||||||
|
```
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
|
Reference in New Issue
Block a user