Finished Chapter 8.1 Defining Functions
parent
e89c7ea3f7
commit
95764a8835
|
@ -77,7 +77,64 @@ let tensquared = (function(x) {return x*x;}(10));
|
||||||
* How FE use variable: developer can decide whether assign the newly defined function obj to a const or var, so we can refer to it mult-times later. (e.g. 3rd & 5th FE e.g. does not assign function obj to obj, and directly use it)
|
* How FE use variable: developer can decide whether assign the newly defined function obj to a const or var, so we can refer to it mult-times later. (e.g. 3rd & 5th FE e.g. does not assign function obj to obj, and directly use it)
|
||||||
* Good practice: assign FE to `const` to protect function obj.
|
* Good practice: assign FE to `const` to protect function obj.
|
||||||
|
|
||||||
FD vs (assign FE to variable after creation):
|
**FD vs. FE**:
|
||||||
* Function defined by FD: the func obj are created before the script get executed (i.e. hoisted), so we can call these functions from code that appears above FD.
|
* Function defined by FD: the func obj are created before the script get executed (i.e. hoisted), so we can call these functions from code that appears above FD.
|
||||||
* Functions defined by FE **DO NOT EXIST** until FE are evaluated.
|
* Functions defined by FE **DO NOT EXIST** until FE are evaluated.
|
||||||
* To invoke a function (either defined using FE/FD), JS must can refer to it, function defined by FE cannot be referred until it's assigned to a variable
|
* To invoke a function (either defined using FE/FD), JS must can refer to it, function defined by FE cannot be referred until it's assigned to a variable
|
||||||
|
|
||||||
|
### 8.1.3 Arrow Functions
|
||||||
|
|
||||||
|
In ES6, **Arrow Function** provide more compact function syntax. **Use arrow => to separate function parameters from function body**
|
||||||
|
|
||||||
|
Syntax of arrow function:
|
||||||
|
|
||||||
|
* *general form*: comma-separated list of params in parentheses, followed by `=>` arrow, followed by function body in curly braces
|
||||||
|
```js
|
||||||
|
const func_var = (param1, param2) => { return param1 + param2; };
|
||||||
|
```
|
||||||
|
* *compact form (single return)*: if function body is a single `return` statement, omit `return`, semicolon, and curly braces
|
||||||
|
```js
|
||||||
|
const func_var = (param1, param2) => param1 + param2;
|
||||||
|
```
|
||||||
|
* *compact form (1 param)*: if arrow func has only 1 param, omit `()`
|
||||||
|
```js
|
||||||
|
const func_var = param => param*param + 2*param;
|
||||||
|
```
|
||||||
|
* *compact form (no param)*: if arrow func has no param, `()` must be there
|
||||||
|
```js
|
||||||
|
const constantFunc = () => 42;
|
||||||
|
```
|
||||||
|
|
||||||
|
Additional Syntax rules:
|
||||||
|
* **No newline btw `(param)` and `arrow`**: it will create valid statement with other meaning (e.g. `const polynomial = x`)
|
||||||
|
* **{} must needed in body for single return statement**: it will avoid syntactic ambiguity:
|
||||||
|
```js
|
||||||
|
const f = x => { return { value: x }; }; // Good: f() returns an object
|
||||||
|
const g = x => ({ value: x }); // Good: g() returns an object
|
||||||
|
const h = x => { value: x }; // Bad: h() returns nothing
|
||||||
|
const i = x => { v: x, w: x }; // Bad: Syntax Error
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Where to use arrow function?
|
||||||
|
|
||||||
|
It's like lambda function in Python, it's ideal to pass arrow function to another function
|
||||||
|
```js
|
||||||
|
// Make a copy of an array with null elements removed.
|
||||||
|
let filtered = [1,null,2,3].filter(x => x !== null); // filtered == [1,2,3]
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Arrow Func vs other Funcs
|
||||||
|
|
||||||
|
* Arrow func inherit value of `this` from the environment (where it's defined)
|
||||||
|
* Arrow func do not have a `prototype` property, hence it cannot be used as constructor for new classes.
|
||||||
|
|
||||||
|
### 8.1.4 Nested Functions
|
||||||
|
|
||||||
|
```js
|
||||||
|
function hypotenuse(a, b) {
|
||||||
|
function square(x) { return x*x; }
|
||||||
|
return Math.sqrt(square(a) + square(b));
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Scoping rule of nested function: enclosure function can access param and var of the functions they are nested within (i.e. inner function know outer function's param)
|
Loading…
Reference in New Issue