eslint/docs/rules/no-use-before-define.md

   1 # Disallow Early Use (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 ```js
  14 /*eslint no-use-before-define: "error"*/
  15
  16 alert(a);
  17 var a = 10;
  18
  19 f();
  20 function f() {}
  21
  22 function g() {
  23     return b;
  24 }
  25 var b = 1;
  26
  27 {
  28     alert(c);
  29     let c = 1;
  30 }
  31
  32 {
  33     class C extends C {}
  34 }
  35
  36 {
  37     class C {
  38         static x = "foo";
  39         [C.x]() {}
  40     }
  41 }
  42
  43 {
  44     const C = class {
  45         static x = C;
  46     }
  47 }
  48
  49 {
  50     const C = class {
  51         static {
  52             C.x = "foo";
  53         }
  54     }
  55 }
  56 ```
  57
  58 Examples of **correct** code for this rule:
  59
  60 ```js
  61 /*eslint no-use-before-define: "error"*/
  62
  63 var a;
  64 a = 10;
  65 alert(a);
  66
  67 function f() {}
  68 f(1);
  69
  70 var b = 1;
  71 function g() {
  72     return b;
  73 }
  74
  75 {
  76     let c;
  77     c++;
  78 }
  79
  80 {
  81     class C {
  82         static x = C;
  83     }
  84 }
  85
  86 {
  87     const C = class C {
  88         static x = C;
  89     }
  90 }
  91
  92 {
  93     const C = class {
  94         x = C;
  95     }
  96 }
  97
  98 {
  99     const C = class C {
 100         static {
 101             C.x = "foo";
 102         }
 103     }
 104 }
 105 ```
 106
 107 ## Options
 108
 109 ```json
 110 {
 111     "no-use-before-define": ["error", { "functions": true, "classes": true, "variables": true }]
 112 }
 113 ```
 114
 115 * `functions` (`boolean`) -
 116   The flag which shows whether or not this rule checks function declarations.
 117   If this is `true`, this rule warns every reference to a function before the function declaration.
 118   Otherwise, ignores those references.
 119   Function declarations are hoisted, so it's safe.
 120   Default is `true`.
 121 * `classes` (`boolean`) -
 122   The flag which shows whether or not this rule checks class declarations of upper scopes.
 123   If this is `true`, this rule warns every reference to a class before the class declaration.
 124   Otherwise, ignores those references if the declaration is in upper function scopes.
 125   Class declarations are not hoisted, so it might be danger.
 126   Default is `true`.
 127 * `variables` (`boolean`) -
 128   This flag determines whether or not the rule checks variable declarations in upper scopes.
 129   If this is `true`, the rule warns every reference to a variable before the variable declaration.
 130   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.
 131   Default is `true`.
 132
 133 This rule accepts `"nofunc"` string as an option.
 134 `"nofunc"` is the same as `{ "functions": false, "classes": true, "variables": true }`.
 135
 136 ### functions
 137
 138 Examples of **correct** code for the `{ "functions": false }` option:
 139
 140 ```js
 141 /*eslint no-use-before-define: ["error", { "functions": false }]*/
 142
 143 f();
 144 function f() {}
 145 ```
 146
 147 This option allows references to function declarations. For function expressions and arrow functions, please see the [`variables`](#variables) option.
 148
 149 ### classes
 150
 151 Examples of **incorrect** code for the `{ "classes": false }` option:
 152
 153 ```js
 154 /*eslint no-use-before-define: ["error", { "classes": false }]*/
 155
 156 new A();
 157 class A {
 158 }
 159
 160 {
 161     class C extends C {}
 162 }
 163
 164 {
 165     class C extends D {}
 166     class D {}
 167 }
 168
 169 {
 170     class C {
 171         static x = "foo";
 172         [C.x]() {}
 173     }
 174 }
 175
 176 {
 177     class C {
 178         static {
 179             new D();
 180         }
 181     }
 182     class D {}
 183 }
 184 ```
 185
 186 Examples of **correct** code for the `{ "classes": false }` option:
 187
 188 ```js
 189 /*eslint no-use-before-define: ["error", { "classes": false }]*/
 190
 191 function foo() {
 192     return new A();
 193 }
 194
 195 class A {
 196 }
 197 ```
 198
 199 ### variables
 200
 201 Examples of **incorrect** code for the `{ "variables": false }` option:
 202
 203 ```js
 204 /*eslint no-use-before-define: ["error", { "variables": false }]*/
 205
 206 console.log(foo);
 207 var foo = 1;
 208
 209 f();
 210 const f = () => {};
 211
 212 g();
 213 const g = function() {};
 214
 215 {
 216     const C = class {
 217         static x = C;
 218     }
 219 }
 220
 221 {
 222     const C = class {
 223         static x = foo;
 224     }
 225     const foo = 1;
 226 }
 227
 228 {
 229     class C {
 230         static {
 231             this.x = foo;
 232         }
 233     }
 234     const foo = 1;
 235 }
 236 ```
 237
 238 Examples of **correct** code for the `{ "variables": false }` option:
 239
 240 ```js
 241 /*eslint no-use-before-define: ["error", { "variables": false }]*/
 242
 243 function baz() {
 244     console.log(foo);
 245 }
 246 var foo = 1;
 247
 248 const a = () => f();
 249 function b() { return f(); }
 250 const c = function() { return f(); }
 251 const f = () => {};
 252
 253 const e = function() { return g(); }
 254 const g = function() {}
 255
 256 {
 257     const C = class {
 258         x = foo;
 259     }
 260     const foo = 1;
 261 }
 262 ```