diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions.english.md
index 3942dd1f9f..e89272e57b 100644
--- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions.english.md
+++ b/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
-It's time we see how powerful arrow functions are when processing data.
-Arrow functions work really well with higher order functions, such as map(), filter(), and reduce(), that take other functions as arguments for processing collections of data.
-Read the following code:
-FBPosts.filter(function(post) {
return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
})
-We have written this with filter() to at least make it somewhat readable. Now compare it to the following code which uses arrow function syntax instead:
-FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)
-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 map(), filter(), and reduce().
+But what are these functions? Lets look at the simplest example forEach(), and run it on the following array of sample Facebook posts.
+let FBPosts = [
+ {thumbnail: "someIcon", likes:432, shares: 600},
+ {thumbnail: "Another icon", likes:300, shares: 501},
+ {thumbnail: "Yet another", likes:40, shares: 550},
+ {thumbnail: null, likes: 101, shares:0},
+]
+
+Of the two forEach() versions below, both perform the exact same log function, and each takes an anonymous callback with a parameter post. The difference is the syntax. One uses an arrow function and the other does not.
+
+ES5
+FBpost.forEach(function(post) {
+ console.log(post) // log each post here
+ });
+ES6
+FBpost.forEach((post) => {
+ console.log(post) // log each post here
+ });
+
+
+filter() is very similar. Below it will iterate over the FBPosts array, perform the logic to filter out the items that do not meet the requirements, and return a new array, results.
+
+
+let results = arr1.filter((post) => {
+ return post.thumbnail !== null && post.likes > 100 && post.shares > 500
+});
+console.log(results); // [{thumbnail: "someIcon", likes: 432, shares: 600}, {thumbnail: "Another icon", likes: 300, shares: 501}]
+
+
+
+
## Instructions
-Use arrow function syntax to compute the square of only the positive integers (decimal numbers are not integers) in the array realNumberArray and store the new array in the variable squaredIntegers.
+Use arrow function syntax to compute the square of only the positive integers (decimal numbers are not integers) in the array realNumberArray and store the new array in the variable squaredIntegers.
## Tests
@@ -25,18 +51,20 @@ Use arrow function syntax to compute the square of only the positive integers (d
```yml
tests:
- - text: squaredIntegers should be a constant variable (by using const).
+ - text: squareList should be a function.
+ testString: assert.typeOf(squareList, 'function'), 'squareList should be a function';
+ - text: squareList should be a constant variable (by using const).
testString: getUserInput => assert(getUserInput('index').match(/const\s+squaredIntegers/g), 'squaredIntegers should be a constant variable (by using const).');
- - text: squaredIntegers should be an array
- testString: assert(Array.isArray(squaredIntegers), 'squaredIntegers should be an array');
- - text: squaredIntegers should be [16, 1764, 36]
- testString: assert.deepStrictEqual(squaredIntegers, [16, 1764, 36], 'squaredIntegers should be [16, 1764, 36]');
- text: function keyword was not used.
testString: getUserInput => assert(!getUserInput('index').match(/function/g), 'function 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: map, filter, or reduce should be used
testString: getUserInput => assert(getUserInput('index').match(/map|filter|reduce/g), 'map, filter, or reduce should be used');
+ - text: The function should return an array called squaredIntegers
+ testString: assert(Array.isArray(squaredIntegers), 'squaredIntegers should be an array');
+ - text: squaredIntegers should be [16, 1764, 36]
+ testString: assert.deepStrictEqual(squaredIntegers, [16, 1764, 36], 'squaredIntegers should be [16, 1764, 36]');
```
@@ -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);
+
```
@@ -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);
```
diff --git a/guide/english/javascript/es6/arrow-functions/index.md b/guide/english/javascript/es6/arrow-functions/index.md
index 53a2f499bf..f0e8e6dec5 100644
--- a/guide/english/javascript/es6/arrow-functions/index.md
+++ b/guide/english/javascript/es6/arrow-functions/index.md
@@ -4,8 +4,7 @@ title: Arrow Functions
## Arrow functions
-ES6 has introduced a new syntax that allows to declare functions.
-
+ES6 has introduced a new syntax for defining a function.
```javascript
// Old Syntax
function oldOne() {
@@ -68,3 +67,4 @@ axios.get(url).then(response => {
});
```
+For more information on arrow functions visit [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).