Further tweaks to keyed implementation

Author: mksunny1

frameworks/keyed/vanillajs-3/src/Main.js

@@ -1,20 +1,14 @@
 const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
 const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
 const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
-const lengths = [adjectives.length, colours.length, nouns.length];
-function* _random(n) {
-    for (let max of lengths) {
-        const arr = new Array(n);
-        for (i = 0; i < n; i++) arr[i] = Math.round(Math.random() * 1000) % max;
-        yield arr
-    }
-}
-const data = [], nTemplates = (n) => 10, tbody = document.getElementsByTagName('tbody')[0];
-let index = 1, i, lbl, selected;
+const [l1, l2, l3] = [adjectives.length, colours.length, nouns.length];
 
-function create(n = 1000) { if (data.length) clear(); append(n); }
+const nTemplates = (n) => 10, tbody = document.getElementsByTagName('tbody')[0];
+let data = [], index = 1, i, lbl, selected;
+
+function create(n = 1000) { if (tbody.children.length) clear(); append(n); }
 function append(n = 1000) {
-    const [r1, r2, r3] = _random(n), nt = nTemplates(n), arr = new Array(nt);; let j = 0;
+    const nt = nTemplates(n); let j = 0, r1, r2, r3;
     const itemTemplate = document.getElementById('itemTemplate').content;
     while (nt >= itemTemplate.children.length * 2) itemTemplate.appendChild(itemTemplate.cloneNode(true));
     while (nt > itemTemplate.children.length) itemTemplate.appendChild(itemTemplate.firstElementChild.cloneNode(true));
@@ -24,21 +18,22 @@ function append(n = 1000) {
 
     while ((n -= nt) >= 0) {
         for (i = 0; i < nt; i++, j++) {
-            ids[i].nodeValue = index++;
-            labels[i].nodeValue = arr[i] =  `${adjectives[r1[j]]} ${colours[r2[j]]} ${nouns[r3[j]]}`    
-        }
-        data.push(...arr);
+            r1 = Math.round(Math.random() * 1000) % l1;
+            r2 = Math.round(Math.random() * 1000) % l2;
+            r3 = Math.round(Math.random() * 1000) % l3;
+            (ids[i].nodeValue = index++) && data.push(labels[i].nodeValue = `${adjectives[r1]} ${colours[r2]} ${nouns[r3]}`)  
+        } 
         tbody.appendChild(itemTemplate.cloneNode(true));
     }
 }
 function update() {
     const labels = tbody.querySelectorAll('a.lbl'), length = labels.length;
-    for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!';
+    for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!'
 }
-function clear() { data.length = 0; tbody.textContent = '' }
+function clear() { (data = []) && (tbody.textContent = '') }
 
 function swap() {
-    if (data.length < 999) return; const first = tbody.firstElementChild;
+    if (tbody.children.length < 999) return; const first = tbody.firstElementChild;
     [data[1], data[998]] = [data[998], data[1]];
     tbody.insertBefore(tbody.insertBefore(first.nextElementSibling, 
         tbody.children[998]).nextElementSibling, first.nextElementSibling);
@@ -50,11 +45,11 @@ tbody.onclick = (e) => {
         if (element === selected) selected.className = selected.className ? "" : "danger";
         else {
             if (selected) selected.className = "";
-            element.className = "danger"; selected = element
+            (element.className = "danger") && (selected = element)
         }
     } else if (e.target.matches('span.remove')) { 
         const element = e.target.parentNode.parentNode.parentNode;
-        data.splice(Array.prototype.indexOf.call(tbody.children, element), 1) && tbody.removeChild(element);
+        data.splice(Array.prototype.indexOf.call(tbody.children, element)) && tbody.removeChild(element);
     }
 }
 for (let [key, fn] of Object.entries({