fix(learn): Implement map and filter (#39621)
* Added changes to implement-filter-method challenge as requested in reviews by Randall D and moT01 * Added changes requested for in code review
This commit is contained in:
		| @@ -6,19 +6,21 @@ forumTopicId: 301230 | ||||
| --- | ||||
|  | ||||
| ## Description | ||||
|  | ||||
| <section id='description'> | ||||
| As you have seen from applying <code>Array.prototype.map()</code>, or simply <code>map()</code> earlier, the <code>map</code> method returns an array of the same length as the one it was called on. It also doesn't alter the original array, as long as its callback function doesn't. | ||||
| In other words, <code>map</code> is a pure function, and its output depends solely on its inputs. Plus, it takes another function as its argument. | ||||
| It would teach us a lot about <code>map</code> to try to implement a version of it that behaves exactly like the <code>Array.prototype.map()</code> with a <code>for</code> loop or <code>Array.prototype.forEach()</code>. | ||||
| Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well. | ||||
| You might learn a lot about the <code>map</code> method if you implement your own version of it. It is recommended you use a <code>for</code> loop or <code>Array.prototype.forEach()</code>. | ||||
| </section> | ||||
|  | ||||
| ## Instructions | ||||
|  | ||||
| <section id='instructions'> | ||||
| Write your own <code>Array.prototype.myMap()</code>, which should behave exactly like <code>Array.prototype.map()</code>. You may use a <code>for</code> loop or the <code>forEach</code> method. | ||||
| Write your own <code>Array.prototype.myMap()</code>, which should behave exactly like <code>Array.prototype.map()</code>. You should not use the built-in <code>map</code> method. The <code>Array</code> instance can be accessed in the <code>myMap</code> method using <code>this</code>. | ||||
| </section> | ||||
|  | ||||
| ## Tests | ||||
|  | ||||
| <section id='tests'> | ||||
|  | ||||
| ```yml | ||||
| @@ -27,12 +29,12 @@ tests: | ||||
|     testString: assert(JSON.stringify(new_s) === JSON.stringify([46, 130, 196, 10])); | ||||
|   - text: Your code should not use the <code>map</code> method. | ||||
|     testString: assert(!code.match(/\.?[\s\S]*?map/g)); | ||||
|  | ||||
| ``` | ||||
|  | ||||
| </section> | ||||
|  | ||||
| ## Challenge Seed | ||||
|  | ||||
| <section id='challengeSeed'> | ||||
|  | ||||
| <div id='js-seed'> | ||||
| @@ -41,34 +43,32 @@ tests: | ||||
| // The global variable | ||||
| var s = [23, 65, 98, 5]; | ||||
|  | ||||
| Array.prototype.myMap = function(callback){ | ||||
| Array.prototype.myMap = function(callback) { | ||||
|   var newArray = []; | ||||
|   // Only change code below this line | ||||
|  | ||||
|   // Only change code above this line | ||||
|   return newArray; | ||||
|  | ||||
| }; | ||||
|  | ||||
| var new_s = s.myMap(function(item){ | ||||
| var new_s = s.myMap(function(item) { | ||||
|   return item * 2; | ||||
| }); | ||||
| ``` | ||||
|  | ||||
| </div> | ||||
|  | ||||
|  | ||||
|  | ||||
| </section> | ||||
|  | ||||
| ## Solution | ||||
|  | ||||
| <section id='solution'> | ||||
|  | ||||
| ```js | ||||
| // the global Array | ||||
| var s = [23, 65, 98, 5]; | ||||
|  | ||||
| Array.prototype.myMap = function(callback){ | ||||
| Array.prototype.myMap = function(callback) { | ||||
|   var newArray = []; | ||||
|   // Only change code below this line | ||||
|   for (var elem of this) { | ||||
| @@ -76,10 +76,9 @@ Array.prototype.myMap = function(callback){ | ||||
|   } | ||||
|   // Only change code above this line | ||||
|   return newArray; | ||||
|  | ||||
| }; | ||||
|  | ||||
| var new_s = s.myMap(function(item){ | ||||
| var new_s = s.myMap(function(item) { | ||||
|   return item * 2; | ||||
| }); | ||||
| ``` | ||||
|   | ||||
| @@ -6,17 +6,19 @@ forumTopicId: 301231 | ||||
| --- | ||||
|  | ||||
| ## Description | ||||
|  | ||||
| <section id='description'> | ||||
| It would teach us a lot about the <code>filter</code> method if we try to implement a version of it that behaves exactly like <code>Array.prototype.filter()</code>. It can use either a <code>for</code> loop or <code>Array.prototype.forEach()</code>. | ||||
| Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well. | ||||
| You might learn a lot about the <code>filter</code> method if you implement your own version of it. It is recommended you use a <code>for</code> loop or <code>Array.prototype.forEach()</code>. | ||||
| </section> | ||||
|  | ||||
| ## Instructions | ||||
|  | ||||
| <section id='instructions'> | ||||
| Write your own <code>Array.prototype.myFilter()</code>, which should behave exactly like <code>Array.prototype.filter()</code>. You may use a <code>for</code> loop or the <code>Array.prototype.forEach()</code> method. | ||||
| Write your own <code>Array.prototype.myFilter()</code>, which should behave exactly like <code>Array.prototype.filter()</code>. You should not use the built-in <code>filter</code> method. The <code>Array</code> instance can be accessed in the <code>myFilter</code> method using <code>this</code>. | ||||
| </section> | ||||
|  | ||||
| ## Tests | ||||
|  | ||||
| <section id='tests'> | ||||
|  | ||||
| ```yml | ||||
| @@ -25,12 +27,12 @@ tests: | ||||
|     testString: assert(JSON.stringify(new_s) === JSON.stringify([23, 65, 5])); | ||||
|   - text: Your code should not use the <code>filter</code> method. | ||||
|     testString: assert(!code.match(/\.?[\s\S]*?filter/g)); | ||||
|  | ||||
| ``` | ||||
|  | ||||
| </section> | ||||
|  | ||||
| ## Challenge Seed | ||||
|  | ||||
| <section id='challengeSeed'> | ||||
|  | ||||
| <div id='js-seed'> | ||||
| @@ -39,44 +41,41 @@ tests: | ||||
| // The global variable | ||||
| var s = [23, 65, 98, 5]; | ||||
|  | ||||
| Array.prototype.myFilter = function(callback){ | ||||
| Array.prototype.myFilter = function(callback) { | ||||
|   // Only change code below this line | ||||
|   var newArray = []; | ||||
|   // Only change code above this line | ||||
|   return newArray; | ||||
|  | ||||
| }; | ||||
|  | ||||
| var new_s = s.myFilter(function(item){ | ||||
| var new_s = s.myFilter(function(item) { | ||||
|   return item % 2 === 1; | ||||
| }); | ||||
| ``` | ||||
|  | ||||
| </div> | ||||
|  | ||||
|  | ||||
|  | ||||
| </section> | ||||
|  | ||||
| ## Solution | ||||
|  | ||||
| <section id='solution'> | ||||
|  | ||||
| ```js | ||||
| // the global Array | ||||
| var s = [23, 65, 98, 5]; | ||||
|  | ||||
| Array.prototype.myFilter = function(callback){ | ||||
| Array.prototype.myFilter = function(callback) { | ||||
|   var newArray = []; | ||||
|   // Only change code below this line | ||||
|   for (let i = 0;i<this.length;i++) { | ||||
|     if (callback(this[i])) | ||||
|       newArray.push(this[i]); | ||||
|   for (let i = 0; i < this.length; i++) { | ||||
|     if (callback(this[i])) newArray.push(this[i]); | ||||
|   } | ||||
|   // Only change code above this line | ||||
|   return newArray; | ||||
| }; | ||||
|  | ||||
| var new_s = s.myFilter(function(item){ | ||||
| var new_s = s.myFilter(function(item) { | ||||
|   return item % 2 === 1; | ||||
| }); | ||||
| ``` | ||||
|   | ||||
		Reference in New Issue
	
	Block a user