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
<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;
});
```

View File

@ -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;
});
```