From 36ef8bbeab495ef2598a4b1f52e32b4cb50be5e2 Mon Sep 17 00:00:00 2001
From: Amaresh  S M <amareshsm13@gmail.com>
Date: Sun, 5 Jan 2025 00:39:32 +0530
Subject: [PATCH] docs: rewrite examples with var using let and const (#19298)

* docs: rewrite examples with var using let and const

* revert comma-spacing.md changes

* consistent this rename to let/const

* id-length rename eg with let/const

* id-match rename eg with let/const

* rewrite missed eg

* Update docs/src/rules/consistent-this.md

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Update docs/src/rules/consistent-this.md

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Update docs/src/rules/no-multi-assign.md

Co-authored-by: Tanuj Kanti <86398394+Tanujkanti4441@users.noreply.github.com>

* Update id-match.md

---------

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>
Co-authored-by: Tanuj Kanti <86398394+Tanujkanti4441@users.noreply.github.com>
---
 docs/src/rules/consistent-this.md | 31 +++++++----
 docs/src/rules/id-length.md       | 91 +++++++++++++++----------------
 docs/src/rules/id-match.md        | 38 ++++++-------
 docs/src/rules/no-iterator.md     |  2 +-
 docs/src/rules/no-multi-assign.md |  8 +--
 docs/src/rules/no-octal-escape.md |  8 +--
 docs/src/rules/no-self-compare.md |  2 +-
 7 files changed, 95 insertions(+), 85 deletions(-)

diff --git a/docs/src/rules/consistent-this.md b/docs/src/rules/consistent-this.md
index 8f029adaa937..a77ea987179e 100644
--- a/docs/src/rules/consistent-this.md
+++ b/docs/src/rules/consistent-this.md
@@ -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;
 ```
 
diff --git a/docs/src/rules/id-length.md b/docs/src/rules/id-length.md
index 7c8359e47945..8d18cacee7eb 100644
--- a/docs/src/rules/id-length.md
+++ b/docs/src/rules/id-length.md
@@ -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,7 +115,7 @@ 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 {
@@ -124,15 +123,15 @@ try {
 } 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;
 ```
diff --git a/docs/src/rules/id-match.md b/docs/src/rules/id-match.md
index 86ff85f904b7..f016b3ab43d9 100644
--- a/docs/src/rules/id-match.md
+++ b/docs/src/rules/id-match.md
@@ -34,10 +34,10 @@ Examples of **incorrect** code for this rule with the `"^[a-z]+([A-Z][a-z]+)*$"`
 ```js
 /*eslint id-match: ["error", "^[a-z]+([A-Z][a-z]+)*$"]*/
 
-var my_favorite_color = "#112C85";
-var _myFavoriteColor  = "#112C85";
-var myFavoriteColor_  = "#112C85";
-var MY_FAVORITE_COLOR = "#112C85";
+const my_favorite_color = "#112C85";
+const _myFavoriteColor  = "#112C85";
+const myFavoriteColor_  = "#112C85";
+const MY_FAVORITE_COLOR = "#112C85";
 function do_something() {
     // ...
 }
@@ -62,11 +62,11 @@ Examples of **correct** code for this rule with the `"^[a-z]+([A-Z][a-z]+)*$"` o
 ```js
 /*eslint id-match: ["error", "^[a-z]+([A-Z][a-z]+)*$"]*/
 
-var myFavoriteColor   = "#112C85";
-var foo = bar.baz_boom;
-var foo = { qux: bar.baz_boom };
+const myFavoriteColor   = "#112C85";
+const foo = bar.baz_boom;
+const buz = { qux: bar.baz_boom };
 do_something();
-var obj = {
+const obj = {
     my_pref: 1
 };
 
@@ -103,7 +103,7 @@ Examples of **incorrect** code for this rule with the `"^[a-z]+([A-Z][a-z]+)*$",
 ```js
 /*eslint id-match: ["error", "^[a-z]+([A-Z][a-z]+)*$", { "properties": true }]*/
 
-var obj = {
+const obj = {
     my_pref: 1
 };
 
@@ -157,15 +157,15 @@ Examples of **incorrect** code for this rule with the default `"^[^_]+$", { "ign
 ```js
 /*eslint id-match: [2, "^[^_]+$", { "ignoreDestructuring": false }]*/
 
-var { category_id } = query;
+const { category_id } = query;
 
-var { category_id = 1 } = query;
+const { categoryid_Default = 1 } = query;
 
-var { category_id: category_id } = query;
+const { category_ids: category_ids } = query;
 
-var { category_id: category_alias } = query;
+const { category_id: category_Alias } = query;
 
-var { category_id: categoryId, ...other_props } = query;
+const { category_id: category_IdRenamed, ...other_Props } = query;
 ```
 
 :::
@@ -179,9 +179,9 @@ Examples of **incorrect** code for this rule with the `"^[^_]+$", { "ignoreDestr
 ```js
 /*eslint id-match: [2, "^[^_]+$", { "ignoreDestructuring": true }]*/
 
-var { category_id: category_alias } = query;
+const { category_id: category_alias } = query;
 
-var { category_id, ...other_props } = query;
+const { category_id: category_Id, ...other_props } = query;
 ```
 
 :::
@@ -193,11 +193,11 @@ Examples of **correct** code for this rule with the `"^[^_]+$", { "ignoreDestruc
 ```js
 /*eslint id-match: [2, "^[^_]+$", { "ignoreDestructuring": true }]*/
 
-var { category_id } = query;
+const { category_id } = query;
 
-var { category_id = 1 } = query;
+const { category_Id = 1 } = query;
 
-var { category_id: category_id } = query;
+const { category_alias: category_alias } = query;
 ```
 
 :::
diff --git a/docs/src/rules/no-iterator.md b/docs/src/rules/no-iterator.md
index 70186826239b..7da0a23775f4 100644
--- a/docs/src/rules/no-iterator.md
+++ b/docs/src/rules/no-iterator.md
@@ -48,7 +48,7 @@ Examples of **correct** code for this rule:
 ```js
 /*eslint no-iterator: "error"*/
 
-var __iterator__ = foo; // Not using the `__iterator__` property.
+const __iterator__ = foo; // Not using the `__iterator__` property.
 ```
 
 :::
diff --git a/docs/src/rules/no-multi-assign.md b/docs/src/rules/no-multi-assign.md
index f4f4c2fce5aa..a9d9c158eb4a 100644
--- a/docs/src/rules/no-multi-assign.md
+++ b/docs/src/rules/no-multi-assign.md
@@ -27,7 +27,7 @@ Examples of **incorrect** code for this rule:
 ```js
 /*eslint no-multi-assign: "error"*/
 
-var a = b = c = 5;
+let a = b = c = 5;
 
 const foo = bar = "baz";
 
@@ -51,9 +51,9 @@ Examples of **correct** code for this rule:
 ```js
 /*eslint no-multi-assign: "error"*/
 
-var a = 5;
-var b = 5;
-var c = 5;
+let a = 5;
+let b = 5;
+const c = 5;
 
 const foo = "baz";
 const bar = "baz";
diff --git a/docs/src/rules/no-octal-escape.md b/docs/src/rules/no-octal-escape.md
index 755bc56bc84f..d470007536a2 100644
--- a/docs/src/rules/no-octal-escape.md
+++ b/docs/src/rules/no-octal-escape.md
@@ -7,7 +7,7 @@ rule_type: suggestion
 As of the ECMAScript 5 specification, octal escape sequences in string literals are deprecated and should not be used. Unicode escape sequences should be used instead.
 
 ```js
-var foo = "Copyright \251";
+const foo = "Copyright \251";
 ```
 
 ## Rule Details
@@ -23,7 +23,7 @@ Examples of **incorrect** code for this rule:
 ```js
 /*eslint no-octal-escape: "error"*/
 
-var foo = "Copyright \251";
+const foo = "Copyright \251";
 ```
 
 :::
@@ -35,9 +35,9 @@ Examples of **correct** code for this rule:
 ```js
 /*eslint no-octal-escape: "error"*/
 
-var foo = "Copyright \u00A9";   // unicode
+const foo = "Copyright \u00A9";   // unicode
 
-var foo = "Copyright \xA9";     // hexadecimal
+const buz = "Copyright \xA9";     // hexadecimal
 ```
 
 :::
diff --git a/docs/src/rules/no-self-compare.md b/docs/src/rules/no-self-compare.md
index bf0562993df1..139b97c96c3e 100644
--- a/docs/src/rules/no-self-compare.md
+++ b/docs/src/rules/no-self-compare.md
@@ -19,7 +19,7 @@ Examples of **incorrect** code for this rule:
 ```js
 /*eslint no-self-compare: "error"*/
 
-var x = 10;
+let x = 10;
 if (x === x) {
     x = 20;
 }