Unveiling JavaScript’s Control and Data Flow: From Circuits to AST, DFG, CFG

Before discussing JavaScript optimization, the author reflects on Claude Shannon’s mechanical mouse Theseus, illustrating how simple electronic components can solve complex mazes and how Shannon’s introduction of Boolean algebra to circuit design laid the foundation for modern digital computers.

Digital Circuits and Programs

The 2011 smart dimming and color circuit (shown below) demonstrates a modern integrated circuit that, driven by a clock and DAC, converts Boolean results into analog LED signals, varying color and brightness—effectively implementing a complete program in hardware.

The circuit’s manual excerpt (right) shows how register addresses and instructions map to the program’s control flow and data flow, mirroring ROM/RAM storage and clock‑driven execution in software.

By using assemblers or C to describe control and data flow, compilers translate these descriptions into the register writes shown in the manual, allowing developers to program digital circuits without constantly consulting datasheets.

JavaScript Control and Data Flow

To observe JavaScript’s control and data flow, source code is first parsed into an Abstract Syntax Tree (AST). Tools like esprima, estraverse, and escodegen generate, traverse, and regenerate code after modifications.

const esprima = require('esprima');
const AST = esprima.parseScript(jsCode);
const estraverse = require('estraverse');
const escodegen = require('escodegen');
function toEqual(node) {
  if (node.operator === '==') {
    node.operator = '===';
  }
}
function walkIn(ast) {
  estraverse.traverse(ast, {
    enter: (node) => {
      toEqual(node);
    }
  });
}
const code = escodegen.generate(ast);

After building the AST, it can be visualized (see image below) and further transformed into intermediate representations such as Data Flow Graphs (DFG) and Control Flow Graphs (CFG).

Data Flow Graph (DFG)

A DFG abstracts the program by focusing on how data values move and are used, rather than on syntactic constructs like loops. For the example variable arr, the DFG shows its length, index checks, and loads, enabling safe optimizations such as moving length checks out of loops.

Static Single Assignment (SSA)

Converting code to SSA renames each variable assignment so that every variable is assigned exactly once, simplifying data‑flow analysis. Example before and after SSA:

var a = 1;
console.log(a);
a = 2;
console.log(a);

var a0 = 1;
console.log(a0);
var a1 = 2;
console.log(a1);

Control Flow Graph (CFG)

A CFG groups statements into basic blocks, preserving execution order while retaining data‑flow information. The following representation illustrates blocks b0‑b3 for a loop that sums an array.

b0 {
  i0 = literal 0
  i1 = literal 0
  i3 = array
  i4 = jump ^b0
}
b0 -> b1

b1 {
  i5 = ssa:phi ^b1 i0, i12
  i6 = ssa:phi ^i5, i1, i14
  i7 = loadArrayLength i3
  i8 = cmp "<", i6, i7
  i9 = if ^i6, i8
}
b1 -> b2, b3
... (remaining blocks omitted for brevity)

Node Sea

The “Node Sea” visualizes both data‑flow and control‑dependency edges (shown as dashed lines) in a single graph, making it easier to apply multiple optimizations without repeatedly restructuring the graph.