Replace forEach loops with for...of loops

Author: matthiask

biome.json

@@ -10,10 +10,7 @@
     "linter": {
         "enabled": true,
         "rules": {
-            "recommended": true,
-            "complexity": {
-                "noForEach": "off"
-            }
+            "recommended": true
         }
     },
     "javascript": {

debug_toolbar/static/debug_toolbar/js/history.js

@@ -14,11 +14,7 @@ function difference(setA, setB) {
  * Create an array of dataset properties from a NodeList.
  */
 function pluckData(nodes, key) {
-    const data = [];
-    nodes.forEach((obj) => {
-        data.push(obj.dataset[key]);
-    });
-    return data;
+    return [...nodes].map((obj) => obj.dataset[key]);
 }
 
 function refreshHistory() {
@@ -31,12 +27,14 @@ function refreshHistory() {
     ajaxForm(formTarget)
         .then((data) => {
             // Remove existing rows first then re-populate with new data
-            container.querySelectorAll("tr[data-store-id]").forEach((node) => {
+            for (const node of container.querySelectorAll(
+                "tr[data-store-id]"
+            )) {
                 node.remove();
-            });
-            data.requests.forEach((request) => {
+            }
+            for (const request of data.requests) {
                 container.innerHTML = request.content + container.innerHTML;
-            });
+            }
         })
         .then(() => {
             const allIds = new Set(
@@ -54,18 +52,18 @@ function refreshHistory() {
             };
         })
         .then((refreshInfo) => {
-            refreshInfo.newIds.forEach((newId) => {
+            for (const newId of refreshInfo.newIds) {
                 const row = container.querySelector(
                     `tr[data-store-id="${newId}"]`
                 );
                 row.classList.add("flash-new");
-            });
+            }
             setTimeout(() => {
-                container
-                    .querySelectorAll("tr[data-store-id]")
-                    .forEach((row) => {
-                        row.classList.remove("flash-new");
-                    });
+                for (const row of container.querySelectorAll(
+                    "tr[data-store-id]"
+                )) {
+                    row.classList.remove("flash-new");
+                }
             }, 2000);
         });
 }

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -117,29 +117,31 @@ const djdt = {
             const openMe = this.textContent === toggleOpen;
             const name = this.dataset.toggleName;
             const container = document.getElementById(`${name}_${id}`);
-            container.querySelectorAll(".djDebugCollapsed").forEach((e) => {
-                $$.toggle(e, openMe);
-            });
-            container.querySelectorAll(".djDebugUncollapsed").forEach((e) => {
-                $$.toggle(e, !openMe);
-            });
-            this.closest(".djDebugPanelContent")
-                .querySelectorAll(`.djToggleDetails_${id}`)
-                .forEach((e) => {
-                    if (openMe) {
-                        e.classList.add("djSelected");
-                        e.classList.remove("djUnselected");
-                        this.textContent = toggleClose;
-                    } else {
-                        e.classList.remove("djSelected");
-                        e.classList.add("djUnselected");
-                        this.textContent = toggleOpen;
-                    }
-                    const switch_ = e.querySelector(".djToggleSwitch");
-                    if (switch_) {
-                        switch_.textContent = this.textContent;
-                    }
-                });
+            for (const el of container.querySelectorAll(".djDebugCollapsed")) {
+                $$.toggle(el, openMe);
+            }
+            for (const el of container.querySelectorAll(
+                ".djDebugUncollapsed"
+            )) {
+                $$.toggle(el, !openMe);
+            }
+            for (const el of this.closest(
+                ".djDebugPanelContent"
+            ).querySelectorAll(`.djToggleDetails_${id}`)) {
+                if (openMe) {
+                    el.classList.add("djSelected");
+                    el.classList.remove("djUnselected");
+                    this.textContent = toggleClose;
+                } else {
+                    el.classList.remove("djSelected");
+                    el.classList.add("djUnselected");
+                    this.textContent = toggleOpen;
+                }
+                const switch_ = el.querySelector(".djToggleSwitch");
+                if (switch_) {
+                    switch_.textContent = this.textContent;
+                }
+            }
         });
 
         $$.on(djDebug, "click", "#djHideToolBarButton", (event) => {
@@ -236,12 +238,12 @@ const djdt = {
     hidePanels() {
         const djDebug = getDebugElement();
         $$.hide(document.getElementById("djDebugWindow"));
-        djDebug.querySelectorAll(".djdt-panelContent").forEach((e) => {
-            $$.hide(e);
-        });
-        document.querySelectorAll("#djDebugToolbar li").forEach((e) => {
-            e.classList.remove("djdt-active");
-        });
+        for (const el of djDebug.querySelectorAll(".djdt-panelContent")) {
+            $$.hide(el);
+        }
+        for (const el of document.querySelectorAll("#djDebugToolbar li")) {
+            el.classList.remove("djdt-active");
+        }
     },
     ensureHandleVisibility() {
         const handle = document.getElementById("djDebugToolbarHandle");
@@ -340,10 +342,10 @@ const djdt = {
             const cookieArray = document.cookie.split("; ");
             const cookies = {};
 
-            cookieArray.forEach((e) => {
+            for (const e of cookieArray) {
                 const parts = e.split("=");
                 cookies[parts[0]] = parts[1];
-            });
+            }
 
             return cookies[key];
         },

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -40,31 +40,33 @@ const $$ = {
         return !element.classList.contains("djdt-hidden");
     },
     executeScripts(scripts) {
-        scripts.forEach((script) => {
+        for (const script of scripts) {
             const el = document.createElement("script");
             el.type = "module";
             el.src = script;
             el.async = true;
             document.head.appendChild(el);
-        });
+        }
     },
     applyStyles(container) {
         /*
          * Given a container element, apply styles set via data-djdt-styles attribute.
          * The format is data-djdt-styles="styleName1:value;styleName2:value2"
          * The style names should use the CSSStyleDeclaration camel cased names.
          */
-        container.querySelectorAll("[data-djdt-styles]").forEach((element) => {
+        for (const element of container.querySelectorAll(
+            "[data-djdt-styles]"
+        )) {
             const styles = element.dataset.djdtStyles || "";
-            styles.split(";").forEach((styleText) => {
+            for (const styleText of styles.split(";")) {
                 const styleKeyPair = styleText.split(":");
                 if (styleKeyPair.length === 2) {
                     const name = styleKeyPair[0].trim();
                     const value = styleKeyPair[1].trim();
                     element.style[name] = value;
                 }
-            });
-        });
+            }
+        }
     },
 };
 
@@ -111,14 +113,14 @@ function replaceToolbarState(newStoreId, data) {
     const djDebug = document.getElementById("djDebug");
     djDebug.setAttribute("data-store-id", newStoreId);
     // Check if response is empty, it could be due to an expired storeId.
-    Object.keys(data).forEach((panelId) => {
+    for (const panelId of Object.keys(data)) {
         const panel = document.getElementById(panelId);
         if (panel) {
             panel.outerHTML = data[panelId].content;
             document.getElementById(`djdt-${panelId}`).outerHTML =
                 data[panelId].button;
         }
-    });
+    }
 }
 
 function debounce(func, delay) {
@@ -129,7 +131,9 @@ function debounce(func, delay) {
         clearTimeout(timer);
         timer = setTimeout(() => {
             const result = func(...args);
-            resolves.forEach((r) => r(result));
+            for (const r of resolves) {
+                r(result);
+            }
             resolves = [];
         }, delay);