Programing Style: Concrete vs Abstract Code
Here's illustration of 2 styles of code doing the same thing. One is concrete, the other abstract.
Concrete:
mv //xpc/users/xah/Documents/*.png c:/Users/xah/Downloads/x_todo_pics/ && mv //xpc/users/xah/Documents/*.jpg c:/Users/xah/Downloads/x_todo_pics/ && mv //xpc/users/xah/Pictures/*.png c:/Users/xah/Downloads/x_todo_pics/ && mv //xpc/users/xah/Pictures/*.jpg c:/Users/xah/Downloads/x_todo_pics/
Abstract:
$fromRoot = "//xpc/users/xah/" $fromDirs = "Documents" , "Pictures" $suffixPattern = "*.png" , "*.jpg" $toDir = "c:/Users/xah/Downloads/x_todo_pics/" foreach ($x in $fromDirs) { $from = join-path $fromRoot $x; foreach ($ext in $suffixPattern) { mv (join-path $from $ext) $toDir; } }
Concrete code is usually easier to understand, but is more verbose.
Abstract code is usually recommended, because it reduces repetition , but may be harder to understand.
JavaScript Example: Concrete vs Abstract Code
Concrete:
{ document.getElementById("outputBox13302").innerHTML = `<ul> <li><b>navigator.hardwareConcurrency:</b> ${navigator.hardwareConcurrency}</li> <li><b>navigator.language:</b> ${navigator.language}</li> <li><b>navigator.languages:</b> ${navigator.languages}</li> <li><b>navigator.appName:</b> ${navigator.appName}</li> <li><b>navigator.appCodeName:</b> ${navigator.appCodeName}</li> <li><b>navigator.appVersion:</b> ${navigator.appVersion}</li> <li><b>navigator.platform:</b> ${navigator.platform}</li> <li><b>navigator.product:</b> ${navigator.product}</li> <li><b>navigator.userAgent:</b> ${navigator.userAgent}</li> <li><b>navigator.cookieEnabled:</b> ${navigator.cookieEnabled}</li> </ul>`; }
Abstract:
{ const xkeys = [ "hardwareConcurrency", "language", "languages", "appName", "appCodeName", "appVersion", "platform", "product", "userAgent", "cookieEnabled", ]; const xul = document.createElement("ul"); for (let xkey of xkeys) { const xName = document.createTextNode(`navigator.${xkey}: `); const xval = document.createTextNode(navigator[xkey]); const xBoldBox = document.createElement("b"); xBoldBox.appendChild(xName); const xli = document.createElement("li"); xli.appendChild(xBoldBox); xli.appendChild(xval); xul.appendChild(xli); } document.getElementById("outputBox13302").appendChild(xul); }