eslint · mdjermanovic · Jan 4, 2025 · Dec 31, 2024 · Dec 31, 2024 · Jan 2, 2025
@@ -7,7 +7,7 @@ rule_type: suggestion
 It is often necessary to capture the current execution context in order to make it available subsequently. A prominent example of this are jQuery callbacks:
 
 ```js
-var that = this;
+const that = this;
 jQuery('li').click(function (event) {
     // here, "this" is the HTMLElement where the click event occurred
     that.setFoo(42);
@@ -36,9 +36,9 @@ Examples of **incorrect** code for this rule with the default `"that"` option:
 ```js
 /*eslint consistent-this: ["error", "that"]*/
 
-var that = 42;
+let that = 42;
 
-var self = this;
+let self = this;
 
 that = 42;
 
@@ -54,11 +54,11 @@ Examples of **correct** code for this rule with the default `"that"` option:
 ```js
 /*eslint consistent-this: ["error", "that"]*/
 
-var that = this;
+let that = this;
 
-var self = 42;
+const self = 42;
 
-var self;
+let foo;
 
 that = this;
 
@@ -74,7 +74,7 @@ Examples of **incorrect** code for this rule with the default `"that"` option, i
 ```js
 /*eslint consistent-this: ["error", "that"]*/
 
-var that;
+let that;
 function f() {
     that = this;
 }
@@ -84,16 +84,27 @@ function f() {
 
 Examples of **correct** code for this rule with the default `"that"` option, if the variable is not initialized:
 
+Declaring a variable `that` and assigning `this` to it.
+
 ::: correct
 
 ```js
 /*eslint consistent-this: ["error", "that"]*/
 
-var that;
+let that;
 that = this;
+```
+
+:::
+
+Declaring two variables, `foo` and `that`, with `foo` initialized, and then assigning `this` to `that`.
+
+::: correct
+
+```js
+/*eslint consistent-this: ["error", "that"]*/
 
-var foo, that;
-foo = 42;
+let foo = 42, that;
 that = this;
 ```
 

@@ -12,7 +12,7 @@ related_rules:
 Very short identifier names like `e`, `x`, `_t` or very long ones like `hashGeneratorResultOutputContainerObject` can make code harder to read and potentially less maintainable. To prevent this, one may enforce a minimum and/or maximum identifier length.
 
 ```js
-var x = 5; // too short; difficult to understand its purpose without context
+const x = 5; // too short; difficult to understand its purpose without context
 ```
 
 ## Rule Details
@@ -30,15 +30,15 @@ Examples of **incorrect** code for this rule with the default options:
 ```js
 /*eslint id-length: "error"*/     // default is minimum 2-chars ({ "min": 2 })
 
-var x = 5;
+const x = 5;
 obj.e = document.body;
-var foo = function (e) { };
+const foo = function (e) { };
 try {
     dangerousStuff();
 } catch (e) {
     // ignore as many do
 }
-var myObj = { a: 1 };
+const myObj = { a: 1 };
 (a) => { a * a };
 class y { }
 class Foo { x() {} }
@@ -47,11 +47,11 @@ class Baz { x = 1 }
 class Qux { #x = 1 }
 function bar(...x) { }
 function baz([x]) { }
-var [x] = arr;
-var { prop: [x]} = {};
+const [z] = arr;
+const { prop: [i]} = {};
 function qux({x}) { }
-var { x } = {};
-var { prop: a} = {};
+const { j } = {};
+const { prop: a} = {};
 ({ prop: obj.x } = {});
 ```
 
@@ -64,17 +64,17 @@ Examples of **correct** code for this rule with the default options:
 ```js
 /*eslint id-length: "error"*/     // default is minimum 2-chars ({ "min": 2 })
 
-var num = 5;
+const num = 5;
 function _f() { return 42; }
 function _func() { return 42; }
 obj.el = document.body;
-var foo = function (evt) { /* do stuff */ };
+const foo = function (evt) { /* do stuff */ };
 try {
     dangerousStuff();
 } catch (error) {
     // ignore as many do
 }
-var myObj = { apple: 1 };
+const myObj = { apple: 1 };
 (num) => { num * num };
 function bar(num = 0) { }
 class MyClass { }
@@ -84,15 +84,14 @@ class Baz { field = 1 }
 class Qux { #field = 1 }
 function baz(...args) { }
 function qux([longName]) { }
-var { prop } = {};
-var { prop: [longName] } = {};
-var [longName] = arr;
+const { prop } = {};
+const { prop: [name] } = {};
+const [longName] = arr;
 function foobar({ prop }) { }
 function foobaz({ a: prop }) { }
-var { prop } = {};
-var { a: prop } = {};
+const { a: property } = {};
 ({ prop: obj.longName } = {});
-var data = { "x": 1 };  // excused because of quotes
+const data = { "x": 1 };  // excused because of quotes
 data["y"] = 3;  // excused because of calculated property access
 ```
 
@@ -116,23 +115,23 @@ Examples of **incorrect** code for this rule with the `{ "min": 4 }` option:
 ```js
 /*eslint id-length: ["error", { "min": 4 }]*/
 
-var val = 5;
+const val = 5;
 obj.e = document.body;
 function foo (e) { };
 try {
     dangerousStuff();
 } catch (e) {
     // ignore as many do
 }
-var myObj = { a: 1 };
+const myObj = { a: 1 };
 (val) => { val * val };
 class y { }
 class Foo { x() {} }
 function bar(...x) { }
-var { x } = {};
-var { prop: a} = {};
-var [x] = arr;
-var { prop: [x]} = {};
+const { x } = {};
+const { prop: a} = {};
+const [i] = arr;
+const { prop: [num]} = {};
 ({ prop: obj.x } = {});
 ```
 
@@ -145,27 +144,27 @@ Examples of **correct** code for this rule with the `{ "min": 4 }` option:
 ```js
 /*eslint id-length: ["error", { "min": 4 }]*/
 
-var value = 5;
+const value = 5;
 function func() { return 42; }
 object.element = document.body;
-var foobar = function (event) { /* do stuff */ };
+const foobar = function (event) { /* do stuff */ };
 try {
     dangerousStuff();
 } catch (error) {
     // ignore as many do
 }
-var myObj = { apple: 1 };
+const myObj = { apple: 1 };
 (value) => { value * value };
 function foobaz(value = 0) { }
 class MyClass { }
 class Foobar { method() {} }
 function barbaz(...args) { }
-var { prop } = {};
-var [longName] = foo;
-var { a: [prop] } = {};
-var { a: longName } = {};
+const { prop } = {};
+const [longName] = foo;
+const { a: [name] } = {};
+const { a: record } = {};
 ({ prop: object.name } = {});
-var data = { "x": 1 };  // excused because of quotes
+const data = { "x": 1 };  // excused because of quotes
 data["y"] = 3;  // excused because of calculated property access
 ```
 
@@ -180,17 +179,17 @@ Examples of **incorrect** code for this rule with the `{ "max": 10 }` option:
 ```js
 /*eslint id-length: ["error", { "max": 10 }]*/
 
-var reallyLongVarName = 5;
+const reallyLongVarName = 5;
 function reallyLongFuncName() { return 42; }
 obj.reallyLongPropName = document.body;
-var foo = function (reallyLongArgName) { /* do stuff */ };
+const foo = function (reallyLongArgName) { /* do stuff */ };
 try {
     dangerousStuff();
 } catch (reallyLongErrorName) {
     // ignore as many do
 }
 (reallyLongArgName) => { return !reallyLongArgName; };
-var [reallyLongFirstElementName] = arr;
+const [reallyLongFirstElementName] = arr;
 ```
 
 :::
@@ -202,17 +201,17 @@ Examples of **correct** code for this rule with the `{ "max": 10 }` option:
 ```js
 /*eslint id-length: ["error", { "max": 10 }]*/
 
-var varName = 5;
+const varName = 5;
 function funcName() { return 42; }
 obj.propName = document.body;
-var foo = function (arg) { /* do stuff */ };
+const foo = function (arg) { /* do stuff */ };
 try {
     dangerousStuff();
 } catch (error) {
     // ignore as many do
 }
 (arg) => { return !arg; };
-var [first] = arr;
+const [first] = arr;
 ```
 
 :::
@@ -226,7 +225,7 @@ Examples of **correct** code for this rule with the `{ "properties": "never" }`
 ```js
 /*eslint id-length: ["error", { "properties": "never" }]*/
 
-var myObj = { a: 1 };
+const myObj = { a: 1 };
 ({ a: obj.x.y.z } = {});
 ({ prop: obj.i } = {});
 ```
@@ -240,19 +239,19 @@ Examples of additional **correct** code for this rule with the `{ "exceptions":
 ::: correct
 
 ```js
-/*eslint id-length: ["error", { "exceptions": ["x", "y", "z", "ζ"] }]*/
+/*eslint id-length: ["error", { "exceptions": ["x", "y", "z", "ζ", "i"] }]*/
 
-var x = 5;
+const x = 5;
 function y() { return 42; }
 obj.x = document.body;
-var foo = function (x) { /* do stuff */ };
+const foo = function (x) { /* do stuff */ };
 try {
     dangerousStuff();
 } catch (x) {
     // ignore as many do
 }
 (x) => { return x * x; };
-var [x] = arr;
+const [i] = arr;
 const { z } = foo;
 const { a: ζ } = foo;
 ```
@@ -266,19 +265,19 @@ Examples of additional **correct** code for this rule with the `{ "exceptionPatt
 ::: correct
 
 ```js
-/*eslint id-length: ["error", { "exceptionPatterns": ["E|S", "[x-z]"] }]*/
+/*eslint id-length: ["error", { "exceptionPatterns": ["E|S|X", "[x-z]"] }]*/
 
-var E = 5;
+const E = 5;
 function S() { return 42; }
 obj.x = document.body;
-var foo = function (x) { /* do stuff */ };
+const foo = function (x) { /* do stuff */ };
 try {
     dangerousStuff();
 } catch (x) {
     // ignore as many do
 }
 (y) => {return  y * y};
-var [E] = arr;
+const [X] = arr;
 const { y } = foo;
 const { a: z } = foo;
 ```