This commit is contained in:
Ilya Kantor 2019-08-06 09:50:01 +03:00
parent fc66b43ce3
commit b7a0591007
3 changed files with 8 additions and 18 deletions

View file

@ -22,7 +22,6 @@ let sayHi = function() {
Here, the function is created and assigned to the variable explicitly, like any other value. No matter how the function is defined, it's just a value stored in the variable `sayHi`.
The meaning of these code samples is the same: "create a function and put it into the variable `sayHi`".
We can even print out that value using `alert`:
@ -67,13 +66,15 @@ Here's what happens above in detail:
Note that we could also have used a Function Expression to declare `sayHi`, in the first line:
```js
let sayHi = function() { ... };
let sayHi = function() {
alert( "Hello" );
};
let func = sayHi;
// ...
```
Everything would work the same. Even more obvious what's going on, right?
Everything would work the same.
````smart header="Why is there a semicolon at the end?"
@ -131,11 +132,11 @@ function showCancel() {
ask("Do you agree?", showOk, showCancel);
```
Before we explore how we can write it in a much shorter way, let's note that in the browser (and on the server-side in some cases) such functions are quite popular. The major difference between a real-life implementation and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such a function usually draws a nice-looking question window. But that's another story.
In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such function usually draws a nice-looking question window. But that's another story.
**The arguments `showOk` and `showCancel` of `ask` are called *callback functions* or just *callbacks*.**
The idea is that we pass a function and expect it to be "called back" later if necessary. In our case, `showOk` becomes the callback for the "yes" answer, and `showCancel` for the "no" answer.
The idea is that we pass a function and expect it to be "called back" later if necessary. In our case, `showOk` becomes the callback for "yes" answer, and `showCancel` for "no" answer.
We can use Function Expressions to write the same function much shorter:
@ -154,12 +155,10 @@ ask(
*/!*
```
Here, functions are declared right inside the `ask(...)` call. They have no name, and so are called *anonymous*. Such functions are not accessible outside of `ask` (because they are not assigned to variables), but that's just what we want here.
Such code appears in our scripts very naturally, it's in the spirit of JavaScript.
```smart header="A function is a value representing an \"action\""
Regular values like strings or numbers represent the *data*.
@ -465,7 +464,6 @@ For now, we can already use them for one-line actions and callbacks.
- Function Declarations are processed before the code block is executed. They are visible everywhere in the block.
- Function Expressions are created when the execution flow reaches them.
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.

View file

@ -248,8 +248,6 @@ We covered three ways to create a function in JavaScript:
};
```
Function expressions can have a name, like `sum = function name(a, b)`, but that `name` is only visible inside that function.
3. Arrow functions:
```js
@ -274,13 +272,7 @@ We covered three ways to create a function in JavaScript:
- Parameters can have default values: `function sum(a = 1, b = 2) {...}`.
- Functions always return something. If there's no `return` statement, then the result is `undefined`.
| Function Declaration | Function Expression |
|----------------------|---------------------|
| visible in the whole code block/script | created when the execution reaches it |
| | can have a name, visible only inside the function |
More: see <info:function-basics>, <info:function-expressions-arrows>.
Details: see <info:function-basics>, <info:function-expressions-arrows>.
## More to come

View file

@ -282,7 +282,7 @@ let sayHi = function(who) {
};
```
The problem with that code is that the value of `sayHi` may change. The function may go to another variable, and the code will start to give errors:
The problem with that code is that `sayHi` may change in the outer code. If the function gets assigned to another variable instead, the code will start to give errors:
```js run
let sayHi = function(who) {