1 | # Disallow the use of variables before they are defined (no-use-before-define)
|
2 |
|
3 | In JavaScript, prior to ES6, variable and function declarations are hoisted to the top of a scope, so it's possible to use identifiers before their formal declarations in code. This can be confusing and some believe it is best to always declare variables and functions before using them.
|
4 |
|
5 | In ES6, block-level bindings (`let` and `const`) introduce a "temporal dead zone" where a `ReferenceError` will be thrown with any attempt to access the variable before its declaration.
|
6 |
|
7 | ## Rule Details
|
8 |
|
9 | This rule will warn when it encounters a reference to an identifier that has not yet been declared.
|
10 |
|
11 | Examples of **incorrect** code for this rule:
|
12 |
|
13 | ```ts
|
14 | /*eslint no-use-before-define: "error"*/
|
15 | /*eslint-env es6*/
|
16 |
|
17 | alert(a);
|
18 | var a = 10;
|
19 |
|
20 | f();
|
21 | function f() {}
|
22 |
|
23 | function g() {
|
24 | return b;
|
25 | }
|
26 | var b = 1;
|
27 |
|
28 | // With blockBindings: true
|
29 | {
|
30 | alert(c);
|
31 | let c = 1;
|
32 | }
|
33 |
|
34 | let myVar: StringOrNumber;
|
35 | type StringOrNumber = string | number;
|
36 | ```
|
37 |
|
38 | Examples of **correct** code for this rule:
|
39 |
|
40 | ```ts
|
41 | /*eslint no-use-before-define: "error"*/
|
42 | /*eslint-env es6*/
|
43 |
|
44 | var a;
|
45 | a = 10;
|
46 | alert(a);
|
47 |
|
48 | function f() {}
|
49 | f(1);
|
50 |
|
51 | var b = 1;
|
52 | function g() {
|
53 | return b;
|
54 | }
|
55 |
|
56 | // With blockBindings: true
|
57 | {
|
58 | let C;
|
59 | c++;
|
60 | }
|
61 |
|
62 | type StringOrNumber = string | number;
|
63 | let myVar: StringOrNumber;
|
64 | ```
|
65 |
|
66 | ## Options
|
67 |
|
68 | ```json
|
69 | {
|
70 | "no-use-before-define": ["error", { "functions": true, "classes": true }]
|
71 | }
|
72 | ```
|
73 |
|
74 | * `functions` (`boolean`) -
|
75 | The flag which shows whether or not this rule checks function declarations.
|
76 | If this is `true`, this rule warns every reference to a function before the function declaration.
|
77 | Otherwise, ignores those references.
|
78 | Function declarations are hoisted, so it's safe.
|
79 | Default is `true`.
|
80 | * `classes` (`boolean`) -
|
81 | The flag which shows whether or not this rule checks class declarations of upper scopes.
|
82 | If this is `true`, this rule warns every reference to a class before the class declaration.
|
83 | Otherwise, ignores those references if the declaration is in upper function scopes.
|
84 | Class declarations are not hoisted, so it might be danger.
|
85 | Default is `true`.
|
86 | * `variables` (`boolean`) -
|
87 | This flag determines whether or not the rule checks variable declarations in upper scopes.
|
88 | If this is `true`, the rule warns every reference to a variable before the variable declaration.
|
89 | Otherwise, the rule ignores a reference if the declaration is in an upper scope, while still reporting the reference if it's in the same scope as the declaration.
|
90 | Default is `true`.
|
91 | * `typedefs` (`boolean`, **added** in `eslint-plugin-typescript`) -
|
92 | The flag which shows whether or not this rule checks type declarations.
|
93 | If this is `true`, this rule warns every reference to a type before the type declaration.
|
94 | Otherwise, ignores those references.
|
95 | Type declarations are hoisted, so it's safe.
|
96 | Default is `true`.
|
97 |
|
98 | This rule accepts `"nofunc"` string as an option.
|
99 | `"nofunc"` is the same as `{ "functions": false, "classes": true }`.
|
100 |
|
101 | ### functions
|
102 |
|
103 | Examples of **correct** code for the `{ "functions": false }` option:
|
104 |
|
105 | ```js
|
106 | /*eslint no-use-before-define: ["error", { "functions": false }]*/
|
107 |
|
108 | f();
|
109 | function f() {}
|
110 | ```
|
111 |
|
112 | ### classes
|
113 |
|
114 | Examples of **incorrect** code for the `{ "classes": false }` option:
|
115 |
|
116 | ```js
|
117 | /*eslint no-use-before-define: ["error", { "classes": false }]*/
|
118 | /*eslint-env es6*/
|
119 |
|
120 | new A();
|
121 | class A {
|
122 | }
|
123 | ```
|
124 |
|
125 | Examples of **correct** code for the `{ "classes": false }` option:
|
126 |
|
127 | ```js
|
128 | /*eslint no-use-before-define: ["error", { "classes": false }]*/
|
129 | /*eslint-env es6*/
|
130 |
|
131 | function foo() {
|
132 | return new A();
|
133 | }
|
134 |
|
135 | class A {
|
136 | }
|
137 | ```
|
138 |
|
139 | ### variables
|
140 |
|
141 | Examples of **incorrect** code for the `{ "variables": false }` option:
|
142 |
|
143 | ```js
|
144 | /*eslint no-use-before-define: ["error", { "variables": false }]*/
|
145 |
|
146 | console.log(foo);
|
147 | var foo = 1;
|
148 | ```
|
149 |
|
150 | Examples of **correct** code for the `{ "variables": false }` option:
|
151 |
|
152 | ```js
|
153 | /*eslint no-use-before-define: ["error", { "variables": false }]*/
|
154 |
|
155 | function baz() {
|
156 | console.log(foo);
|
157 | }
|
158 |
|
159 | var foo = 1;
|
160 | ```
|
161 |
|
162 | ### typedefs
|
163 |
|
164 | Examples of **correct** code for the `{ "typedefs": false }` option:
|
165 |
|
166 | ```ts
|
167 | /*eslint no-use-before-define: ["error", { "typedefs": false }]*/
|
168 |
|
169 | let myVar: StringOrNumber;
|
170 | type StringOrNumber = string | number;
|
171 | ```
|
172 |
|
173 |
|
174 | Copied from [the original ESLint rule docs](https://github.com/eslint/eslint/blob/a113cd3/docs/rules/no-use-before-define.md)
|