From 4240791c6c380350bb470d90079001315f89718f Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Tue, 5 Oct 2021 21:10:59 -0400
Subject: [PATCH 01/16] Arrow Function Concept

---
 concepts/arrow-function/.meta/config.json     |  5 +
 concepts/arrow-function/about.md              | 99 +++++++++++++++++++
 concepts/arrow-function/introduction.md       | 50 ++++++++++
 concepts/arrow-function/links.json            |  6 ++
 config.json                                   |  2 +-
 .../concept/fruit-picker/.meta/design.md      |  1 +
 6 files changed, 162 insertions(+), 1 deletion(-)
 create mode 100644 concepts/arrow-function/.meta/config.json
 create mode 100644 concepts/arrow-function/about.md
 create mode 100644 concepts/arrow-function/introduction.md
 create mode 100644 concepts/arrow-function/links.json

diff --git a/concepts/arrow-function/.meta/config.json b/concepts/arrow-function/.meta/config.json
new file mode 100644
index 0000000000..5b2e7d6ffb
--- /dev/null
+++ b/concepts/arrow-function/.meta/config.json
@@ -0,0 +1,5 @@
+{
+  "blurb": "A callback is a function passed as an argument to another function which can invoke it at some point during its execution",
+  "authors": ["pertrai1"],
+  "contributors": ["pertrai1"]
+}
diff --git a/concepts/arrow-function/about.md b/concepts/arrow-function/about.md
new file mode 100644
index 0000000000..aa12e6e578
--- /dev/null
+++ b/concepts/arrow-function/about.md
@@ -0,0 +1,99 @@
+# About
+
+[_Callbacks_ describe the pattern][wiki-callbacks] where a function receives a function as an argument to invoke when it arrives at a condition. The condition may be that its own work is done, or that an event has occurred, or that some predicate passes. It can be synchronous; it can be asynchronous.
+
+This is a useful pattern in JavaScript because it is designed as a single-threaded runtime where only one function call can be executed at a time. During execution, the runtime cannot respond to other events or continue execution until the function has returned. You might have noticed this on website when they seem to "freeze" or become unresponsive.
+
+But many API calls (often I/O functions, timers, and event listeners) use an asynchronous mechanism to place the [current function call][mdn-concurrency-stack] on the side until the work is complete. Upon completion, a callback function is placed on the [message queue][mdn-concurrency-queue] so that when the runtime is in between function calls, the messages are then processed by invoking the callback function.
+
+It is also useful when the `callback` (the argument passed in) may not be defined (created) at the calling site. In other words: it may have been passed down from a different place in the program.
+
+If the `callback` function _returns_ a boolean or boolean-like value, which is intended to be used (as opposed to a throwaway return value), it's called a predicate.
+
+## Synchronous Code
+
+A synchronous call is when one function is executed after the other. The order is fixed.
+
+```javascript
+function triangleArea(height, base) {
+  return (height * base) / 2;
+}
+
+triangleArea(2, 10); // => 10
+triangleArea(40, 3); // => 60
+```
+
+## Asynchronous Code
+
+When an asynchronous function is invoked, there is no way to know for certain when it will finish its work. This means there is no value to act on when the function returns to the caller.
+
+```javascript
+// This is broken, it may or may not return your value in time to be used
+let area = asynchronousTriangleArea(4, 7);
+console.log(area);
+```
+
+So we can use callbacks to control the order of execution:
+
+```javascript
+function areaCallback(area) {
+  console.log(area);
+}
+
+function asynchronousTriangleArea(height, base, areaCallback) {
+  areaCallback((height * base) / 2);
+}
+
+// This outputs the area of the triangle to the console as expected.
+asynchronousCallback(4, 7, areaCallback);
+```
+
+## Specific callback forms
+
+### Browser Events
+
+_Event handlers_ are a common use case for callbacks in JavaScript. This often takes the form of browser events like `'onload'` or `'onclick'`, where a DOM object's `addEventListener` method then registers a callback to be invoked when a specified event occurs.
+
+```javascript
+document.addEventListener('onload' () => alert('The webpage has now been loaded'))
+```
+
+### Node.js Error Convention
+
+In [Node.js][nodejs], [callbacks][node-callbacks] often follow a [similar convention][node-error-convention] for their arguments: The first argument receives an `Error` object or `null` if no error occurred, and the second and subsequent receive the data that the calling function is designed to send.
+
+If an error occurs, the second and subsequent arguments may not be present, so don't depend on them.
+
+```javascript
+function operation(a, b, callback) {
+  // Work ...
+
+  if (/* an error occurs */) {
+    return callback(new Error('An error occurred'))
+  }
+
+  // On success:
+  callback(null, data)
+}
+
+function callback(error, returnedData) {
+  if (error) {
+    // An error occured, handle it here.
+    return
+  }
+
+  // No error occurred, continue on with the returned data.
+}
+
+operation(1, 2, callback)
+```
+
+You see this pattern often when dealing with asynchronous functions.
+
+[mdn-callbacks]: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function
+[mdn-concurrency-stack]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#stack
+[mdn-concurrency-queue]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#queue
+[nodejs]: https://www.nodejs.org
+[node-callbacks]: https://nodejs.org/en/knowledge/getting-started/control-flow/what-are-callbacks/
+[node-error-convention]: https://nodejs.org/en/knowledge/errors/what-are-the-error-conventions/
+[wiki-callbacks]: https://en.wikipedia.org/wiki/Callback_(computer_programming)
diff --git a/concepts/arrow-function/introduction.md b/concepts/arrow-function/introduction.md
new file mode 100644
index 0000000000..5cd95d20e7
--- /dev/null
+++ b/concepts/arrow-function/introduction.md
@@ -0,0 +1,50 @@
+# Introduction
+
+An arrow function is a less verbose usage of function syntax.
+There are differences in the way that an arrow function works, such
+as _this_ binding, and that will be covered in other concepts. This
+introduction will focus on the syntax used for an arrow function.
+
+Here is a comparison between a function declaration and an arrow
+function. As we continue down, we will continue to compare differences.
+
+```javascript
+function addUpTwoNumbers(num1, num2) {
+  return num1 + num2
+}
+
+const addUpTwoNumbers = (num1, num2) => {
+  // function keyword removed and => added
+  return num1 + num2
+};
+```
+
+Above, you will see that the arrow function syntax:
+1. removes the keyword `function`
+2. has declared the identifier `addUpTwoNumbers` as a `const`
+3. adds a fat arrow `=>`
+
+Notice that there is only one statement that is in the body of the
+function. When there is only one statement that is returned in the
+body, the `{}` and the `return` keyword can be omitted, like so:
+
+```javascript
+const addUpTwoNumbers = (num1, num2) => num1 + num2 // braces - {} - and return removed
+```
+
+The use of parenthesis around parameters depends on the number of parameters:
+
+```javascript
+// one parameter does not need parenthesis
+const addUpTwoNumbers = num1 => num1
+
+// two or more parameters need to be wrapped in parenthesis
+const addUpTwoNumbers = (num1, num2) => num1 + num2
+```
+
+Other concepts that are taught such as [Rest][concept-rest] and
+[Destructuring][concept-destructure] can be used with an arrow function.
+
+
+[concept-rest]: /tracks/javascript/concepts/rest-and-spread
+[concept-destructure]: /tracks/javascript/concepts/array-destructuring
diff --git a/concepts/arrow-function/links.json b/concepts/arrow-function/links.json
new file mode 100644
index 0000000000..1811c5539a
--- /dev/null
+++ b/concepts/arrow-function/links.json
@@ -0,0 +1,6 @@
+[
+  {
+    "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions",
+    "description": "MDN: Arrow function expressions"
+  }
+]
diff --git a/config.json b/config.json
index e1ae50803c..11718b0419 100644
--- a/config.json
+++ b/config.json
@@ -169,7 +169,7 @@
         "slug": "fruit-picker",
         "name": "Fruit Picker",
         "uuid": "a6348db8-cc2b-4c53-9f43-3c23248d66f0",
-        "concepts": ["callbacks"],
+        "concepts": ["callbacks", "arrow-function"],
         "prerequisites": ["functions", "objects"],
         "status": "beta"
       },
diff --git a/exercises/concept/fruit-picker/.meta/design.md b/exercises/concept/fruit-picker/.meta/design.md
index 9c16658f4f..0477ff9c5f 100644
--- a/exercises/concept/fruit-picker/.meta/design.md
+++ b/exercises/concept/fruit-picker/.meta/design.md
@@ -19,6 +19,7 @@ In other words: how _function_ can be passed as an argument to another function,
 
 ## Concepts
 
+- `arrow functions`
 - `callbacks`
 
 ## Prerequisites

From cac0d3e890bed5171c90171cf5bfe7088a9d1795 Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Wed, 6 Oct 2021 17:52:13 -0400
Subject: [PATCH 02/16] Continue arrow function concept

---
 concepts/{arrow-function => arrow-functions}/.meta/config.json | 0
 concepts/{arrow-function => arrow-functions}/about.md          | 0
 concepts/{arrow-function => arrow-functions}/introduction.md   | 0
 concepts/{arrow-function => arrow-functions}/links.json        | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 rename concepts/{arrow-function => arrow-functions}/.meta/config.json (100%)
 rename concepts/{arrow-function => arrow-functions}/about.md (100%)
 rename concepts/{arrow-function => arrow-functions}/introduction.md (100%)
 rename concepts/{arrow-function => arrow-functions}/links.json (100%)

diff --git a/concepts/arrow-function/.meta/config.json b/concepts/arrow-functions/.meta/config.json
similarity index 100%
rename from concepts/arrow-function/.meta/config.json
rename to concepts/arrow-functions/.meta/config.json
diff --git a/concepts/arrow-function/about.md b/concepts/arrow-functions/about.md
similarity index 100%
rename from concepts/arrow-function/about.md
rename to concepts/arrow-functions/about.md
diff --git a/concepts/arrow-function/introduction.md b/concepts/arrow-functions/introduction.md
similarity index 100%
rename from concepts/arrow-function/introduction.md
rename to concepts/arrow-functions/introduction.md
diff --git a/concepts/arrow-function/links.json b/concepts/arrow-functions/links.json
similarity index 100%
rename from concepts/arrow-function/links.json
rename to concepts/arrow-functions/links.json

From bcfa1dcc3d8b0d63a0a5f51ac2642efd9b7e0abb Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Thu, 7 Oct 2021 07:22:17 -0400
Subject: [PATCH 03/16] Finish first draft

---
 concepts/arrow-functions/.meta/config.json |   2 +-
 concepts/arrow-functions/about.md          | 107 ++++++---------------
 concepts/arrow-functions/introduction.md   |  12 +--
 3 files changed, 36 insertions(+), 85 deletions(-)

diff --git a/concepts/arrow-functions/.meta/config.json b/concepts/arrow-functions/.meta/config.json
index 5b2e7d6ffb..9b63504794 100644
--- a/concepts/arrow-functions/.meta/config.json
+++ b/concepts/arrow-functions/.meta/config.json
@@ -1,5 +1,5 @@
 {
-  "blurb": "A callback is a function passed as an argument to another function which can invoke it at some point during its execution",
+  "blurb": "An arrow function is a less verbose usage of function syntax.",
   "authors": ["pertrai1"],
   "contributors": ["pertrai1"]
 }
diff --git a/concepts/arrow-functions/about.md b/concepts/arrow-functions/about.md
index aa12e6e578..9893a217ea 100644
--- a/concepts/arrow-functions/about.md
+++ b/concepts/arrow-functions/about.md
@@ -1,99 +1,50 @@
 # About
 
-[_Callbacks_ describe the pattern][wiki-callbacks] where a function receives a function as an argument to invoke when it arrives at a condition. The condition may be that its own work is done, or that an event has occurred, or that some predicate passes. It can be synchronous; it can be asynchronous.
+An _arrow function_ is a less verbose usage of function syntax.
+There are differences in the way that an arrow function works, such
+as _this_ binding, and that will be covered in other concepts. This
+introduction will focus on the syntax used for an arrow function.
 
-This is a useful pattern in JavaScript because it is designed as a single-threaded runtime where only one function call can be executed at a time. During execution, the runtime cannot respond to other events or continue execution until the function has returned. You might have noticed this on website when they seem to "freeze" or become unresponsive.
-
-But many API calls (often I/O functions, timers, and event listeners) use an asynchronous mechanism to place the [current function call][mdn-concurrency-stack] on the side until the work is complete. Upon completion, a callback function is placed on the [message queue][mdn-concurrency-queue] so that when the runtime is in between function calls, the messages are then processed by invoking the callback function.
-
-It is also useful when the `callback` (the argument passed in) may not be defined (created) at the calling site. In other words: it may have been passed down from a different place in the program.
-
-If the `callback` function _returns_ a boolean or boolean-like value, which is intended to be used (as opposed to a throwaway return value), it's called a predicate.
-
-## Synchronous Code
-
-A synchronous call is when one function is executed after the other. The order is fixed.
-
-```javascript
-function triangleArea(height, base) {
-  return (height * base) / 2;
-}
-
-triangleArea(2, 10); // => 10
-triangleArea(40, 3); // => 60
-```
-
-## Asynchronous Code
-
-When an asynchronous function is invoked, there is no way to know for certain when it will finish its work. This means there is no value to act on when the function returns to the caller.
-
-```javascript
-// This is broken, it may or may not return your value in time to be used
-let area = asynchronousTriangleArea(4, 7);
-console.log(area);
-```
-
-So we can use callbacks to control the order of execution:
+Here is a comparison between a function declaration and an arrow
+function. As we continue down, we will continue to compare differences.
 
 ```javascript
-function areaCallback(area) {
-  console.log(area);
+function addUpTwoNumbers(num1, num2) {
+  return num1 + num2;
 }
 
-function asynchronousTriangleArea(height, base, areaCallback) {
-  areaCallback((height * base) / 2);
-}
-
-// This outputs the area of the triangle to the console as expected.
-asynchronousCallback(4, 7, areaCallback);
+// function keyword removed and => added
+const addUpTwoNumbers = (num1, num2) => {
+  return num1 + num2;
+};
 ```
 
-## Specific callback forms
+Above, you will see that the arrow function syntax:
 
-### Browser Events
+1. removes the keyword `function`
+2. has declared the identifier `addUpTwoNumbers` as a `const`
+3. adds a fat arrow `=>`
 
-_Event handlers_ are a common use case for callbacks in JavaScript. This often takes the form of browser events like `'onload'` or `'onclick'`, where a DOM object's `addEventListener` method then registers a callback to be invoked when a specified event occurs.
+Notice that there is only one statement that is in the body of the
+function. When there is only one statement that is returned in the
+body, the `{}` and the `return` keyword can be omitted, like so:
 
 ```javascript
-document.addEventListener('onload' () => alert('The webpage has now been loaded'))
+const addUpTwoNumbers = (num1, num2) => num1 + num2; // braces - {} - and return removed
 ```
 
-### Node.js Error Convention
-
-In [Node.js][nodejs], [callbacks][node-callbacks] often follow a [similar convention][node-error-convention] for their arguments: The first argument receives an `Error` object or `null` if no error occurred, and the second and subsequent receive the data that the calling function is designed to send.
-
-If an error occurs, the second and subsequent arguments may not be present, so don't depend on them.
+The use of parenthesis around parameters depends on the number of parameters:
 
 ```javascript
-function operation(a, b, callback) {
-  // Work ...
-
-  if (/* an error occurs */) {
-    return callback(new Error('An error occurred'))
-  }
-
-  // On success:
-  callback(null, data)
-}
-
-function callback(error, returnedData) {
-  if (error) {
-    // An error occured, handle it here.
-    return
-  }
-
-  // No error occurred, continue on with the returned data.
-}
+// one parameter does not need parenthesis
+const addUpTwoNumbers = (num1) => num1;
 
-operation(1, 2, callback)
+// two or more parameters need to be wrapped in parenthesis
+const addUpTwoNumbers = (num1, num2) => num1 + num2;
 ```
 
-You see this pattern often when dealing with asynchronous functions.
+Other concepts that are taught such as [Rest][concept-rest] and
+[Destructuring][concept-destructure] can be used with an arrow function.
 
-[mdn-callbacks]: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function
-[mdn-concurrency-stack]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#stack
-[mdn-concurrency-queue]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#queue
-[nodejs]: https://www.nodejs.org
-[node-callbacks]: https://nodejs.org/en/knowledge/getting-started/control-flow/what-are-callbacks/
-[node-error-convention]: https://nodejs.org/en/knowledge/errors/what-are-the-error-conventions/
-[wiki-callbacks]: https://en.wikipedia.org/wiki/Callback_(computer_programming)
+[concept-rest]: /tracks/javascript/concepts/rest-and-spread
+[concept-destructure]: /tracks/javascript/concepts/array-destructuring
diff --git a/concepts/arrow-functions/introduction.md b/concepts/arrow-functions/introduction.md
index 5cd95d20e7..a593dadac8 100644
--- a/concepts/arrow-functions/introduction.md
+++ b/concepts/arrow-functions/introduction.md
@@ -10,16 +10,17 @@ function. As we continue down, we will continue to compare differences.
 
 ```javascript
 function addUpTwoNumbers(num1, num2) {
-  return num1 + num2
+  return num1 + num2;
 }
 
 const addUpTwoNumbers = (num1, num2) => {
   // function keyword removed and => added
-  return num1 + num2
+  return num1 + num2;
 };
 ```
 
 Above, you will see that the arrow function syntax:
+
 1. removes the keyword `function`
 2. has declared the identifier `addUpTwoNumbers` as a `const`
 3. adds a fat arrow `=>`
@@ -29,22 +30,21 @@ function. When there is only one statement that is returned in the
 body, the `{}` and the `return` keyword can be omitted, like so:
 
 ```javascript
-const addUpTwoNumbers = (num1, num2) => num1 + num2 // braces - {} - and return removed
+const addUpTwoNumbers = (num1, num2) => num1 + num2; // braces - {} - and return removed
 ```
 
 The use of parenthesis around parameters depends on the number of parameters:
 
 ```javascript
 // one parameter does not need parenthesis
-const addUpTwoNumbers = num1 => num1
+const addUpTwoNumbers = (num1) => num1;
 
 // two or more parameters need to be wrapped in parenthesis
-const addUpTwoNumbers = (num1, num2) => num1 + num2
+const addUpTwoNumbers = (num1, num2) => num1 + num2;
 ```
 
 Other concepts that are taught such as [Rest][concept-rest] and
 [Destructuring][concept-destructure] can be used with an arrow function.
 
-
 [concept-rest]: /tracks/javascript/concepts/rest-and-spread
 [concept-destructure]: /tracks/javascript/concepts/array-destructuring

From 0cf5411ef3f29f36c392c856612dbce3927b3b6a Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Thu, 7 Oct 2021 08:22:05 -0400
Subject: [PATCH 04/16] fix config concept

---
 config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config.json b/config.json
index 11718b0419..1d1403ede2 100644
--- a/config.json
+++ b/config.json
@@ -169,7 +169,7 @@
         "slug": "fruit-picker",
         "name": "Fruit Picker",
         "uuid": "a6348db8-cc2b-4c53-9f43-3c23248d66f0",
-        "concepts": ["callbacks", "arrow-function"],
+        "concepts": ["callbacks", "arrow-functions"],
         "prerequisites": ["functions", "objects"],
         "status": "beta"
       },

From f99680d5b148683bd0bf4d6ec1b411e759e39109 Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Thu, 7 Oct 2021 08:32:48 -0400
Subject: [PATCH 05/16] add more examples

---
 concepts/arrow-functions/about.md        | 43 +++++++++++++++++++++---
 concepts/arrow-functions/introduction.md | 39 +++++++++++++++++++--
 2 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/concepts/arrow-functions/about.md b/concepts/arrow-functions/about.md
index 9893a217ea..d5de4e2b48 100644
--- a/concepts/arrow-functions/about.md
+++ b/concepts/arrow-functions/about.md
@@ -1,20 +1,21 @@
 # About
 
-An _arrow function_ is a less verbose usage of function syntax.
+An arrow function is a less verbose usage of function syntax.
 There are differences in the way that an arrow function works, such
 as _this_ binding, and that will be covered in other concepts. This
 introduction will focus on the syntax used for an arrow function.
 
 Here is a comparison between a function declaration and an arrow
-function. As we continue down, we will continue to compare differences.
+function. As we continue down, we will continue to compare differences
+for reference.
 
 ```javascript
 function addUpTwoNumbers(num1, num2) {
   return num1 + num2;
 }
 
-// function keyword removed and => added
 const addUpTwoNumbers = (num1, num2) => {
+  // function keyword removed and => added
   return num1 + num2;
 };
 ```
@@ -30,18 +31,52 @@ function. When there is only one statement that is returned in the
 body, the `{}` and the `return` keyword can be omitted, like so:
 
 ```javascript
+// function expression
+const addUpTwoNumbers = function (num1, num2) {
+  return num1 + num2;
+};
+
+// arrow function
 const addUpTwoNumbers = (num1, num2) => num1 + num2; // braces - {} - and return removed
 ```
 
+If there are multiple statements in the body of the function, the braces
+would be used along with the `return` keyword:
+
+```javascript
+const addUpTwoNumbers = (num1, num2) => {
+  const extraStatement = 3;
+  return num1 + num2 + 3;
+};
+```
+
+When returning only an object from an arrow function, the syntax can
+be reduced like so:
+
+```javascript
+// explicit return of object
+const addUpTwoNumbers = (num1, num2) => {
+  return {
+    num1,
+    num2,
+  };
+};
+
+// implicit return of object
+const addUpTwoNumbers = (num1, num2) => ({ num1, num2 });
+```
+
 The use of parenthesis around parameters depends on the number of parameters:
 
+<!-- prettier-ignore-start -->
 ```javascript
 // one parameter does not need parenthesis
-const addUpTwoNumbers = (num1) => num1;
+const addUpTwoNumbers = num1 => num1;
 
 // two or more parameters need to be wrapped in parenthesis
 const addUpTwoNumbers = (num1, num2) => num1 + num2;
 ```
+<!-- prettier-ignore-end -->
 
 Other concepts that are taught such as [Rest][concept-rest] and
 [Destructuring][concept-destructure] can be used with an arrow function.
diff --git a/concepts/arrow-functions/introduction.md b/concepts/arrow-functions/introduction.md
index a593dadac8..2dcbb90414 100644
--- a/concepts/arrow-functions/introduction.md
+++ b/concepts/arrow-functions/introduction.md
@@ -6,7 +6,8 @@ as _this_ binding, and that will be covered in other concepts. This
 introduction will focus on the syntax used for an arrow function.
 
 Here is a comparison between a function declaration and an arrow
-function. As we continue down, we will continue to compare differences.
+function. As we continue down, we will continue to compare differences
+for reference.
 
 ```javascript
 function addUpTwoNumbers(num1, num2) {
@@ -30,18 +31,52 @@ function. When there is only one statement that is returned in the
 body, the `{}` and the `return` keyword can be omitted, like so:
 
 ```javascript
+// function expression
+const addUpTwoNumbers = function (num1, num2) {
+  return num1 + num2;
+};
+
+// arrow function
 const addUpTwoNumbers = (num1, num2) => num1 + num2; // braces - {} - and return removed
 ```
 
+If there are multiple statements in the body of the function, the braces
+would be used along with the `return` keyword:
+
+```javascript
+const addUpTwoNumbers = (num1, num2) => {
+  const extraStatement = 3;
+  return num1 + num2 + 3;
+};
+```
+
+When returning only an object from an arrow function, the syntax can
+be reduced like so:
+
+```javascript
+// explicit return of object
+const addUpTwoNumbers = (num1, num2) => {
+  return {
+    num1,
+    num2,
+  };
+};
+
+// implicit return of object
+const addUpTwoNumbers = (num1, num2) => ({ num1, num2 });
+```
+
 The use of parenthesis around parameters depends on the number of parameters:
 
+<!-- prettier-ignore-start -->
 ```javascript
 // one parameter does not need parenthesis
-const addUpTwoNumbers = (num1) => num1;
+const addUpTwoNumbers = num1 => num1;
 
 // two or more parameters need to be wrapped in parenthesis
 const addUpTwoNumbers = (num1, num2) => num1 + num2;
 ```
+<!-- prettier-ignore-end -->
 
 Other concepts that are taught such as [Rest][concept-rest] and
 [Destructuring][concept-destructure] can be used with an arrow function.

From bc05efa158b9345fcab29091dfaf9e347e01746c Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Thu, 7 Oct 2021 08:35:44 -0400
Subject: [PATCH 06/16] Fix up comments

---
 concepts/arrow-functions/about.md        | 16 +++-------------
 concepts/arrow-functions/introduction.md | 16 +++-------------
 2 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/concepts/arrow-functions/about.md b/concepts/arrow-functions/about.md
index d5de4e2b48..4b00272a8f 100644
--- a/concepts/arrow-functions/about.md
+++ b/concepts/arrow-functions/about.md
@@ -14,8 +14,8 @@ function addUpTwoNumbers(num1, num2) {
   return num1 + num2;
 }
 
+// function keyword removed and => added
 const addUpTwoNumbers = (num1, num2) => {
-  // function keyword removed and => added
   return num1 + num2;
 };
 ```
@@ -40,18 +40,8 @@ const addUpTwoNumbers = function (num1, num2) {
 const addUpTwoNumbers = (num1, num2) => num1 + num2; // braces - {} - and return removed
 ```
 
-If there are multiple statements in the body of the function, the braces
-would be used along with the `return` keyword:
-
-```javascript
-const addUpTwoNumbers = (num1, num2) => {
-  const extraStatement = 3;
-  return num1 + num2 + 3;
-};
-```
-
-When returning only an object from an arrow function, the syntax can
-be reduced like so:
+Another example is when returning only an object from an arrow
+function, the syntax can be reduced like so:
 
 ```javascript
 // explicit return of object
diff --git a/concepts/arrow-functions/introduction.md b/concepts/arrow-functions/introduction.md
index 2dcbb90414..dbe54386b3 100644
--- a/concepts/arrow-functions/introduction.md
+++ b/concepts/arrow-functions/introduction.md
@@ -14,8 +14,8 @@ function addUpTwoNumbers(num1, num2) {
   return num1 + num2;
 }
 
+// function keyword removed and => added
 const addUpTwoNumbers = (num1, num2) => {
-  // function keyword removed and => added
   return num1 + num2;
 };
 ```
@@ -40,18 +40,8 @@ const addUpTwoNumbers = function (num1, num2) {
 const addUpTwoNumbers = (num1, num2) => num1 + num2; // braces - {} - and return removed
 ```
 
-If there are multiple statements in the body of the function, the braces
-would be used along with the `return` keyword:
-
-```javascript
-const addUpTwoNumbers = (num1, num2) => {
-  const extraStatement = 3;
-  return num1 + num2 + 3;
-};
-```
-
-When returning only an object from an arrow function, the syntax can
-be reduced like so:
+Another example is when returning only an object from an arrow
+function, the syntax can be reduced like so:
 
 ```javascript
 // explicit return of object

From 7cbbca1874a38a73120da548d6e4bc402a77aa69 Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Thu, 7 Oct 2021 08:51:32 -0400
Subject: [PATCH 07/16] Add to fruit picker concept

---
 concepts/arrow-functions/about.md             |  7 +++--
 concepts/arrow-functions/introduction.md      | 11 +++----
 concepts/arrow-functions/links.json           |  4 +++
 .../fruit-picker/.docs/introduction.md        | 29 +++++++++++++------
 .../concept/fruit-picker/.meta/design.md      |  2 +-
 5 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/concepts/arrow-functions/about.md b/concepts/arrow-functions/about.md
index 4b00272a8f..975baad32b 100644
--- a/concepts/arrow-functions/about.md
+++ b/concepts/arrow-functions/about.md
@@ -1,6 +1,9 @@
 # About
 
-An arrow function is a less verbose usage of function syntax.
+Besides function declarations and function expressions, JavaScript
+also has another very concise syntax for defining a function. These
+functions are called _arrow functions_.
+
 There are differences in the way that an arrow function works, such
 as _this_ binding, and that will be covered in other concepts. This
 introduction will focus on the syntax used for an arrow function.
@@ -68,7 +71,7 @@ const addUpTwoNumbers = (num1, num2) => num1 + num2;
 ```
 <!-- prettier-ignore-end -->
 
-Other concepts that are taught such as [Rest][concept-rest] and
+Other concepts that are taught such as [Rest Parameters][concept-rest] and
 [Destructuring][concept-destructure] can be used with an arrow function.
 
 [concept-rest]: /tracks/javascript/concepts/rest-and-spread
diff --git a/concepts/arrow-functions/introduction.md b/concepts/arrow-functions/introduction.md
index dbe54386b3..a04ba6333a 100644
--- a/concepts/arrow-functions/introduction.md
+++ b/concepts/arrow-functions/introduction.md
@@ -1,6 +1,9 @@
 # Introduction
 
-An arrow function is a less verbose usage of function syntax.
+Besides function declarations and function expressions, JavaScript
+also has another very concise syntax for defining a function. These
+functions are called _arrow functions_.
+
 There are differences in the way that an arrow function works, such
 as _this_ binding, and that will be covered in other concepts. This
 introduction will focus on the syntax used for an arrow function.
@@ -67,9 +70,3 @@ const addUpTwoNumbers = num1 => num1;
 const addUpTwoNumbers = (num1, num2) => num1 + num2;
 ```
 <!-- prettier-ignore-end -->
-
-Other concepts that are taught such as [Rest][concept-rest] and
-[Destructuring][concept-destructure] can be used with an arrow function.
-
-[concept-rest]: /tracks/javascript/concepts/rest-and-spread
-[concept-destructure]: /tracks/javascript/concepts/array-destructuring
diff --git a/concepts/arrow-functions/links.json b/concepts/arrow-functions/links.json
index 1811c5539a..c8fc88ea46 100644
--- a/concepts/arrow-functions/links.json
+++ b/concepts/arrow-functions/links.json
@@ -2,5 +2,9 @@
   {
     "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions",
     "description": "MDN: Arrow function expressions"
+  },
+  {
+    "url": "https://javascript.info/arrow-functions-basics",
+    "description": "Javascript Info: Arrow functions, the basics"
   }
 ]
diff --git a/exercises/concept/fruit-picker/.docs/introduction.md b/exercises/concept/fruit-picker/.docs/introduction.md
index 0d8409566e..cc12380552 100644
--- a/exercises/concept/fruit-picker/.docs/introduction.md
+++ b/exercises/concept/fruit-picker/.docs/introduction.md
@@ -1,7 +1,16 @@
 # Introduction
 
-Callbacks are functions which are passed as arguments to another function. This is often done to control the order of execution in an asynchronous context. Writing a callback function is no different from writing a function, but the callback function's arguments must match the signature required by the calling function.
+Besides function declarations and function expressions, JavaScript
+also has another very concise syntax for defining a function. These
+functions are called _arrow functions_.
 
+Callbacks are functions which are passed as arguments to another function.
+This is often done to control the order of execution in an asynchronous
+context. Writing a callback function is no different from writing
+a function, but the callback function's arguments must match the
+signature required by the calling function.
+
+<!-- prettier-ignore-start -->
 ```javascript
 const squareLength = 5;
 
@@ -15,21 +24,23 @@ function areaOfSquare(number) {
   return number * number;
 }
 
+// Written using arrow function syntax
+const areaOfSquare = (number) => number * number;
+
 applyToSquare(areaOfSquare); // => 25
 ```
+<!-- prettier-ignore-end -->
 
-You may also write callbacks as a function expression:
+Callbacks can be written as a function expression or an arrow function:
 
+<!-- prettier-ignore-start -->
 ```javascript
+// function expression
 applyToSquare(function squarePerimeter(side) {
   return side * 4;
 });
-```
 
-Or an anonymous inline arrow function expression:
-
-```javascript
-applyToSquare((side) => side * 4);
+// arrow function
+applyToSquare(side => side * 4)
 ```
-
-// The argument "(side) => side \* 4" is the callback
+<!-- prettier-ignore-end -->
diff --git a/exercises/concept/fruit-picker/.meta/design.md b/exercises/concept/fruit-picker/.meta/design.md
index 0477ff9c5f..b15e5925a4 100644
--- a/exercises/concept/fruit-picker/.meta/design.md
+++ b/exercises/concept/fruit-picker/.meta/design.md
@@ -19,7 +19,7 @@ In other words: how _function_ can be passed as an argument to another function,
 
 ## Concepts
 
-- `arrow functions`
+- `arrow-functions`
 - `callbacks`
 
 ## Prerequisites

From edd2569bdb9655d6cb6eea7192400d4c17894684 Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Thu, 7 Oct 2021 18:59:53 -0400
Subject: [PATCH 08/16] add to main config.json

---
 config.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/config.json b/config.json
index 1d1403ede2..bfcaee5556 100644
--- a/config.json
+++ b/config.json
@@ -1634,6 +1634,11 @@
       "slug": "arrays",
       "name": "Arrays"
     },
+    {
+      "uuid": "e7eea65d-5a13-44ee-aae6-113cfb234457",
+      "slug": "arrow-functions",
+      "name": "Arrow Functions"
+    },
     {
       "uuid": "611d6b3d-1241-4432-90f6-8fcffb36917c",
       "slug": "basics",

From 178fd913c7173a533b0c9b3f7d67acf5d4b8f871 Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Thu, 7 Oct 2021 19:05:50 -0400
Subject: [PATCH 09/16] remove wrapping of sentences

---
 concepts/arrow-functions/about.md             | 23 ++++++++-----------
 concepts/arrow-functions/introduction.md      | 23 ++++++++-----------
 .../fruit-picker/.docs/introduction.md        | 11 ++++-----
 3 files changed, 22 insertions(+), 35 deletions(-)

diff --git a/concepts/arrow-functions/about.md b/concepts/arrow-functions/about.md
index 975baad32b..039ff0a0c0 100644
--- a/concepts/arrow-functions/about.md
+++ b/concepts/arrow-functions/about.md
@@ -1,16 +1,13 @@
 # About
 
-Besides function declarations and function expressions, JavaScript
-also has another very concise syntax for defining a function. These
-functions are called _arrow functions_.
+Besides function declarations and function expressions, JavaScript also has another very concise syntax for defining a function.
+These functions are called _arrow functions_.
 
-There are differences in the way that an arrow function works, such
-as _this_ binding, and that will be covered in other concepts. This
-introduction will focus on the syntax used for an arrow function.
+There are differences in the way that an arrow function works, such as _this_ binding, and that will be covered in other concepts.
+This introduction will focus on the syntax used for an arrow function.
 
-Here is a comparison between a function declaration and an arrow
-function. As we continue down, we will continue to compare differences
-for reference.
+Here is a comparison between a function declaration and an arrow function.
+As we continue down, we will continue to compare differences for reference.
 
 ```javascript
 function addUpTwoNumbers(num1, num2) {
@@ -29,9 +26,8 @@ Above, you will see that the arrow function syntax:
 2. has declared the identifier `addUpTwoNumbers` as a `const`
 3. adds a fat arrow `=>`
 
-Notice that there is only one statement that is in the body of the
-function. When there is only one statement that is returned in the
-body, the `{}` and the `return` keyword can be omitted, like so:
+Notice that there is only one statement that is in the body of the function.
+When there is only one statement that is returned in the body, the `{}` and the `return` keyword can be omitted, like so:
 
 ```javascript
 // function expression
@@ -43,8 +39,7 @@ const addUpTwoNumbers = function (num1, num2) {
 const addUpTwoNumbers = (num1, num2) => num1 + num2; // braces - {} - and return removed
 ```
 
-Another example is when returning only an object from an arrow
-function, the syntax can be reduced like so:
+Another example is when returning only an object from an arrow function, the syntax can be reduced like so:
 
 ```javascript
 // explicit return of object
diff --git a/concepts/arrow-functions/introduction.md b/concepts/arrow-functions/introduction.md
index a04ba6333a..e0ac0cc28a 100644
--- a/concepts/arrow-functions/introduction.md
+++ b/concepts/arrow-functions/introduction.md
@@ -1,16 +1,13 @@
 # Introduction
 
-Besides function declarations and function expressions, JavaScript
-also has another very concise syntax for defining a function. These
-functions are called _arrow functions_.
+Besides function declarations and function expressions, JavaScript also has another very concise syntax for defining a function.
+These functions are called _arrow functions_.
 
-There are differences in the way that an arrow function works, such
-as _this_ binding, and that will be covered in other concepts. This
-introduction will focus on the syntax used for an arrow function.
+There are differences in the way that an arrow function works, such as _this_ binding, and that will be covered in other concepts.
+This introduction will focus on the syntax used for an arrow function.
 
-Here is a comparison between a function declaration and an arrow
-function. As we continue down, we will continue to compare differences
-for reference.
+Here is a comparison between a function declaration and an arrow function.
+As we continue down, we will continue to compare differences for reference.
 
 ```javascript
 function addUpTwoNumbers(num1, num2) {
@@ -29,9 +26,8 @@ Above, you will see that the arrow function syntax:
 2. has declared the identifier `addUpTwoNumbers` as a `const`
 3. adds a fat arrow `=>`
 
-Notice that there is only one statement that is in the body of the
-function. When there is only one statement that is returned in the
-body, the `{}` and the `return` keyword can be omitted, like so:
+Notice that there is only one statement that is in the body of the function.
+When there is only one statement that is returned in the body, the `{}` and the `return` keyword can be omitted, like so:
 
 ```javascript
 // function expression
@@ -43,8 +39,7 @@ const addUpTwoNumbers = function (num1, num2) {
 const addUpTwoNumbers = (num1, num2) => num1 + num2; // braces - {} - and return removed
 ```
 
-Another example is when returning only an object from an arrow
-function, the syntax can be reduced like so:
+Another example is when returning only an object from an arrow function, the syntax can be reduced like so:
 
 ```javascript
 // explicit return of object
diff --git a/exercises/concept/fruit-picker/.docs/introduction.md b/exercises/concept/fruit-picker/.docs/introduction.md
index cc12380552..3de004bebd 100644
--- a/exercises/concept/fruit-picker/.docs/introduction.md
+++ b/exercises/concept/fruit-picker/.docs/introduction.md
@@ -1,14 +1,11 @@
 # Introduction
 
-Besides function declarations and function expressions, JavaScript
-also has another very concise syntax for defining a function. These
-functions are called _arrow functions_.
+Besides function declarations and function expressions, JavaScript also has another very concise syntax for defining a function.
+These functions are called _arrow functions_.
 
 Callbacks are functions which are passed as arguments to another function.
-This is often done to control the order of execution in an asynchronous
-context. Writing a callback function is no different from writing
-a function, but the callback function's arguments must match the
-signature required by the calling function.
+This is often done to control the order of execution in an asynchronous context.
+Writing a callback function is no different from writing a function, but the callback function's arguments must match the signature required by the calling function.
 
 <!-- prettier-ignore-start -->
 ```javascript

From f066519ca8bf335cccc2b5892676e4dbf2b66a14 Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Thu, 7 Oct 2021 19:16:13 -0400
Subject: [PATCH 10/16] fix link for javascript.info

---
 concepts/arrow-functions/links.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/concepts/arrow-functions/links.json b/concepts/arrow-functions/links.json
index c8fc88ea46..d80ae90cd5 100644
--- a/concepts/arrow-functions/links.json
+++ b/concepts/arrow-functions/links.json
@@ -5,6 +5,6 @@
   },
   {
     "url": "https://javascript.info/arrow-functions-basics",
-    "description": "Javascript Info: Arrow functions, the basics"
+    "description": "javascript.info: Arrow functions, the basics"
   }
 ]

From 540581def5121840ce213d4245d39f6e0227036b Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Thu, 7 Oct 2021 19:19:07 -0400
Subject: [PATCH 11/16] update fruit picker objectives

---
 exercises/concept/fruit-picker/.meta/design.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/exercises/concept/fruit-picker/.meta/design.md b/exercises/concept/fruit-picker/.meta/design.md
index b15e5925a4..3630cf7a31 100644
--- a/exercises/concept/fruit-picker/.meta/design.md
+++ b/exercises/concept/fruit-picker/.meta/design.md
@@ -11,6 +11,7 @@ In other words: how _function_ can be passed as an argument to another function,
 - Function that can pass along a callback function as an argument
 - How to write a function that can be used as a callback
 - How to compose functions with callbacks
+- Functions using arrow functions
 
 ## Out of scope
 

From 2f0d17f10f978a93e372dccdd1caf627d7a692a7 Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Sat, 9 Oct 2021 08:15:44 -0400
Subject: [PATCH 12/16] modify fn using single param

---
 concepts/arrow-functions/about.md        | 2 +-
 concepts/arrow-functions/introduction.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/concepts/arrow-functions/about.md b/concepts/arrow-functions/about.md
index 039ff0a0c0..8ab3c33cb7 100644
--- a/concepts/arrow-functions/about.md
+++ b/concepts/arrow-functions/about.md
@@ -59,7 +59,7 @@ The use of parenthesis around parameters depends on the number of parameters:
 <!-- prettier-ignore-start -->
 ```javascript
 // one parameter does not need parenthesis
-const addUpTwoNumbers = num1 => num1;
+const square = num => num * num;
 
 // two or more parameters need to be wrapped in parenthesis
 const addUpTwoNumbers = (num1, num2) => num1 + num2;
diff --git a/concepts/arrow-functions/introduction.md b/concepts/arrow-functions/introduction.md
index e0ac0cc28a..ad679720f8 100644
--- a/concepts/arrow-functions/introduction.md
+++ b/concepts/arrow-functions/introduction.md
@@ -59,7 +59,7 @@ The use of parenthesis around parameters depends on the number of parameters:
 <!-- prettier-ignore-start -->
 ```javascript
 // one parameter does not need parenthesis
-const addUpTwoNumbers = num1 => num1;
+const square = num => num * num;
 
 // two or more parameters need to be wrapped in parenthesis
 const addUpTwoNumbers = (num1, num2) => num1 + num2;

From fe357136ba3f7af3da16698c709039eee50fac5f Mon Sep 17 00:00:00 2001
From: junedev <12543047+junedev@users.noreply.github.com>
Date: Sat, 9 Oct 2021 20:37:05 +0200
Subject: [PATCH 13/16] some wording fixes

---
 concepts/arrow-functions/about.md        | 32 ++++++++++--------------
 concepts/arrow-functions/introduction.md | 24 ++++++++----------
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/concepts/arrow-functions/about.md b/concepts/arrow-functions/about.md
index 8ab3c33cb7..a188fdefa6 100644
--- a/concepts/arrow-functions/about.md
+++ b/concepts/arrow-functions/about.md
@@ -3,11 +3,10 @@
 Besides function declarations and function expressions, JavaScript also has another very concise syntax for defining a function.
 These functions are called _arrow functions_.
 
-There are differences in the way that an arrow function works, such as _this_ binding, and that will be covered in other concepts.
-This introduction will focus on the syntax used for an arrow function.
+In this concept will focus on the syntax used to write an arrow function.
+There are differences in the way that an arrow function works, such as _this_ binding, that will be covered in other concepts.
 
 Here is a comparison between a function declaration and an arrow function.
-As we continue down, we will continue to compare differences for reference.
 
 ```javascript
 function addUpTwoNumbers(num1, num2) {
@@ -26,35 +25,31 @@ Above, you will see that the arrow function syntax:
 2. has declared the identifier `addUpTwoNumbers` as a `const`
 3. adds a fat arrow `=>`
 
-Notice that there is only one statement that is in the body of the function.
-When there is only one statement that is returned in the body, the `{}` and the `return` keyword can be omitted, like so:
+If the function body contains only a return statement, like in the example above, the `{}` and the `return` keyword can be omitted.
 
+<!-- prettier-ignore-start -->
 ```javascript
-// function expression
-const addUpTwoNumbers = function (num1, num2) {
-  return num1 + num2;
-};
+const addUpTwoNumbers = (num1, num2) => { return num1 + num2 };
 
-// arrow function
-const addUpTwoNumbers = (num1, num2) => num1 + num2; // braces - {} - and return removed
+// can be shortened to
+const addUpTwoNumbers = (num1, num2) => num1 + num2;
+// braces {} and return removed
 ```
+<!-- prettier-ignore-end -->
 
-Another example is when returning only an object from an arrow function, the syntax can be reduced like so:
+In the special case of only returning an object from an arrow function, parenthesis are needed around the object to be able to omit the return statement.
 
 ```javascript
 // explicit return of object
 const addUpTwoNumbers = (num1, num2) => {
-  return {
-    num1,
-    num2,
-  };
+  return { num1, num2 };
 };
 
 // implicit return of object
 const addUpTwoNumbers = (num1, num2) => ({ num1, num2 });
 ```
 
-The use of parenthesis around parameters depends on the number of parameters:
+The use of parenthesis around parameters depends on the number of parameters.
 
 <!-- prettier-ignore-start -->
 ```javascript
@@ -66,8 +61,7 @@ const addUpTwoNumbers = (num1, num2) => num1 + num2;
 ```
 <!-- prettier-ignore-end -->
 
-Other concepts that are taught such as [Rest Parameters][concept-rest] and
-[Destructuring][concept-destructure] can be used with an arrow function.
+Other concepts such as [Rest Parameters][concept-rest] and [Destructuring][concept-destructure] can also be used with an arrow function.
 
 [concept-rest]: /tracks/javascript/concepts/rest-and-spread
 [concept-destructure]: /tracks/javascript/concepts/array-destructuring
diff --git a/concepts/arrow-functions/introduction.md b/concepts/arrow-functions/introduction.md
index ad679720f8..3e1b1bbb64 100644
--- a/concepts/arrow-functions/introduction.md
+++ b/concepts/arrow-functions/introduction.md
@@ -3,11 +3,10 @@
 Besides function declarations and function expressions, JavaScript also has another very concise syntax for defining a function.
 These functions are called _arrow functions_.
 
-There are differences in the way that an arrow function works, such as _this_ binding, and that will be covered in other concepts.
-This introduction will focus on the syntax used for an arrow function.
+In this concept will focus on the syntax used to write an arrow function.
+There are differences in the way that an arrow function works, such as _this_ binding, that will be covered in other concepts.
 
 Here is a comparison between a function declaration and an arrow function.
-As we continue down, we will continue to compare differences for reference.
 
 ```javascript
 function addUpTwoNumbers(num1, num2) {
@@ -26,20 +25,19 @@ Above, you will see that the arrow function syntax:
 2. has declared the identifier `addUpTwoNumbers` as a `const`
 3. adds a fat arrow `=>`
 
-Notice that there is only one statement that is in the body of the function.
-When there is only one statement that is returned in the body, the `{}` and the `return` keyword can be omitted, like so:
+If the function body contains only a return statement, like in the example above, the `{}` and the `return` keyword can be omitted.
 
+<!-- prettier-ignore-start -->
 ```javascript
-// function expression
-const addUpTwoNumbers = function (num1, num2) {
-  return num1 + num2;
-};
+const addUpTwoNumbers = (num1, num2) => { return num1 + num2 };
 
-// arrow function
-const addUpTwoNumbers = (num1, num2) => num1 + num2; // braces - {} - and return removed
+// can be shortened to
+const addUpTwoNumbers = (num1, num2) => num1 + num2;
+// braces {} and return removed
 ```
+<!-- prettier-ignore-end -->
 
-Another example is when returning only an object from an arrow function, the syntax can be reduced like so:
+In the special case of only returning an object from an arrow function, parenthesis are needed around the object to be able to omit the return statement.
 
 ```javascript
 // explicit return of object
@@ -54,7 +52,7 @@ const addUpTwoNumbers = (num1, num2) => {
 const addUpTwoNumbers = (num1, num2) => ({ num1, num2 });
 ```
 
-The use of parenthesis around parameters depends on the number of parameters:
+The use of parenthesis around parameters depends on the number of parameters.
 
 <!-- prettier-ignore-start -->
 ```javascript

From 56f611353e7d4189c13e33db0dd74e61b73bd585 Mon Sep 17 00:00:00 2001
From: junedev <12543047+junedev@users.noreply.github.com>
Date: Sat, 9 Oct 2021 20:37:19 +0200
Subject: [PATCH 14/16] use new intro as blurb

---
 concepts/arrow-functions/.meta/config.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/concepts/arrow-functions/.meta/config.json b/concepts/arrow-functions/.meta/config.json
index 9b63504794..486929ac62 100644
--- a/concepts/arrow-functions/.meta/config.json
+++ b/concepts/arrow-functions/.meta/config.json
@@ -1,5 +1,5 @@
 {
-  "blurb": "An arrow function is a less verbose usage of function syntax.",
+  "blurb": "Besides function declarations and function expressions, JavaScript also has another very concise syntax for defining a function. These functions are called arrow functions.",
   "authors": ["pertrai1"],
-  "contributors": ["pertrai1"]
+  "contributors": []
 }

From 5fb9c0914ccd2d25c07f9938fa48d650765708ee Mon Sep 17 00:00:00 2001
From: junedev <12543047+junedev@users.noreply.github.com>
Date: Sat, 9 Oct 2021 20:37:28 +0200
Subject: [PATCH 15/16] restructure exercise intro

---
 .../fruit-picker/.docs/introduction.md        | 52 +++++++++++++------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/exercises/concept/fruit-picker/.docs/introduction.md b/exercises/concept/fruit-picker/.docs/introduction.md
index 3de004bebd..edda65d170 100644
--- a/exercises/concept/fruit-picker/.docs/introduction.md
+++ b/exercises/concept/fruit-picker/.docs/introduction.md
@@ -1,13 +1,9 @@
 # Introduction
 
-Besides function declarations and function expressions, JavaScript also has another very concise syntax for defining a function.
-These functions are called _arrow functions_.
+## Callbacks
 
-Callbacks are functions which are passed as arguments to another function.
-This is often done to control the order of execution in an asynchronous context.
-Writing a callback function is no different from writing a function, but the callback function's arguments must match the signature required by the calling function.
+Callbacks are functions which are passed as arguments to another function. This is often done to control the order of execution in an asynchronous context. Writing a callback function is no different from writing a function, but the callback function's arguments must match the signature required by the calling function.
 
-<!-- prettier-ignore-start -->
 ```javascript
 const squareLength = 5;
 
@@ -21,23 +17,49 @@ function areaOfSquare(number) {
   return number * number;
 }
 
-// Written using arrow function syntax
-const areaOfSquare = (number) => number * number;
-
 applyToSquare(areaOfSquare); // => 25
 ```
-<!-- prettier-ignore-end -->
 
-Callbacks can be written as a function expression or an arrow function:
+You may also write callbacks as a function expression:
 
-<!-- prettier-ignore-start -->
 ```javascript
-// function expression
 applyToSquare(function squarePerimeter(side) {
   return side * 4;
 });
+```
+
+## Arrow Functions
+
+Besides function declarations and function expressions, JavaScript also has another very concise syntax for defining a function.
+These functions are called _arrow functions_.
+
+Here is a comparison between a function declaration and an arrow function.
+
+```javascript
+function addUpTwoNumbers(num1, num2) {
+  return num1 + num2;
+}
+
+// function keyword removed and => added
+const addUpTwoNumbers = (num1, num2) => {
+  return num1 + num2;
+};
+```
 
-// arrow function
-applyToSquare(side => side * 4)
+If the function body contains only a return statement, like in the example above, the `{}` and the `return` keyword can be omitted.
+If there is only one parameter, the parenthesis `()` can be omitted as well.
+
+<!-- prettier-ignore-start -->
+```javascript
+const addUpTwoNumbers = (num1, num2) => num1 + num2;
+const square = num => num * num;
+```
+<!-- prettier-ignore-end -->
+
+Arrow functions are often uses to define short callback functions directly in the function call.
+
+<!-- prettier-ignore-start -->
+```javascript
+applyToSquare(number => number * number);
 ```
 <!-- prettier-ignore-end -->

From d0a66c21031d9aaeaa4cb8e57c51ae59df008406 Mon Sep 17 00:00:00 2001
From: junedev <12543047+junedev@users.noreply.github.com>
Date: Sat, 9 Oct 2021 20:49:14 +0200
Subject: [PATCH 16/16] add arrow functions as prerequisites where needed

---
 config.json | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/config.json b/config.json
index bfcaee5556..4bb23c61a4 100644
--- a/config.json
+++ b/config.json
@@ -109,7 +109,13 @@
         "name": "Elyses Analytic Enchantments",
         "uuid": "45d956db-d4ef-4468-b1d3-47021f172c15",
         "concepts": ["array-analysis"],
-        "prerequisites": ["arrays", "booleans", "callbacks", "numbers"],
+        "prerequisites": [
+          "arrays",
+          "booleans",
+          "callbacks",
+          "arrow-functions",
+          "numbers"
+        ],
         "status": "beta"
       },
       {
@@ -125,7 +131,13 @@
         "name": "Elyses Looping Enchantments",
         "uuid": "e06f8f70-019f-4cec-924b-3971414e15d9",
         "concepts": ["array-loops"],
-        "prerequisites": ["arrays", "callbacks", "for-loops", "conditionals"],
+        "prerequisites": [
+          "arrays",
+          "callbacks",
+          "arrow-functions",
+          "for-loops",
+          "conditionals"
+        ],
         "status": "beta"
       },
       {
@@ -178,7 +190,7 @@
         "name": "Translation Service",
         "uuid": "4a967656-8615-474e-a009-5c0b09f4386f",
         "concepts": ["promises"],
-        "prerequisites": ["callbacks", "errors"],
+        "prerequisites": ["callbacks", "arrow-functions", "errors"],
         "status": "beta"
       },
       {
@@ -224,7 +236,7 @@
         "name": "Elyses Transformative Enchantments",
         "uuid": "6e156d67-2bd2-4624-956d-ddcc3795bad5",
         "concepts": ["array-transformations"],
-        "prerequisites": ["arrays", "callbacks"],
+        "prerequisites": ["arrays", "callbacks", "arrow-functions"],
         "status": "wip"
       }
     ],