gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(curriculum): Rewrote the Write Higher-Order Arrow Functions challenge and moved to Functional Programming section (#35954)

Browse Source 
* fix: reworded and moved challenge

* fix: removed extra line

Co-Authored-By: RandellDawson <5313213+RandellDawson@users.noreply.github.com>

* fix; removed extra line

Co-Authored-By: RandellDawson <5313213+RandellDawson@users.noreply.github.com>

* fix: reworded sentence

Co-Authored-By: RandellDawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
Randell Dawson
2019-05-15 09:12:17 -07:00
committed by Tom
parent d390b40a9f
commit 4b4762716c
5 changed files with 100 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/_meta/es6/meta.json
View File

@ -36,10 +36,6 @@
"587d7b88367417b2b2512b44",
"Write Arrow Functions with Parameters"
],
[
"587d7b88367417b2b2512b45",
"Write Higher Order Arrow Functions"
],
[
"587d7b88367417b2b2512b46",
"Set Default Parameters for Your Functions"

4
curriculum/challenges/_meta/functional-programming/meta.json
View File

@ -68,6 +68,10 @@
"587d7da9367417b2b2512b68",
"Use the reduce Method to Analyze Data"
],
[
"587d7b88367417b2b2512b45",
"Use Higher-Order Functions map, filter, or reduce to Solve a Complex Problem"
],
[
"587d7da9367417b2b2512b69",
"Sort an Array Alphabetically using the sort Method"

124
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions.english.md
View File

@ -1,124 +0,0 @@
---
id: 587d7b88367417b2b2512b45
title: Write Higher-Order Arrow Functions
challengeType: 1
---
## Description
<section id='description'>
It's time to look at higher-order functions and their common pair, arrow functions.
Arrow functions work really well when combined with higher-order functions, such as <code>map()</code>, <code>filter()</code>, and <code>reduce()</code>. <br>
But what are these functions? Lets look at the simplest example <code>forEach()</code>, and run it on the following array of sample Facebook posts.
<blockquote>let FBPosts = [<br>
{thumbnail: "someIcon", likes:432, shares: 600},<br>
{thumbnail: "Another icon", likes:300, shares: 501},<br>
{thumbnail: "Yet another", likes:40, shares: 550},<br>
{thumbnail: null, likes: 101, shares:0},<br>
]</br>
</blockquote>
Of the two <code>forEach()</code> versions below, both perform the exact same log function, and each takes an anonymous callback with a parameter <code>post</code>. The difference is the syntax. One uses an arrow function and the other does not.
<blockquote>
<strong>ES5</strong><br>
FBpost.forEach(function(post) {<br>
console.log(post) // log each post here<br>
});<br>
<strong>ES6</strong><br>
FBpost.forEach((post) => {<br>
console.log(post) // log each post here<br>
});<br>
</blockquote>
<code>filter()</code> is very similar. Below it will iterate over the <code>FBPosts</code> array, perform the logic to filter out the items that do not meet the requirements, and return a new array, <code>results</code>.
<blockquote>
let results = arr1.filter((post) => {
return post.thumbnail !== null && post.likes > 100 && post.shares > 500
});<br><br>
console.log(results); // [{thumbnail: "someIcon", likes: 432, shares: 600}, {thumbnail: "Another icon", likes: 300, shares: 501}]
</blockquote>
</section>
## Instructions
<section id='instructions'>
Use arrow function syntax to compute the square of <em>only</em> the positive integers (decimal numbers are not integers) in the array <code>realNumberArray</code> and store the new array in the variable <code>squaredIntegers</code>.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: <code>squareList</code> should be a <code>function</code>.
testString: assert.typeOf(squareList, 'function'), '<code>squareList</code> should be a <code>function</code>';
- text: <code>squareList</code> should be a constant variable (by using <code>const</code>).
testString: getUserInput => assert(getUserInput('index').match(/const\s+squaredIntegers/g), '<code>squaredIntegers</code> should be a constant variable (by using <code>const</code>).');
- text: <code>function</code> keyword was not used.
testString: getUserInput => assert(!getUserInput('index').match(/function/g), '<code>function</code> keyword was not used.');
- text: loop should not be used
testString: getUserInput => assert(!getUserInput('index').match(/(for)|(while)/g), 'loop should not be used');
- text: <code>map</code>, <code>filter</code>, or <code>reduce</code> should be used
testString: getUserInput => assert(getUserInput('index').match(/map|filter|reduce/g), '<code>map</code>, <code>filter</code>, or <code>reduce</code> should be used');
- text: The function should return an <code>array</code> called <code>squaredIntegers</code>
testString: assert(Array.isArray(squaredIntegers), '<code>squaredIntegers</code> should be an <code>array</code>');
- text: <code>squaredIntegers</code> should be <code>[16, 1764, 36]</code>
testString: assert.deepStrictEqual(squaredIntegers, [16, 1764, 36], '<code>squaredIntegers</code> should be <code>[16, 1764, 36]</code>');
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];
const squareList = (arr) => {
"use strict";
const positiveIntegers = arr.filter((num) => {
// add code here
});
const squaredIntegers = positiveIntegers.map((num) => {
// add code here
});
return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);
```
</div>
</section>
## Solution
<section id='solution'>
```js
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];
const squareList = (arr) => {
"use strict";
const positiveIntegers = arr.filter((num) => {
return num >= 0 && Number.isInteger(num);
// add code here
});
const squaredIntegers = positiveIntegers.map((num) => {
// add code here
return num ** 2;
});
// add code here
return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
```
</section>

82
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.english.md Normal file
View File

@ -0,0 +1,82 @@
---
id: 587d7b88367417b2b2512b45
title: Use Higher-Order Functions map, filter, or reduce to Solve a Complex Problem
challengeType: 1
---
## Description
<section id='description'>
Now that you have worked through a few challenges using higher-order functions like <code>map()</code>, <code>filter()</code>, and <code>reduce()</code>, you now get to apply them to solve a more complex challenge.
</section>
## Instructions
<section id='instructions'>
We have defined a function named <code>squareList</code>. You need to complete the code for the <code>squareList</code> function using any combination of <code>map()</code>, <code>filter()</code>, and <code>reduce()</code> so that it returns a new array containing only the square of <em>only</em> the positive integers (decimal numbers are not integers) when an array of real numbers is passed to it. An example of an array containing only real numbers is <code>[-3, 4.8, 5, 3, -3.2]</code>.
<strong>Note:</strong> Your function should not use any kind of <code>for</code> or <code>while</code> loops or the <code>forEach()</code> function.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: <code>squareList</code> should be a <code>function</code>.
testString: assert.typeOf(squareList, 'function'), '<code>squareList</code> should be a <code>function</code>';
- text: for or while loops or forEach should not be used.
testString: assert(!removeJSComments(code).match(/for|while|forEach/g));
- text: <code>map</code>, <code>filter</code>, or <code>reduce</code> should be used.
testString: assert(removeJSComments(code).match(/\.(map|filter|reduce)\s*\(/g));
- text: The function should return an <code>array</code>.
testString: assert(Array.isArray(squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2])));
- text: <code>squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2])</code> should return <code>[16, 1764, 36]</code>.
testString: assert.deepStrictEqual(squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]), [16, 1764, 36]);
- text: <code>squareList([-3.7, -5, 3, 10, 12.5, 7, -4.5, -17, 0.3])</code> should return <code>[9, 100, 49]</code>.
testString: assert.deepStrictEqual(squareList([-3.7, -5, 3, 10, 12.5, 7, -4.5, -17, 0.3]), [9, 100, 49]);
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
const squareList = (arr) => {
// only change code below this line
return arr;
// only change code above this line
};
// test your code
const squaredIntegers = squareList([-3, 4.8, 5, 3, -3.2]);
console.log(squaredIntegers);
```
</div>
<div id='js-teardown'>
```js
const removeJSComments = str => str.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, '');
```
</div>
</section>
## Solution
<section id='solution'>
```js
const squareList = (arr) => {
const positiveIntegers = arr.filter(num => {
return num >= 0 && Number.isInteger(num);
});
const squaredIntegers = positiveIntegers.map(num => {
return num ** 2;
});
return squaredIntegers;
};
```
</section>

37
guide/english/certifications/javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions/index.md → guide/english/certifications/javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem/index.md
View File

@ -1,5 +1,5 @@
---
title: Write Higher Order Arrow Functions
title: Use Higher-Order Functions map, filter, or reduce to Solve a Complex Problem
---
![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")
@ -32,35 +32,26 @@ We need to compute and square values from the `realNumberArray` and store them i
**Solution ahead!**
## ![:beginner:](https://forum.freecodecamp.com/images/emoji/emoji_one/beginner.png?v=3 ":beginner:") Code solution:
```javascript
const squareList = (arr) => {
"use strict";
const squaredIntegers = arr.filter((num) => num > 0 && num % parseInt(num) === 0).map((num) => Math.pow(num, 2));
return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);
```js
const squareList = (arr) => arr
.filter((num) => num > 0 && num % parseInt(num) === 0)
.map((num) => Math.pow(num, 2));
```
- [Run code at codepen.io](https://codepen.io/dylantyates/pen/WyWoYJ)
### Code explanation:
Uses the operator `filter()` and `map()` functions to square all positive integers in a given array.
## Alternative code solution:
```javascript
// change code below this line
const squaredIntegers = arr.filter((param) => Number.isInteger(param) && param >= 0).map(x => x * x);
// change code above this line
```js
const squareList = (arr) => {
return arr.reduce((sqrIntegers, num) => {
return Number.isInteger(num) && num > 0
? sqrIntegers.concat(num * num)
: sqrIntegers;
}, []);
};
```
- [Run code at repl.it](https://repl.it/@AdrianSkar/ES6-Write-higher-order-arrow-functions)
### Code explanation
This does basically the same but uses the `isInteger()` method to check the numbers.
### Resources