similar code, different notional machines

skin-deep.js

"use strict";

/*
  similar looking code with substantially different notional machines
  a student will want to study the "cooler" one (DOM, API calls, ...)
  without recognizing the extra orders of magnitude in complexity
  they may be able to make the code work, but missed nuance below the surface

  seen with a strong JS notional machine these programs are very different
*/

// --- primitives only ---

{
  let value = "";
  const holdIt = value;

  if (value.length === 0) {
    value += "!";
  } else {
    value += "?";
  }

  console.log(value);
  console.log(holdIt);
}

// --- primitives xwith pop-up ---
//  user input can be anything
//  program execution pauses synchronously

{
  let value = prompt("enter some text");
  const holdIt = value;

  if (value.length === 0) {
    value += "!";
  } else {
    value += "?";
  }

  console.log(value);
  console.log(holdIt);
}

// --- a array ---
//  reverence type, side effects
//  array method, function arguments

{
  let value = [];
  const holdIt = value;

  if (value.length === 0) {
    value.push("!");
  } else {
    value.push("?");
  }

  console.log(value);
  console.log(holdIt);
}

// --- an array ---
//  reverence type, side effects
//  key/value pairs

{
  let value = {};
  const holdIt = value;

  if (Object.keys(value).length === 0) {
    value.a = "!";
  } else {
    value.a = "?";
  }

  console.log(value);
  console.log(holdIt);
}

// --- the DOM ---
//  reverence type, side effects
//  HTML/JS interactions
//  dynamic page behavior

{
  let value = document.getElementById("root");
  const holdIt = value;

  if (value.innerHTML.length === 0) {
    value.innerHTML += "!";
  } else {
    value.innerHTML += "?";
  }

  console.log(value);
  console.log(holdIt);
}

// --- async/await with primitives ---
//  the event loop
//  asynchronous delays

{
  let value = await fetchAString();
  const holdIt = value;

  if (value.length === 0) {
    value += "!";
  } else {
    value += "?";
  }

  console.log(value);
  console.log(holdIt);
}

// ...