Add for...of loop with const as modern best practice to "Creating closures in loops: A common mistake" (mdn#40654)

* Add for...of with `const` as best practice to "Creating closures in loops"

* Punctuation, wording

* Update index.md

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

Author: miskr-instructure

files/en-us/web/javascript/guide/closures/index.md

@@ -492,28 +492,20 @@ setupHelp();
 
 This example uses `const` instead of `var`, so every closure binds the block-scoped variable, meaning that no additional closures are required.
 
-Another alternative could be to use `forEach()` to iterate over the `helpText` array and attach a listener to each [`<input>`](/en-US/docs/Web/HTML/Reference/Elements/input), as shown:
+If you are writing modern JavaScript anyway, you can consider more alternatives to the plain `for` loop, such as using {{jsxref("Statements/for...of", "for...of")}} loop and declaring `item` as `let` or `const`, or using the {{jsxref("Array/forEach", "forEach()")}} method, which both avoid the closure problem.
 
 ```js
-function showHelp(help) {
-  document.getElementById("help").textContent = help;
-}
-
-function setupHelp() {
-  var helpText = [
-    { id: "email", help: "Your email address" },
-    { id: "name", help: "Your full name" },
-    { id: "age", help: "Your age (you must be over 16)" },
-  ];
-
-  helpText.forEach(function (text) {
-    document.getElementById(text.id).onfocus = function () {
-      showHelp(text.help);
-    };
-  });
+for (const item of helpText) {
+  document.getElementById(item.id).onfocus = () => {
+    document.getElementById("help").textContent = item.help;
+  };
 }
 
-setupHelp();
+helpText.forEach((item) => {
+  document.getElementById(item.id).onfocus = () => {
+    showHelp(item.help);
+  };
+});
 ```
 
 ## Performance considerations