minor
This commit is contained in:
parent
fc66b43ce3
commit
b7a0591007
3 changed files with 8 additions and 18 deletions
|
@ -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`.
|
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`".
|
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`:
|
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:
|
Note that we could also have used a Function Expression to declare `sayHi`, in the first line:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
let sayHi = function() { ... };
|
let sayHi = function() {
|
||||||
|
alert( "Hello" );
|
||||||
|
};
|
||||||
|
|
||||||
let func = sayHi;
|
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?"
|
````smart header="Why is there a semicolon at the end?"
|
||||||
|
@ -131,11 +132,11 @@ function showCancel() {
|
||||||
ask("Do you agree?", showOk, 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 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:
|
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.
|
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.
|
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\""
|
```smart header="A function is a value representing an \"action\""
|
||||||
Regular values like strings or numbers represent the *data*.
|
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 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.
|
- 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.
|
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.
|
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.
|
||||||
|
|
|
@ -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:
|
3. Arrow functions:
|
||||||
|
|
||||||
```js
|
```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) {...}`.
|
- 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`.
|
- Functions always return something. If there's no `return` statement, then the result is `undefined`.
|
||||||
|
|
||||||
|
Details: see <info:function-basics>, <info:function-expressions-arrows>.
|
||||||
| 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>.
|
|
||||||
|
|
||||||
## More to come
|
## More to come
|
||||||
|
|
||||||
|
|
|
@ -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
|
```js run
|
||||||
let sayHi = function(who) {
|
let sayHi = function(who) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue