Recursion: Real-World Applications in JavaScript

Recursion: Real-World Applications

1. JSON Tree Rendering

function renderJSON(obj) {
  if (typeof obj !== "object") return `<span>${obj}</span>`;
  return `<ul>${Object.entries(obj).map(([key, val]) =>
    `<li>${key}: ${renderJSON(val)}</li>`).join("")}</ul>`;
}

2. File Explorer

function renderTree(node, depth = 0) {
  // render node, recurse on children
  if (node.children) node.children.forEach(child => renderTree(child, depth + 1));
}

3. Nested Comments

function renderComment(comment, depth = 0) {
  // render comment, recurse on replies
  comment.replies.forEach(reply => renderComment(reply, depth + 1));
}

4. Deep Clone

function deepClone(obj) {
  if (obj === null || typeof obj !== "object") return obj;
  const clone = Array.isArray(obj) ? [] : {};
  Object.keys(obj).forEach(key => clone[key] = deepClone(obj[key]));
  return clone;
}

5. DOM Traversal

function findElementsByText(node, text) {
  let results = [];
  if (node.textContent.includes(text)) results.push(node);
  node.children.forEach(child => results = results.concat(findElementsByText(child, text)));
  return results;
}

The Takeaway

Real-world recursion: JSON tree rendering (recurse on values), file explorer (recurse on children), nested comments (recurse on replies), deep clone (recurse on object properties), and DOM traversal (recurse on childNodes). Any nested or self-similar structure is a candidate for recursion.