Update Higher-Order Arrow Functions code challenge (#34414)

* fix: update text of Write Higher Order Arrow to be more instructive

* fix: update tests and code to be more simple. Edit typos in text part. Prepare for PR

* fix: further changes to PR

* fix: checkout old head. Merge later commit with older commits

* fix: add MDN links to arrow-functions guide

* fix: re-add removed log and change working in guide wording

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions.english.md

Yep

Co-Authored-By: chrisdel101 <arssonist@yahoo.com>

* Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions.english.md

Removing unneeded line for clarity

Co-Authored-By: chrisdel101 <arssonist@yahoo.com>

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

@@ -1,23 +1,49 @@
 ---
 id: 587d7b88367417b2b2512b45
-title: Write Higher Order Arrow Functions
+title: Write Higher-Order Arrow Functions
 challengeType: 1
 ---
 
 ## Description
 <section id='description'>
-It's time we see how powerful arrow functions are when processing data.
-Arrow functions work really well with higher order functions, such as <code>map()</code>, <code>filter()</code>, and <code>reduce()</code>, that take other functions as arguments for processing collections of data.
-Read the following code:
-<blockquote>FBPosts.filter(function(post) {<br>&nbsp;&nbsp;return post.thumbnail !== null && post.shares > 100 && post.likes > 500;<br>})</blockquote>
-We have written this with <code>filter()</code> to at least make it somewhat readable. Now compare it to the following code which uses arrow function syntax instead:
-<blockquote>FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)</blockquote>
-This code is more succinct and accomplishes the same task with fewer lines of code.
+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 only 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>.
+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
@@ -25,18 +51,20 @@ Use arrow function syntax to compute the square of only the positive integers (d
 
 ```yml
 tests:
-  - text: <code>squaredIntegers</code> should be a constant variable (by using <code>const</code>).
+  - 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>squaredIntegers</code> should be an <code>array</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>');
   - 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>');
 
 ```
 
@@ -51,14 +79,19 @@ tests:
 const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];
 const squareList = (arr) => {
   "use strict";
-  // change code below this line
-  const squaredIntegers = arr;
-  // change code above this line
+  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>
@@ -74,13 +107,18 @@ console.log(squaredIntegers);
 const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];
 const squareList = (arr) => {
   "use strict";
-  // change code below this line
-  const squaredIntegers = arr.filter(num => Number.isInteger(num) && num > 0).map((x) => x * x);
-  // change code above this line
+  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);
-console.log(squaredIntegers);
 ```
 </section>