Programing Style: Concrete vs Abstract Code

By Xah Lee. Date: . Last updated: .

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);

}

Programing Idioms and Style