diff --git a/concepts/arrow-functions/.meta/config.json b/concepts/arrow-functions/.meta/config.json new file mode 100644 index 0000000000..486929ac62 --- /dev/null +++ b/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": [] +} diff --git a/concepts/arrow-functions/about.md b/concepts/arrow-functions/about.md new file mode 100644 index 0000000000..a188fdefa6 --- /dev/null +++ b/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. + + +```javascript +const addUpTwoNumbers = (num1, num2) => { return num1 + num2 }; + +// can be shortened to +const addUpTwoNumbers = (num1, num2) => num1 + num2; +// braces {} and return removed +``` + + +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. + + +```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; +``` + + +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 new file mode 100644 index 0000000000..3e1b1bbb64 --- /dev/null +++ b/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. + + +```javascript +const addUpTwoNumbers = (num1, num2) => { return num1 + num2 }; + +// can be shortened to +const addUpTwoNumbers = (num1, num2) => num1 + num2; +// braces {} and return removed +``` + + +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. + + +```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; +``` + diff --git a/concepts/arrow-functions/links.json b/concepts/arrow-functions/links.json new file mode 100644 index 0000000000..d80ae90cd5 --- /dev/null +++ b/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" + } +] diff --git a/config.json b/config.json index e1ae50803c..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" }, { @@ -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", diff --git a/exercises/concept/fruit-picker/.docs/introduction.md b/exercises/concept/fruit-picker/.docs/introduction.md index 0d8409566e..edda65d170 100644 --- a/exercises/concept/fruit-picker/.docs/introduction.md +++ b/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. + ```javascript -applyToSquare((side) => side * 4); +const addUpTwoNumbers = (num1, num2) => num1 + num2; +const square = num => num * num; ``` + -// The argument "(side) => side \* 4" is the callback +Arrow functions are often uses to define short callback functions directly in the function call. + + +```javascript +applyToSquare(number => number * number); +``` + diff --git a/exercises/concept/fruit-picker/.meta/design.md b/exercises/concept/fruit-picker/.meta/design.md index 9c16658f4f..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 @@ -19,6 +20,7 @@ In other words: how _function_ can be passed as an argument to another function, ## Concepts +- `arrow-functions` - `callbacks` ## Prerequisites