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:
Joseph Mawa
2020-10-14 19:33:43 +03:00
committed by GitHub
parent a71150074d
commit e2ae6303d5
2 changed files with 24 additions and 26 deletions

View File

@ -6,19 +6,21 @@ forumTopicId: 301230
--- ---
## Description ## Description
<section id='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. 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. 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>. 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>.
Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.
</section> </section>
## Instructions ## Instructions
<section id='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> </section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
@ -27,12 +29,12 @@ tests:
testString: assert(JSON.stringify(new_s) === JSON.stringify([46, 130, 196, 10])); testString: assert(JSON.stringify(new_s) === JSON.stringify([46, 130, 196, 10]));
- text: Your code should not use the <code>map</code> method. - text: Your code should not use the <code>map</code> method.
testString: assert(!code.match(/\.?[\s\S]*?map/g)); testString: assert(!code.match(/\.?[\s\S]*?map/g));
``` ```
</section> </section>
## Challenge Seed ## Challenge Seed
<section id='challengeSeed'> <section id='challengeSeed'>
<div id='js-seed'> <div id='js-seed'>
@ -41,34 +43,32 @@ tests:
// The global variable // The global variable
var s = [23, 65, 98, 5]; var s = [23, 65, 98, 5];
Array.prototype.myMap = function(callback){ Array.prototype.myMap = function(callback) {
var newArray = []; var newArray = [];
// Only change code below this line // Only change code below this line
// Only change code above this line // Only change code above this line
return newArray; return newArray;
}; };
var new_s = s.myMap(function(item){ var new_s = s.myMap(function(item) {
return item * 2; return item * 2;
}); });
``` ```
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// the global Array // the global Array
var s = [23, 65, 98, 5]; var s = [23, 65, 98, 5];
Array.prototype.myMap = function(callback){ Array.prototype.myMap = function(callback) {
var newArray = []; var newArray = [];
// Only change code below this line // Only change code below this line
for (var elem of this) { for (var elem of this) {
@ -76,10 +76,9 @@ Array.prototype.myMap = function(callback){
} }
// Only change code above this line // Only change code above this line
return newArray; return newArray;
}; };
var new_s = s.myMap(function(item){ var new_s = s.myMap(function(item) {
return item * 2; return item * 2;
}); });
``` ```

View File

@ -6,17 +6,19 @@ forumTopicId: 301231
--- ---
## Description ## Description
<section id='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>. 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>.
Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.
</section> </section>
## Instructions ## Instructions
<section id='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> </section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
@ -25,12 +27,12 @@ tests:
testString: assert(JSON.stringify(new_s) === JSON.stringify([23, 65, 5])); testString: assert(JSON.stringify(new_s) === JSON.stringify([23, 65, 5]));
- text: Your code should not use the <code>filter</code> method. - text: Your code should not use the <code>filter</code> method.
testString: assert(!code.match(/\.?[\s\S]*?filter/g)); testString: assert(!code.match(/\.?[\s\S]*?filter/g));
``` ```
</section> </section>
## Challenge Seed ## Challenge Seed
<section id='challengeSeed'> <section id='challengeSeed'>
<div id='js-seed'> <div id='js-seed'>
@ -39,44 +41,41 @@ tests:
// The global variable // The global variable
var s = [23, 65, 98, 5]; var s = [23, 65, 98, 5];
Array.prototype.myFilter = function(callback){ Array.prototype.myFilter = function(callback) {
// Only change code below this line // Only change code below this line
var newArray = []; var newArray = [];
// Only change code above this line // Only change code above this line
return newArray; return newArray;
}; };
var new_s = s.myFilter(function(item){ var new_s = s.myFilter(function(item) {
return item % 2 === 1; return item % 2 === 1;
}); });
``` ```
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// the global Array // the global Array
var s = [23, 65, 98, 5]; var s = [23, 65, 98, 5];
Array.prototype.myFilter = function(callback){ Array.prototype.myFilter = function(callback) {
var newArray = []; var newArray = [];
// Only change code below this line // Only change code below this line
for (let i = 0;i<this.length;i++) { for (let i = 0; i < this.length; i++) {
if (callback(this[i])) if (callback(this[i])) newArray.push(this[i]);
newArray.push(this[i]);
} }
// Only change code above this line // Only change code above this line
return newArray; return newArray;
}; };
var new_s = s.myFilter(function(item){ var new_s = s.myFilter(function(item) {
return item % 2 === 1; return item % 2 === 1;
}); });
``` ```