[docs] Clarify reasoning for named function expressions

For convenience, added brief explanations that are given in the linked discussion (mostly eliminating the need to scroll through the comments).
This commit is contained in:
jabacchetta
2017-10-19 19:46:28 -05:00
committed by Jordan Harband
parent 39cf84f43b
commit 3c6d40ccca

View File

@@ -633,7 +633,7 @@ Other Style Guides
<a name="functions--declarations"></a><a name="7.1"></a>
- [7.1](#functions--declarations) Use named function expressions instead of function declarations. eslint: [`func-style`](http://eslint.org/docs/rules/func-style) jscs: [`disallowFunctionDeclarations`](http://jscs.info/rule/disallowFunctionDeclarations)
> Why? Function declarations are hoisted, which means that its easy - too easy - to reference the function before it is defined in the file. This harms readability and maintainability. If you find that a functions definition is large or complex enough that it is interfering with understanding the rest of the file, then perhaps its time to extract it to its own module! Dont forget to name the expression - anonymous functions can make it harder to locate the problem in an Errors call stack. ([Discussion](https://github.com/airbnb/javascript/issues/794))
> Why? Function declarations are hoisted, which means that its easy - too easy - to reference the function before it is defined in the file. This harms readability and maintainability. If you find that a functions definition is large or complex enough that it is interfering with understanding the rest of the file, then perhaps its time to extract it to its own module! Dont forget to explicitly name the expression, regardless of whether or not the name is inferred from the containing variable (which is often the case in modern browsers or when using compilers such as Babel). This eliminates any assumptions made about the Error's call stack. ([Discussion](https://github.com/airbnb/javascript/issues/794))
```javascript
// bad
@@ -647,7 +647,8 @@ Other Style Guides
};
// good
const foo = function bar() {
// lexical name distinguished from the variable-referenced invocation(s)
const foo = function uniqueMoreDescriptiveLexicalFoo() {
// ...
};
```