From 6165a9a727655c0a2b367f480be51108f3891d41 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Wed, 6 Nov 2019 14:05:43 +0300 Subject: [PATCH] split arrow functions --- .../article.md | 108 +----------------- .../1-rewrite-arrow/solution.md | 0 .../1-rewrite-arrow/task.md | 2 +- .../16-arrow-functions-basics/article.md | 107 +++++++++++++++++ .../article.md | 0 .../05-data-types/05-array-methods/article.md | 2 +- 6 files changed, 110 insertions(+), 109 deletions(-) rename 1-js/02-first-steps/{15-function-expressions-arrows => 15-function-expressions}/article.md (79%) rename 1-js/02-first-steps/{15-function-expressions-arrows => 16-arrow-functions-basics}/1-rewrite-arrow/solution.md (100%) rename 1-js/02-first-steps/{15-function-expressions-arrows => 16-arrow-functions-basics}/1-rewrite-arrow/task.md (78%) create mode 100644 1-js/02-first-steps/16-arrow-functions-basics/article.md rename 1-js/02-first-steps/{16-javascript-specials => 17-javascript-specials}/article.md (100%) diff --git a/1-js/02-first-steps/15-function-expressions-arrows/article.md b/1-js/02-first-steps/15-function-expressions/article.md similarity index 79% rename from 1-js/02-first-steps/15-function-expressions-arrows/article.md rename to 1-js/02-first-steps/15-function-expressions/article.md index 78f3d9c3..a8ccd6c6 100644 --- a/1-js/02-first-steps/15-function-expressions-arrows/article.md +++ b/1-js/02-first-steps/15-function-expressions/article.md @@ -1,4 +1,4 @@ -# Function expressions and arrows +# Function expressions In JavaScript, a function is not a "magical language structure", but a special kind of value. @@ -355,107 +355,6 @@ That's also better for readability, as it's easier to look up `function f(…) { ...But if a Function Declaration does not suit us for some reason, or we need a conditional declaration (we've just seen an example), then Function Expression should be used. ``` - -## Arrow functions [#arrow-functions] - -There's one more very simple and concise syntax for creating functions, that's often better than Function Expressions. It's called "arrow functions", because it looks like this: - - -```js -let func = (arg1, arg2, ...argN) => expression -``` - -...This creates a function `func` that has arguments `arg1..argN`, evaluates the `expression` on the right side with their use and returns its result. - -In other words, it's roughly the same as: - -```js -let func = function(arg1, arg2, ...argN) { - return expression; -}; -``` - -...But much more concise. - -Let's see an example: - -```js run -let sum = (a, b) => a + b; - -/* The arrow function is a shorter form of: - -let sum = function(a, b) { - return a + b; -}; -*/ - -alert( sum(1, 2) ); // 3 - -``` - -If we have only one argument, then parentheses around parameters can be omitted, making that even shorter: - -```js run -// same as -// let double = function(n) { return n * 2 } -*!* -let double = n => n * 2; -*/!* - -alert( double(3) ); // 6 -``` - -If there are no arguments, parentheses should be empty (but they should be present): - -```js run -let sayHi = () => alert("Hello!"); - -sayHi(); -``` - -Arrow functions can be used in the same way as Function Expressions. - -For instance, here's the rewritten example with `welcome()`: - -```js run -let age = prompt("What is your age?", 18); - -let welcome = (age < 18) ? - () => alert('Hello') : - () => alert("Greetings!"); - -welcome(); // ok now -``` - -Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure. - -They are very convenient for simple one-line actions, when we're just too lazy to write many words. - -```smart header="Multiline arrow functions" - -The examples above took arguments from the left of `=>` and evaluated the right-side expression with them. - -Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in curly braces. Then use a normal `return` within them. - -Like this: - -```js run -let sum = (a, b) => { // the curly brace opens a multiline function - let result = a + b; -*!* - return result; // if we use curly braces, use return to get results -*/!* -}; - -alert( sum(1, 2) ); // 3 -``` - -```smart header="More to come" -Here we praised arrow functions for brevity. But that's not all! Arrow functions have other interesting features. We'll return to them later in the chapter . - -For now, we can already use arrow functions for one-line actions and callbacks. -``` - ## Summary - Functions are values. They can be assigned, copied or declared in any place of the code. @@ -467,8 +366,3 @@ For now, we can already use arrow functions for one-line actions and callbacks. In most cases when we need to declare a function, a Function Declaration is preferable, because it is visible prior to the declaration itself. That gives us more flexibility in code organization, and is usually more readable. So we should use a Function Expression only when a Function Declaration is not fit for the task. We've seen a couple of examples of that in this chapter, and will see more in the future. - -Arrow functions are handy for one-liners. They come in two flavors: - -1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result. -2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something. diff --git a/1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/solution.md b/1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/solution.md similarity index 100% rename from 1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/solution.md rename to 1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/solution.md diff --git a/1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/task.md b/1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/task.md similarity index 78% rename from 1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/task.md rename to 1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/task.md index a888ac15..2f44db27 100644 --- a/1-js/02-first-steps/15-function-expressions-arrows/1-rewrite-arrow/task.md +++ b/1-js/02-first-steps/16-arrow-functions-basics/1-rewrite-arrow/task.md @@ -1,7 +1,7 @@ # Rewrite with arrow functions -Replace Function Expressions with arrow functions in the code: +Replace Function Expressions with arrow functions in the code below: ```js run function ask(question, yes, no) { diff --git a/1-js/02-first-steps/16-arrow-functions-basics/article.md b/1-js/02-first-steps/16-arrow-functions-basics/article.md new file mode 100644 index 00000000..b0086873 --- /dev/null +++ b/1-js/02-first-steps/16-arrow-functions-basics/article.md @@ -0,0 +1,107 @@ +# Arrow functions, the basics + +There's another very simple and concise syntax for creating functions, that's often better than Function Expressions. + +It's called "arrow functions", because it looks like this: + +```js +let func = (arg1, arg2, ...argN) => expression +``` + +...This creates a function `func` that accepts arguments `arg1..argN`, then evaluates the `expression` on the right side with their use and returns its result. + +In other words, it's the shorter version of: + +```js +let func = function(arg1, arg2, ...argN) { + return expression; +}; +``` + +Let's see a concrete example: + +```js run +let sum = (a, b) => a + b; + +/* This arrow function is a shorter form of: + +let sum = function(a, b) { + return a + b; +}; +*/ + +alert( sum(1, 2) ); // 3 +``` + +As you can, see `(a, b) => a + b` means a function that accepts two arguments named `a` and `b`. Upon the execution, it evaluates the expression `a + b` and returns the result. + +- If we have only one argument, then parentheses around parameters can be omitted, making that even shorter. + + For example: + + ```js run + *!* + let double = n => n * 2; + // roughly the same as: let double = function(n) { return n * 2 } + */!* + + alert( double(3) ); // 6 + ``` + +- If there are no arguments, parentheses will be empty (but they should be present): + + ```js run + let sayHi = () => alert("Hello!"); + + sayHi(); + ``` + +Arrow functions can be used in the same way as Function Expressions. + +For instance, to dynamically create a function: + +```js run +let age = prompt("What is your age?", 18); + +let welcome = (age < 18) ? + () => alert('Hello') : + () => alert("Greetings!"); + +welcome(); // ok now +``` + +Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure. + +They are very convenient for simple one-line actions, when we're just too lazy to write many words. + +## Multiline arrow functions + +The examples above took arguments from the left of `=>` and evaluated the right-side expression with them. + +Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in curly braces. Then use a normal `return` within them. + +Like this: + +```js run +let sum = (a, b) => { // the curly brace opens a multiline function + let result = a + b; +*!* + return result; // if we use curly braces, use return to get results +*/!* +}; + +alert( sum(1, 2) ); // 3 +``` + +```smart header="More to come" +Here we praised arrow functions for brevity. But that's not all! Arrow functions have other interesting features. We'll return to them later in the chapter . + +For now, we can already use arrow functions for one-line actions and callbacks. +``` + +## Summary + +Arrow functions are handy for one-liners. They come in two flavors: + +1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result. +2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something. diff --git a/1-js/02-first-steps/16-javascript-specials/article.md b/1-js/02-first-steps/17-javascript-specials/article.md similarity index 100% rename from 1-js/02-first-steps/16-javascript-specials/article.md rename to 1-js/02-first-steps/17-javascript-specials/article.md diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index 964fb169..5a1a7762 100644 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -447,7 +447,7 @@ alert(arr); // *!*1, 2, 15*/!* ```` ````smart header="Arrow functions for the best" -Remember [arrow functions](info:function-expressions-arrows#arrow-functions)? We can use them here for neater sorting: +Remember [arrow functions](info:arrow-functions-basics)? We can use them here for neater sorting: ```js arr.sort( (a, b) => a - b );