[Concept]: Arrow Functions

concepts/arrow-functions/.meta/config.json

@@ -0,0 +1,5 @@
+{
+  "blurb": "An arrow function is a less verbose usage of function syntax.",
+  "authors": ["pertrai1"],
+  "contributors": ["pertrai1"]
+}

concepts/arrow-functions/about.md

@@ -0,0 +1,78 @@
+# About
+
+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.
+
+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) {
+  return num1 + num2;
+}
+
+// function keyword removed and => added
+const addUpTwoNumbers = (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 `=>`
+
+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
+const addUpTwoNumbers = function (num1, num2) {
+  return num1 + num2;
+};
+
+// arrow function
+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:
+
+```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;
+
+// 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 Parameters][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

concepts/arrow-functions/introduction.md

@@ -0,0 +1,72 @@
+# Introduction
+
+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.
+
+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) {
+  return num1 + num2;
+}
+
+// function keyword removed and => added
+const addUpTwoNumbers = (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 `=>`
+
+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
+const addUpTwoNumbers = function (num1, num2) {
+  return num1 + num2;
+};
+
+// arrow function
+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:
+
+```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;
+
+// two or more parameters need to be wrapped in parenthesis
+const addUpTwoNumbers = (num1, num2) => num1 + num2;
+```
+<!-- prettier-ignore-end -->

concepts/arrow-functions/links.json

@@ -0,0 +1,10 @@
+[
+  {
+    "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"
+  }
+]

config.json

@@ -169,7 +169,7 @@
         "slug": "fruit-picker",
         "name": "Fruit Picker",
         "uuid": "a6348db8-cc2b-4c53-9f43-3c23248d66f0",
-        "concepts": ["callbacks"],
+        "concepts": ["callbacks", "arrow-functions"],
         "prerequisites": ["functions", "objects"],
         "status": "beta"
       },

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 -->

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