[Concept]: Arrow Functions

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

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

concepts/arrow-functions/about.md

@@ -0,0 +1,67 @@
+# About
+
+Besides function declarations and function expressions, JavaScript also has another very concise syntax for defining a function.
+These functions are called _arrow functions_.
+
+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.
+
+```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 `=>`
+
+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
+const addUpTwoNumbers = (num1, num2) => { return num1 + num2 };
+
+// can be shortened to
+const addUpTwoNumbers = (num1, num2) => num1 + num2;
+// braces {} and return removed
+```
+<!-- prettier-ignore-end -->
+
+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 };
+};
+
+// 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 square = num => num * num;
+
+// two or more parameters need to be wrapped in parenthesis
+const addUpTwoNumbers = (num1, num2) => num1 + num2;
+```
+<!-- prettier-ignore-end -->
+
+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

concepts/arrow-functions/introduction.md

@@ -0,0 +1,65 @@
+# Introduction
+
+Besides function declarations and function expressions, JavaScript also has another very concise syntax for defining a function.
+These functions are called _arrow functions_.
+
+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.
+
+```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 `=>`
+
+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
+const addUpTwoNumbers = (num1, num2) => { return num1 + num2 };
+
+// can be shortened to
+const addUpTwoNumbers = (num1, num2) => num1 + num2;
+// braces {} and return removed
+```
+<!-- prettier-ignore-end -->
+
+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,
+  };
+};
+
+// 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 square = num => num * num;
+
+// 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

@@ -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"
       },
       {
@@ -169,7 +181,7 @@
         "slug": "fruit-picker",
         "name": "Fruit Picker",
         "uuid": "a6348db8-cc2b-4c53-9f43-3c23248d66f0",
-        "concepts": ["callbacks"],
+        "concepts": ["callbacks", "arrow-functions"],
         "prerequisites": ["functions", "objects"],
         "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"
       }
     ],
@@ -1634,6 +1646,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",

exercises/concept/fruit-picker/.docs/introduction.md

@@ -1,5 +1,7 @@
 # Introduction
 
+## 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.
 
 ```javascript
@@ -26,10 +28,38 @@ applyToSquare(function squarePerimeter(side) {
 });
 ```
 
-Or an anonymous inline arrow function expression:
+## 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;
+};
+```
+
+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
-applyToSquare((side) => side * 4);
+const addUpTwoNumbers = (num1, num2) => num1 + num2;
+const square = num => num * num;
 ```
+<!-- prettier-ignore-end -->
 
-// The argument "(side) => side \* 4" is the callback
+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 -->

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
 
@@ -19,6 +20,7 @@ In other words: how _function_ can be passed as an argument to another function,
 
 ## Concepts
 
+- `arrow-functions`
 - `callbacks`
 
 ## Prerequisites