Recursion for Tree Traversal in JavaScript

Recursion for Tree Traversal in JavaScript

Trees are naturally recursive: each node has children, which are themselves trees.

File System

function listFiles(node, depth = 0) {
  console.log("  ".repeat(depth) + node.name);
  if (node.type === "folder" && node.children) {
    node.children.forEach(child => listFiles(child, depth + 1));
  }
}

DOM Traversal

function walkDOM(node, callback) {
  callback(node);
  if (node.children) {
    Array.from(node.children).forEach(child => walkDOM(child, callback));
  }
}
walkDOM(document.body, (node) => console.log(node.tagName));

JSON Exploration

function findKeys(obj, targetKey, results = []) {
  Object.keys(obj).forEach(key => {
    if (key === targetKey) results.push(obj[key]);
    if (typeof obj[key] === "object" && obj[key] !== null) {
      findKeys(obj[key], targetKey, results);
    }
  });
  return results;
}

Binary Tree Traversal

function inorder(node) {
  if (!node) return;
  inorder(node.left);
  console.log(node.value);
  inorder(node.right);
}

The Takeaway

Tree traversal with recursion: file systems (recurse on children), DOM (recurse on childNodes), JSON (recurse on object properties), and binary trees (inorder: left, root, right). Trees are naturally recursive data structures.